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 '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<MainPage> {
@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(

22
lib/pages/basket.dart
View File

@@ -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('Корзина'),
));
],
),
);
}
}

132
lib/pages/detail.dart
View File

@@ -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('Добавить в корзину'),
)
],
),
),
),
],
),
),
],
),
),
),
),
]),
);
}
}

20
lib/pages/order_history.dart
View File

@@ -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('История заказов'),
));
)
]),
);
}
}