Error provider

lib/main.dart

@@ -1,8 +1,10 @@
 import 'package:flutter/material.dart';
+import 'package:gymlink_module_web/providers/main.dart';
 import 'package:gymlink_module_web/states/web.dart';
+import 'package:provider/provider.dart';
 
 void main() {
-  runApp(const MyApp());
+  runApp(const MyAppWithProvider());
 }
 
 class MyApp extends StatefulWidget {
@@ -11,3 +13,13 @@ class MyApp extends StatefulWidget {
   @override
   State<MyApp> createState() => MyAppStateWeb();
 }
+
+class MyAppWithProvider extends StatelessWidget {
+  const MyAppWithProvider({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+        create: (_) => GymLinkProvider(), child: const MyApp());
+  }
+}

lib/pages/basket.dart

@@ -4,6 +4,7 @@ import 'package:gymlink_module_web/components/basket_item_card.dart';
 import 'package:gymlink_module_web/components/heading.dart';
 import 'package:gymlink_module_web/pages/order_confirmation.dart';
 import 'package:gymlink_module_web/providers/cart.dart';
+import 'package:gymlink_module_web/providers/main.dart';
 import 'package:gymlink_module_web/tools/prefs.dart';
 import 'package:gymlink_module_web/tools/routes.dart';
 import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
@@ -77,6 +78,7 @@ class _BasketPageState extends State<BasketPage> {
 
   void _updateCart() {
     Provider.of<CartProvider>(context, listen: false).updateCartLength();
+    Provider.of<GymLinkProvider>(context, listen: false).onTokenReceived('123');
   }
 
   void removeItem(String id) async {

lib/pages/main.dart

@@ -7,6 +7,7 @@ import 'package:gymlink_module_web/pages/basket.dart';
 import 'package:gymlink_module_web/pages/detail.dart';
 import 'package:gymlink_module_web/pages/order_history.dart';
 import 'package:gymlink_module_web/providers/cart.dart';
+import 'package:gymlink_module_web/providers/main.dart';
 import 'package:gymlink_module_web/tools/prefs.dart';
 import 'package:gymlink_module_web/tools/relative.dart';
 import 'package:gymlink_module_web/tools/routes.dart';
@@ -54,11 +55,8 @@ const List<Map<String, String>> testData = [
 ];
 
 class MainPage extends StatefulWidget {
-  final bool isLoading;
-
   const MainPage({
     super.key,
-    required this.isLoading,
   });
 
   @override
@@ -108,11 +106,10 @@ class _MainPageState extends State<MainPage> {
   @override
   Widget build(BuildContext context) {
     final cartL = context.watch<CartProvider>().cartLength;
+    final onError = context.read<GymLinkProvider>().onError;
     return Scaffold(
-      appBar: widget.isLoading ? null : const GymLinkAppBar(),
+      appBar: const GymLinkAppBar(),
-      body: widget.isLoading
+      body: Column(
-          ? const Center(child: CircularProgressIndicator())
-          : Column(
         mainAxisAlignment: MainAxisAlignment.start,
         children: <Widget>[
           Padding(
@@ -141,8 +138,7 @@ class _MainPageState extends State<MainPage> {
                             ),
                             minimumSize:
                                 const Size(50, kMinInteractiveDimension),
-                                  backgroundColor:
+                            backgroundColor: Theme.of(context).primaryColor,
-                                      Theme.of(context).primaryColor,
                             shape: const CircleBorder(),
                           ),
                           child: const Icon(
@@ -161,6 +157,7 @@ class _MainPageState extends State<MainPage> {
                 ),
                 ElevatedButton(
                   onPressed: () {
+                    onError();
                     Navigator.of(context).push(CustomPageRoute(
                       builder: (context) => const HistoryPage(),
                     ));
@@ -194,12 +191,9 @@ class _MainPageState extends State<MainPage> {
               child: Stack(
                 children: [
                   GridView.builder(
-                          gridDelegate:
+                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-                              SliverGridDelegateWithFixedCrossAxisCount(
                       crossAxisCount: min(
-                                (MediaQuery.sizeOf(context).width ~/ 200)
+                          (MediaQuery.sizeOf(context).width ~/ 200).toInt(), 8),
-                                    .toInt(),
-                                8),
                     ),
                     itemCount: filteredData.length,
                     itemBuilder: (context, index) {
@@ -221,8 +215,8 @@ class _MainPageState extends State<MainPage> {
                               price: product['price']!,
                               id: product['id']!,
                               image: Image(
-                                        image: AssetImage(
+                                  image:
-                                            'assets/${product['image']!}'),
+                                      AssetImage('assets/${product['image']!}'),
                                   width: 300),
                             ),
                           ),
@@ -236,16 +230,14 @@ class _MainPageState extends State<MainPage> {
           ),
         ],
       ),
-      floatingActionButton: !widget.isLoading
+      floatingActionButton: SizedBox(
-          ? SizedBox(
         height: 80,
         width: 80,
         child: FittedBox(
           child: Stack(
             children: [
               FloatingActionButton(
-                      onPressed: () =>
+                onPressed: () => Navigator.of(context).push(CustomPageRoute(
-                          Navigator.of(context).push(CustomPageRoute(
                   builder: (context) => const BasketPage(),
                 )),
                 backgroundColor: Colors.transparent,
@@ -277,8 +269,7 @@ class _MainPageState extends State<MainPage> {
             ],
           ),
         ),
-            )
+      ),
-          : null,
       floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
     );
   }

lib/providers/main.dart

@@ -8,10 +8,17 @@ class GymLinkProvider with ChangeNotifier {
   bool get blackTheme => _blackTheme;
   ThemeData _theme = myTheme;
   ThemeData get theme => _theme;
+  void Function() _onError = () => {};
+
+  void Function() get onError => _onError;
+
   void onTokenReceived(String token) {
     if (token == 'token123') {
       _isLoading = false;
       notifyListeners();
+    } else {
+      _isLoading = true;
+      notifyListeners();
     }
   }
 
@@ -25,4 +32,8 @@ class GymLinkProvider with ChangeNotifier {
     _theme = theme;
     notifyListeners();
   }
+
+  void setOnError(void Function() onError) {
+    _onError = onError;
+  }
 }

lib/states/mobile.dart

@@ -14,11 +14,13 @@ class MyAppStateMobile extends State<MyApp> {
         final isLoading = provider.isLoading;
         return ChangeNotifierProvider(
           create: (_) => CartProvider(),
-          builder: (context, __) => MaterialApp(
+          builder: (context, __) => isLoading
+              ? const Center(child: CircularProgressIndicator())
+              : MaterialApp(
                   title: 'GymLink Module',
                   theme: theme,
                   debugShowCheckedModeBanner: false,
-            home: MainPage(isLoading: isLoading),
+                  home: const MainPage(),
                 ),
         );
       },

lib/states/web.dart

@@ -6,13 +6,13 @@ import 'package:flutter/material.dart';
 import 'package:gymlink_module_web/main.dart';
 import 'package:gymlink_module_web/pages/main.dart';
 import 'package:gymlink_module_web/providers/cart.dart';
+import 'package:gymlink_module_web/providers/main.dart';
 import 'package:gymlink_module_web/theme.dart';
 import 'package:provider/provider.dart';
 
 @js.JSExport()
 class MyAppStateWeb extends State<MyApp> {
   final _streamController = StreamController<void>.broadcast();
-  bool _isLoading = true;
   ThemeData theme = myTheme;
   bool black_theme = false;
 
@@ -32,31 +32,33 @@ class MyAppStateWeb extends State<MyApp> {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<GymLinkProvider>().theme;
+    final isLoading = context.watch<GymLinkProvider>().isLoading;
     return ChangeNotifierProvider(
       create: (_) => CartProvider(),
-      child: MaterialApp(
+      child: isLoading
+          ? const Center(child: CircularProgressIndicator())
+          : MaterialApp(
               title: 'GymLink Module',
               theme: theme,
               debugShowCheckedModeBanner: false,
-        home: MainPage(isLoading: _isLoading),
+              home: const MainPage(),
             ),
     );
   }
 
   @js.JSExport()
   void onTokenReceived(String token) {
-    if (token == 'token123') {
+    context.read<GymLinkProvider>().onTokenReceived(token);
-      setState(() {
-        _isLoading = false;
-      });
-    }
   }
 
   @js.JSExport()
   void changeColor(int color) {
-    setState(() {
+    context.read<GymLinkProvider>().changeTheme(color);
-      black_theme = !black_theme; //FIXME: TEMPORARY
+  }
-      theme = getThemeData(Color(color), black_theme);
+
-    });
+  @js.JSExport()
+  void setOnError(void Function() onError) {
+    context.read<GymLinkProvider>().setOnError(onError);
   }
 }

web/js/demo-js-interop.js

@@ -1,31 +1,45 @@
 (function () {
-    "use strict";
+    'use strict';
 
     window._stateSet = function () {
         window._stateSet = function () {
-            console.log("Call _stateSet only once");
+            console.log('Call _stateSet only once');
         };
         let appState = window._appState;
 
         let btn = document.getElementById('token');
         btn.addEventListener('click', function () {
             appState.onTokenReceived('token123');
-        })
+        });
 
         let colorChangeBtnRed = document.getElementById('colorChangeBtnRed');
         colorChangeBtnRed.addEventListener('click', function () {
-            var hexColor = '#FF0000'.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
+            var hexColor = '#FF0000'
-                , (m, r, g, b) => '#ff' + r + r + g + g + b + b).substring(1); 
+                .replace(
+                    /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+                    (m, r, g, b) => '#ff' + r + r + g + g + b + b
+                )
+                .substring(1);
             var numColor = parseInt(hexColor, 16);
-            appState.changeColor(numColor)            
+            appState.changeColor(numColor);
-        })
+        });
 
         let colorChangeBtnBlue = document.getElementById('colorChangeBtnBlue');
         colorChangeBtnBlue.addEventListener('click', function () {
-            var hexColor = '#0000FF'.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
+            var hexColor = '#0000FF'
-                , (m, r, g, b) => '#ff' + r + r + g + g + b + b).substring(1); 
+                .replace(
+                    /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+                    (m, r, g, b) => '#ff' + r + r + g + g + b + b
+                )
+                .substring(1);
             var numColor = parseInt(hexColor, 16);
-            appState.changeColor(numColor)            
+            appState.changeColor(numColor);
-        })
+        });
+
+        function onError() {
+            console.error('aboba');
         }
-}());
+
+        appState.setOnError(onError);
+    };
+})();