sergey/GymLink_Flutter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AppBar and Header components

Browse Source
This commit is contained in:
Sergey Elpashev
2024-05-02 15:04:05 +03:00
parent 0a491ca34b
commit 727c04d368
6 changed files with 155 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
lib/components/app_bar.dart Normal file
View File

@@ -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);
}

26
lib/components/heading.dart Normal file
View File

@@ -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),
],
),
);
}
}

25
lib/main.dart
View File

@@ -3,6 +3,7 @@ import 'dart:js_interop' as js;
import 'dart:js_interop_unsafe' as js_util; import 'dart:js_interop_unsafe' as js_util;
import 'package:flutter/material.dart'; 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/components/card.dart';
import 'package:gymlink_module_web/pages/basket.dart'; import 'package:gymlink_module_web/pages/basket.dart';
import 'package:gymlink_module_web/pages/detail.dart'; import 'package:gymlink_module_web/pages/detail.dart';
@@ -122,29 +123,7 @@ class _MainPageState extends State<MainPage> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: widget.isLoading appBar: widget.isLoading ? null : const GymLinkAppBar(),
? 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,
),
body: widget.isLoading body: widget.isLoading
? const Center(child: CircularProgressIndicator()) ? const Center(child: CircularProgressIndicator())
: Column( : Column(

22
lib/pages/basket.dart
View File

@@ -1,4 +1,6 @@
import 'package:flutter/material.dart'; 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 { class BasketPage extends StatelessWidget {
const BasketPage({ const BasketPage({
@@ -6,16 +8,16 @@ class BasketPage extends StatelessWidget {
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return const Scaffold(
appBar: AppBar( appBar: GymLinkAppBar(),
leading: IconButton( body: Column(
icon: const Icon(Icons.arrow_back), children: [
onPressed: () => Navigator.pop(context), GymLinkHeader(title: 'Корзина'),
Center(
child: Text('Корзина'),
), ),
title: const Text('Корзина'), ],
), ),
body: const Center( );
child: Text('Корзина'),
));
} }
} }

132
lib/pages/detail.dart
View File

@@ -1,4 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:gymlink_module_web/components/app_bar.dart';
import 'package:gymlink_module_web/components/heading.dart';
//TODO: Сделать получение инфы через объект //TODO: Сделать получение инфы через объект
class DetailPage extends StatelessWidget { class DetailPage extends StatelessWidget {
@@ -18,77 +20,81 @@ class DetailPage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: const GymLinkAppBar(),
leading: IconButton( body: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
icon: const Icon(Icons.arrow_back), GymLinkHeader(title: '$name - $id'),
onPressed: () => Navigator.pop(context), Expanded(
), child: SingleChildScrollView(
title: Text('$name - $id'), child: Padding(
), padding: const EdgeInsets.all(20),
body: Padding( child: SizedBox(
padding: const EdgeInsets.all(20), width: MediaQuery.sizeOf(context).width,
child: SizedBox( height: MediaQuery.sizeOf(context).height,
width: MediaQuery.sizeOf(context).width, child: Row(
height: MediaQuery.sizeOf(context).height, mainAxisAlignment: MainAxisAlignment.spaceAround,
child: Row( children: [
mainAxisAlignment: MainAxisAlignment.spaceAround, image,
children: [ Padding(
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(
padding: padding:
const EdgeInsetsDirectional.fromSTEB(20, 15, 10, 15), const EdgeInsetsDirectional.fromSTEB(0, 30, 60, 60),
child: Text( child: SizedBox(
description, width: 340,
style: Theme.of(context).textTheme.bodyMedium, 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(
Align( padding:
alignment: const AlignmentDirectional(0, -1), const EdgeInsetsDirectional.fromSTEB(0, 60, 0, 0),
child: Padding( child: Column(
padding: const EdgeInsetsDirectional.fromSTEB(0, 60, 0, 0), mainAxisSize: MainAxisSize.min,
child: Column( children: [
mainAxisSize: MainAxisSize.min, Text(
children: [ 'Стоимость $price',
Text( style: Theme.of(context).textTheme.bodyLarge,
'Стоимость $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),
),
), ),
foregroundColor: Colors.white, ElevatedButton(
padding: const EdgeInsetsDirectional.fromSTEB( onPressed: () => {},
34, 10, 34, 10)), style: ElevatedButton.styleFrom(
child: const Text('Добавить в корзину'), 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('Добавить в корзину'),
)
],
),
),
),
],
), ),
), ),
], ),
), ),
), ),
), ]),
); );
} }
} }

20
lib/pages/order_history.dart
View File

@@ -1,4 +1,6 @@
import 'package:flutter/material.dart'; 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 { class HistoryPage extends StatelessWidget {
const HistoryPage({ const HistoryPage({
@@ -6,16 +8,14 @@ class HistoryPage extends StatelessWidget {
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return const Scaffold(
appBar: AppBar( appBar: GymLinkAppBar(),
leading: IconButton( body: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
icon: const Icon(Icons.arrow_back), GymLinkHeader(title: 'История заказов'),
onPressed: () => Navigator.pop(context), Center(
),
title: const Text('История заказов'),
),
body: const Center(
child: Text('История заказов'), child: Text('История заказов'),
)); )
]),
);
} }
} }