Created screens

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

lib/main.dart

@@ -8,7 +8,7 @@ void main() {
   runApp(const MyApp());
 }
 
-enum DemoScreen { counter, textField }
+enum GymLinkScreen { mainPage, basketPage, historyPage }
 
 class MyApp extends StatefulWidget {
   const MyApp({super.key});
@@ -20,9 +20,8 @@ class MyApp extends StatefulWidget {
 
 @js.JSExport()
 class _MyAppState extends State<MyApp> {
-  final _streanController = StreamController<void>.broadcast();
+  final _streamController = StreamController<void>.broadcast();
-  DemoScreen _currentDemoScreen = DemoScreen.counter;
+  GymLinkScreen _currentGymLinkScreen = GymLinkScreen.mainPage;
-  int _counterScreenCount = 0;
   bool _isLoading = true;
 
   @override
@@ -35,39 +34,19 @@ class _MyAppState extends State<MyApp> {
 
   @override
   void dispose() {
-    _streanController.close();
+    _streamController.close();
     super.dispose();
   }
 
-  @js.JSExport()
-  void increment() {
-    if (_currentDemoScreen == DemoScreen.counter) {
-      setState(() {
-        _counterScreenCount++;
-        _streanController.add(null);
-      });
-    }
-  }
-
-  @js.JSExport()
-  void addHandler(void Function() handler) {
-    _streanController.stream.listen((event) {
-      handler();
-    });
-  }
-
-  @js.JSExport()
-  int get count => _counterScreenCount;
-
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: 'Aboba app',
+      title: 'GymLink Module',
       theme: ThemeData(
         colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
       ),
       debugShowCheckedModeBanner: false,
-      home: demoScreenRouter(_currentDemoScreen),
+      home: gymLinkScreenRouter(_currentGymLinkScreen),
     );
   }
 
@@ -80,52 +59,54 @@ class _MyAppState extends State<MyApp> {
     }
   }
 
-  Widget demoScreenRouter(DemoScreen which) {
+  Widget gymLinkScreenRouter(GymLinkScreen which) {
     switch (which) {
-      case DemoScreen.counter:
+      case GymLinkScreen.mainPage:
-        return CounterDemo(
+        return MainPage(
             title: 'Counter',
-            numToDisplay: _counterScreenCount,
+            isLoading: _isLoading,
-            incrementHandler: increment,
+            changeGymLinkScreenTo: changeGymLinkScreenTo);
-            isLoading: _isLoading);
+      case GymLinkScreen.basketPage:
-      case DemoScreen.textField:
+        return BasketPage(changeGymLinkScreenTo: changeGymLinkScreenTo);
-        return const TextFieldDemo(title: 'Nasdfs');
+      case GymLinkScreen.historyPage:
+        return HistoryPage(changeGymLinkScreenTo: changeGymLinkScreenTo);
     }
   }
 
   @js.JSExport()
-  void changeDemoScreenTo(String screenString) {
+  void changeGymLinkScreenTo(String screenString) {
     setState(() {
       switch (screenString) {
-        case 'counter':
+        case 'main':
-          _currentDemoScreen = DemoScreen.counter;
+          _currentGymLinkScreen = GymLinkScreen.mainPage;
           break;
-        case 'textField':
+        case 'basket':
-          _currentDemoScreen = DemoScreen.textField;
+          _currentGymLinkScreen = GymLinkScreen.basketPage;
+          break;
+        case 'history':
+          _currentGymLinkScreen = GymLinkScreen.historyPage;
           break;
       }
     });
   }
 }
 
-class CounterDemo extends StatefulWidget {
+class MainPage extends StatefulWidget {
   final String title;
-  final int numToDisplay;
-  final VoidCallback incrementHandler;
   final bool isLoading;
+  final void Function(String) changeGymLinkScreenTo;
 
-  const CounterDemo(
+  const MainPage(
       {super.key,
       required this.title,
-      required this.numToDisplay,
+      required this.isLoading,
-      required this.incrementHandler,
+      required this.changeGymLinkScreenTo});
-      required this.isLoading});
 
   @override
-  State<CounterDemo> createState() => _CounterDemoState();
+  State<MainPage> createState() => _MainPageState();
 }
 
-class _CounterDemoState extends State<CounterDemo> {
+class _MainPageState extends State<MainPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -133,6 +114,24 @@ class _CounterDemoState extends State<CounterDemo> {
             ? null
             : AppBar(
                 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),
+                    ),
+                  ])),
+        body: widget.isLoading
+            ? const Center(child: CircularProgressIndicator())
+            : Column(
+                mainAxisAlignment: MainAxisAlignment.start,
+                children: <Widget>[
+                    Row(
                       children: [
                         Expanded(
                           child: TextField(
@@ -141,18 +140,28 @@ class _CounterDemoState extends State<CounterDemo> {
                               border: OutlineInputBorder(
                                 borderRadius: BorderRadius.circular(10),
                               ),
-                        suffixIcon: const Icon(
+                              suffixIcon: InkWell(
+                                onTap: () {
+                                  debugPrint('tap on search icon');
+                                },
+                                child: const Icon(
                                   Icons.search,
                                   color: Colors.blue,
                                 ),
                               ),
                             ),
                           ),
+                        ),
                         const SizedBox(width: 8),
                         ElevatedButton(
-                    onPressed: () {},
+                          onPressed: () {
+                            setState(() {
+                              widget.changeGymLinkScreenTo('basket');
+                            });
+                          },
                           style: ElevatedButton.styleFrom(
                             padding: const EdgeInsets.all(0),
+                            backgroundColor: Colors.blue,
                             shape: const CircleBorder(
                               side: BorderSide(
                                 color: Colors.blue,
@@ -163,14 +172,19 @@ class _CounterDemoState extends State<CounterDemo> {
                           child: const Icon(
                             Icons.shopping_basket,
                             color: Colors.white,
-                      size: 36,
+                            size: 24,
                           ),
                         ),
                         const SizedBox(width: 8),
                         ElevatedButton(
-                    onPressed: () {},
+                          onPressed: () {
+                            setState(() {
+                              widget.changeGymLinkScreenTo('history');
+                            });
+                          },
                           style: ElevatedButton.styleFrom(
                             padding: const EdgeInsets.all(0),
+                            backgroundColor: Colors.blue,
                             shape: const CircleBorder(
                               side: BorderSide(
                                 color: Colors.blue,
@@ -181,46 +195,60 @@ class _CounterDemoState extends State<CounterDemo> {
                           child: const Icon(
                             Icons.history,
                             color: Colors.white,
-                      size: 36,
+                            size: 24,
                           ),
                         ),
                       ],
                     ),
-            ),
+                  ])
-      body: widget.isLoading
+        // : const Center(
-          ? const Center(child: CircularProgressIndicator())
+        //     child: Column(
-          : const Center(
+        //       mainAxisAlignment: MainAxisAlignment.center,
-              child: Column(
+        //       children: <Widget>[
-                mainAxisAlignment: MainAxisAlignment.center,
+        //         Text(
-                children: <Widget>[
+        //           'Здесь будут товары',
-                  Text(
+        //         ),
-                    'Здесь будут товары',
+        //       ],
-                  ),
+        //     ),
-                ],
+        //   ),
-              ),
-            ),
         );
   }
 }
 
-class TextFieldDemo extends StatelessWidget {
+class BasketPage extends StatelessWidget {
-  const TextFieldDemo({super.key, required this.title});
+  final void Function(String) changeGymLinkScreenTo;
-  final String title;
+  const BasketPage({super.key, required this.changeGymLinkScreenTo});
   @override
   Widget build(BuildContext context) {
     return Scaffold(
         appBar: AppBar(
-        title: Text(title),
+          leading: IconButton(
+            icon: const Icon(Icons.arrow_back),
+            onPressed: () => changeGymLinkScreenTo('main'),
+          ),
+          title: const Text('Корзина'),
         ),
         body: const Center(
-        child: Padding(
+          child: Text('Корзина'),
-          padding: EdgeInsets.all(14.0),
+        ));
-          child: TextField(
+  }
-            maxLines: null,
+}
-            decoration: InputDecoration(border: OutlineInputBorder()),
+
-          ),
+class HistoryPage extends StatelessWidget {
-        ),
+  final void Function(String) changeGymLinkScreenTo;
-      ),
+  const HistoryPage({super.key, required this.changeGymLinkScreenTo});
-    );
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        appBar: AppBar(
+          leading: IconButton(
+            icon: const Icon(Icons.arrow_back),
+            onPressed: () => changeGymLinkScreenTo('main'),
+          ),
+          title: const Text('История заказов'),
+        ),
+        body: const Center(
+          child: Text('История заказов'),
+        ));
   }
 }

pubspec.yaml

@@ -57,6 +57,8 @@ flutter:
   # included with your application, so that you can use the icons in
   # the material Icons class.
   uses-material-design: true
+  assets:
+    - assets/logo.png
 
   # To add assets to your application, add an assets section, like this:
   # assets:

web/css/styles.css

@@ -1,7 +1,7 @@
 #flutter_target {
     border: 1px solid #aaa;
-    width: 320px;
+    width: 480px;
-    height: 480px;
+    height: 600px;
     border-radius: 0px;
     transition: all 150ms ease-in;
     align-self: center;