AppBar and Header components

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

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

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<MainPage> {
   @override
   Widget build(BuildContext context) {
     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
           ? const Center(child: CircularProgressIndicator())
           : Column(

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(
+    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(
-          title: const Text('Корзина'),
-        ),
-        body: const Center(
             child: Text('Корзина'),
-        ));
+          ),
+        ],
+      ),
+    );
   }
 }

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,14 +20,12 @@ class DetailPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     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(
-      ),
-      body: Padding(
               padding: const EdgeInsets.all(20),
               child: SizedBox(
                 width: MediaQuery.sizeOf(context).width,
@@ -35,7 +35,8 @@ class DetailPage extends StatelessWidget {
                   children: [
                     image,
                     Padding(
-                padding: const EdgeInsetsDirectional.fromSTEB(0, 60, 60, 60),
+                      padding:
+                          const EdgeInsetsDirectional.fromSTEB(0, 30, 60, 60),
                       child: SizedBox(
                         width: 340,
                         height: MediaQuery.sizeOf(context).height,
@@ -46,8 +47,8 @@ class DetailPage extends StatelessWidget {
                             borderRadius: BorderRadius.circular(16),
                           ),
                           child: Padding(
-                      padding:
+                            padding: const EdgeInsetsDirectional.fromSTEB(
-                          const EdgeInsetsDirectional.fromSTEB(20, 15, 10, 15),
+                                20, 15, 10, 15),
                             child: Text(
                               description,
                               style: Theme.of(context).textTheme.bodyMedium,
@@ -59,7 +60,8 @@ class DetailPage extends StatelessWidget {
                     Align(
                       alignment: const AlignmentDirectional(0, -1),
                       child: Padding(
-                  padding: const EdgeInsetsDirectional.fromSTEB(0, 60, 0, 0),
+                        padding:
+                            const EdgeInsetsDirectional.fromSTEB(0, 60, 0, 0),
                         child: Column(
                           mainAxisSize: MainAxisSize.min,
                           children: [
@@ -70,7 +72,8 @@ class DetailPage extends StatelessWidget {
                             ElevatedButton(
                               onPressed: () => {},
                               style: ElevatedButton.styleFrom(
-                            backgroundColor: Theme.of(context).primaryColor,
+                                  backgroundColor:
+                                      Theme.of(context).primaryColor,
                                   shape: const RoundedRectangleBorder(
                                     borderRadius: BorderRadius.all(
                                       Radius.circular(50),
@@ -89,6 +92,9 @@ class DetailPage extends StatelessWidget {
                 ),
               ),
             ),
+          ),
+        ),
+      ]),
     );
   }
 }

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