From 727c04d368979c614fafc2eb8961b0ec1c027303 Mon Sep 17 00:00:00 2001 From: Sergey Elpashev Date: Thu, 2 May 2024 15:04:05 +0300 Subject: [PATCH] AppBar and Header components --- lib/components/app_bar.dart | 36 ++++++++++ lib/components/heading.dart | 26 +++++++ lib/main.dart | 25 +------ lib/pages/basket.dart | 22 +++--- lib/pages/detail.dart | 132 ++++++++++++++++++----------------- lib/pages/order_history.dart | 20 +++--- 6 files changed, 155 insertions(+), 106 deletions(-) create mode 100644 lib/components/app_bar.dart create mode 100644 lib/components/heading.dart diff --git a/lib/components/app_bar.dart b/lib/components/app_bar.dart new file mode 100644 index 0000000..20ea761 --- /dev/null +++ b/lib/components/app_bar.dart @@ -0,0 +1,36 @@ +import 'package:flutter/material.dart'; + +class GymLinkAppBar extends StatelessWidget implements PreferredSizeWidget { + const GymLinkAppBar({super.key}); + + @override + Widget build(BuildContext context) { + return AppBar( + backgroundColor: Colors.white, + shadowColor: null, + automaticallyImplyLeading: false, + elevation: 0, + scrolledUnderElevation: 4, + title: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Padding( + padding: const EdgeInsets.only(right: 8), + child: Image.asset('logo.png', width: 24, height: 24), + ), + Align( + alignment: Alignment.centerRight, + child: Text( + 'Powered by GymLink', + style: Theme.of(context).textTheme.titleSmall, + ), + ), + ], + ), + toolbarHeight: 30, + ); + } + + @override + Size get preferredSize => const Size.fromHeight(30); +} diff --git a/lib/components/heading.dart b/lib/components/heading.dart new file mode 100644 index 0000000..030363a --- /dev/null +++ b/lib/components/heading.dart @@ -0,0 +1,26 @@ +import 'package:flutter/material.dart'; + +class GymLinkHeader extends StatelessWidget { + final String title; + const GymLinkHeader({super.key, required this.title}); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 20), + child: Column( + children: [ + Row( + children: [ + IconButton( + onPressed: () => Navigator.pop(context), + icon: const Icon(Icons.arrow_back)), + Text(title, style: Theme.of(context).textTheme.titleLarge), + ], + ), + const Divider(thickness: 1, height: 0), + ], + ), + ); + } +} diff --git a/lib/main.dart b/lib/main.dart index 347f71e..f76de59 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -3,6 +3,7 @@ import 'dart:js_interop' as js; import 'dart:js_interop_unsafe' as js_util; import 'package:flutter/material.dart'; +import 'package:gymlink_module_web/components/app_bar.dart'; import 'package:gymlink_module_web/components/card.dart'; import 'package:gymlink_module_web/pages/basket.dart'; import 'package:gymlink_module_web/pages/detail.dart'; @@ -122,29 +123,7 @@ class _MainPageState extends State { @override Widget build(BuildContext context) { return Scaffold( - appBar: widget.isLoading - ? null - : AppBar( - backgroundColor: Colors.white, - elevation: 0, - title: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Padding( - padding: const EdgeInsets.only(right: 8), - child: Image.asset('logo.png', width: 24, height: 24), - ), - Align( - alignment: Alignment.centerRight, - child: Text( - 'Powered by GymLink', - style: Theme.of(context).textTheme.titleSmall, - ), - ), - ], - ), - toolbarHeight: 30, - ), + appBar: widget.isLoading ? null : const GymLinkAppBar(), body: widget.isLoading ? const Center(child: CircularProgressIndicator()) : Column( diff --git a/lib/pages/basket.dart b/lib/pages/basket.dart index 0479582..841c369 100644 --- a/lib/pages/basket.dart +++ b/lib/pages/basket.dart @@ -1,4 +1,6 @@ import 'package:flutter/material.dart'; +import 'package:gymlink_module_web/components/app_bar.dart'; +import 'package:gymlink_module_web/components/heading.dart'; class BasketPage extends StatelessWidget { const BasketPage({ @@ -6,16 +8,16 @@ class BasketPage extends StatelessWidget { }); @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - leading: IconButton( - icon: const Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context), + return const Scaffold( + appBar: GymLinkAppBar(), + body: Column( + children: [ + GymLinkHeader(title: 'Корзина'), + Center( + child: Text('Корзина'), ), - title: const Text('Корзина'), - ), - body: const Center( - child: Text('Корзина'), - )); + ], + ), + ); } } diff --git a/lib/pages/detail.dart b/lib/pages/detail.dart index 877a0ce..1ad8ec5 100644 --- a/lib/pages/detail.dart +++ b/lib/pages/detail.dart @@ -1,4 +1,6 @@ import 'package:flutter/material.dart'; +import 'package:gymlink_module_web/components/app_bar.dart'; +import 'package:gymlink_module_web/components/heading.dart'; //TODO: Сделать получение инфы через объект class DetailPage extends StatelessWidget { @@ -18,77 +20,81 @@ class DetailPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar( - leading: IconButton( - icon: const Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context), - ), - title: Text('$name - $id'), - ), - body: Padding( - padding: const EdgeInsets.all(20), - child: SizedBox( - width: MediaQuery.sizeOf(context).width, - height: MediaQuery.sizeOf(context).height, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - image, - Padding( - padding: const EdgeInsetsDirectional.fromSTEB(0, 60, 60, 60), - child: SizedBox( - width: 340, - height: MediaQuery.sizeOf(context).height, - child: Card( - elevation: 4, - color: const Color(0xFFF2F3F9), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), - ), - child: Padding( + appBar: const GymLinkAppBar(), + body: Column(mainAxisAlignment: MainAxisAlignment.start, children: [ + GymLinkHeader(title: '$name - $id'), + Expanded( + child: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.all(20), + child: SizedBox( + width: MediaQuery.sizeOf(context).width, + height: MediaQuery.sizeOf(context).height, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + image, + Padding( padding: - const EdgeInsetsDirectional.fromSTEB(20, 15, 10, 15), - child: Text( - description, - style: Theme.of(context).textTheme.bodyMedium, + const EdgeInsetsDirectional.fromSTEB(0, 30, 60, 60), + child: SizedBox( + width: 340, + height: MediaQuery.sizeOf(context).height, + child: Card( + elevation: 4, + color: const Color(0xFFF2F3F9), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + child: Padding( + padding: const EdgeInsetsDirectional.fromSTEB( + 20, 15, 10, 15), + child: Text( + description, + style: Theme.of(context).textTheme.bodyMedium, + ), + ), + ), ), ), - ), - ), - ), - Align( - alignment: const AlignmentDirectional(0, -1), - child: Padding( - padding: const EdgeInsetsDirectional.fromSTEB(0, 60, 0, 0), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Text( - 'Стоимость $price', - style: Theme.of(context).textTheme.bodyLarge, - ), - ElevatedButton( - onPressed: () => {}, - style: ElevatedButton.styleFrom( - backgroundColor: Theme.of(context).primaryColor, - shape: const RoundedRectangleBorder( - borderRadius: BorderRadius.all( - Radius.circular(50), - ), + Align( + alignment: const AlignmentDirectional(0, -1), + child: Padding( + padding: + const EdgeInsetsDirectional.fromSTEB(0, 60, 0, 0), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Text( + 'Стоимость $price', + style: Theme.of(context).textTheme.bodyLarge, ), - foregroundColor: Colors.white, - padding: const EdgeInsetsDirectional.fromSTEB( - 34, 10, 34, 10)), - child: const Text('Добавить в корзину'), - ) - ], - ), + ElevatedButton( + onPressed: () => {}, + style: ElevatedButton.styleFrom( + backgroundColor: + Theme.of(context).primaryColor, + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.all( + Radius.circular(50), + ), + ), + foregroundColor: Colors.white, + padding: const EdgeInsetsDirectional.fromSTEB( + 34, 10, 34, 10)), + child: const Text('Добавить в корзину'), + ) + ], + ), + ), + ), + ], ), ), - ], + ), ), ), - ), + ]), ); } } diff --git a/lib/pages/order_history.dart b/lib/pages/order_history.dart index f32a18d..574897f 100644 --- a/lib/pages/order_history.dart +++ b/lib/pages/order_history.dart @@ -1,4 +1,6 @@ import 'package:flutter/material.dart'; +import 'package:gymlink_module_web/components/app_bar.dart'; +import 'package:gymlink_module_web/components/heading.dart'; class HistoryPage extends StatelessWidget { const HistoryPage({ @@ -6,16 +8,14 @@ class HistoryPage extends StatelessWidget { }); @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - leading: IconButton( - icon: const Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context), - ), - title: const Text('История заказов'), - ), - body: const Center( + return const Scaffold( + appBar: GymLinkAppBar(), + body: Column(mainAxisAlignment: MainAxisAlignment.start, children: [ + GymLinkHeader(title: 'История заказов'), + Center( child: Text('История заказов'), - )); + ) + ]), + ); } }