refactor(theme&ui): improve theme switching and navigation styling

lib/feature/main/main_bloc.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:sfm_app/product/base/bloc/base_bloc.dart';
+import 'package:sfm_app/product/constant/enums/app_theme_enums.dart';
 
 import '../bell/bell_model.dart';
 
@@ -15,6 +16,10 @@ class MainBloc extends BlocBase {
   StreamSink<Locale?> get sinkLanguage => language.sink;
   Stream<Locale?> get streamLanguage => language.stream;
   
+  final theme = StreamController<ThemeData?>.broadcast();
+  StreamSink<ThemeData?> get sinkTheme => theme.sink;
+  Stream<ThemeData?> get streamTheme => theme.stream;
+
   final themeMode = StreamController<bool>.broadcast();
   StreamSink<bool> get sinkThemeMode => themeMode.sink;
   Stream<bool> get streamThemeMode => themeMode.stream;

lib/feature/main/main_screen.dart

@@ -6,15 +6,12 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:persistent_bottom_nav_bar_v2/persistent-tab-view.dart';
-import 'package:provider/provider.dart';
 import 'package:badges/badges.dart' as badges;
-import 'package:sfm_app/feature/home/home_bloc.dart';
+import '../home/home_bloc.dart';
-import 'package:sfm_app/product/constant/app/app_constants.dart';
+import '../../product/constant/app/app_constants.dart';
-import 'package:sfm_app/product/constant/enums/app_route_enums.dart';
+import '../../product/constant/enums/app_route_enums.dart';
-import 'package:sfm_app/product/constant/enums/role_enums.dart';
+import '../../product/permission/location_permission.dart';
-import 'package:sfm_app/product/permission/location_permission.dart';
+import '../../product/services/theme_services.dart';
-import 'package:sfm_app/product/shared/shared_language_switch.dart';
-import '../../product/shared/shared_light_dark_switch.dart';
 import '../devices/devices_manager_bloc.dart';
 import '../devices/devices_manager_screen.dart';
 import '../home/home_screen.dart';
@@ -27,13 +24,11 @@ import '../map/map_bloc.dart';
 import '../map/map_screen.dart';
 import '../../product/base/bloc/base_bloc.dart';
 import '../../product/constant/enums/app_theme_enums.dart';
-import '../../product/extention/context_extention.dart';
 import '../../product/services/api_services.dart';
 import '../../main.dart';
 import '../../product/constant/icon/icon_constants.dart';
 import '../../product/constant/lang/language_constants.dart';
 import '../../product/services/language_services.dart';
-import '../../product/theme/theme_notifier.dart';
 import '../bell/bell_model.dart';
 
 class MainScreen extends StatefulWidget {
@@ -69,16 +64,12 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
     }
     mainBloc.sinkIsVNIcon.add(isVN);
     mainBloc.sinkThemeMode.add(isLight);
-    log("role: $role");
     LocationPermissionRequest.instance.checkLocationPermission(context);
   }
 
-// For test
-  late bool dayNightToggle2;
   @override
   void initState() {
     super.initState();
-    dayNightToggle2 = false;
     mainBloc = BlocProvider.of(context);
     WidgetsBinding.instance.addObserver(this);
     initialCheck();
@@ -178,7 +169,10 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
 
   @override
   Widget build(BuildContext context) {
-    ThemeNotifier themeNotifier = context.watch<ThemeNotifier>();
+    return StreamBuilder<bool>(
+      stream: mainBloc.streamThemeMode,
+      initialData: isLight,
+      builder: (context, themeModeSnapshot) {
         return Scaffold(
           appBar: AppBar(
             backgroundColor: Colors.transparent,
@@ -211,23 +205,19 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
               // SizedBox(
               //   width: context.lowValue,
               // ),
-          StreamBuilder<bool>(
+              IconButton(
-            stream: mainBloc.streamThemeMode,
+                onPressed: () async {
-            initialData: isLight,
+                  ThemeData newTheme = await ThemeServices().changeTheme(
-            builder: (context, themeModeSnapshot) {
+                      isLight ? AppThemes.DARK.name : AppThemes.LIGHT.name);
-              return IconButton(
+                  MyApp.setTheme(context, newTheme);
-                onPressed: () {
-                  themeNotifier.changeTheme();
                   isLight = !isLight;
                   mainBloc.sinkThemeMode.add(isLight);
                 },
                 icon: Icon(
                   themeModeSnapshot.data ?? isLight
-                      ? Icons.light_mode_outlined
+                      ? Icons.dark_mode_outlined
-                      : Icons.dark_mode_outlined,
+                      : Icons.light_mode_outlined,
                 ),
-              );
-            },
               ),
               StreamBuilder<bool>(
                 stream: mainBloc.streamIsVNIcon,
@@ -277,7 +267,8 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
                             ),
                             badgeAnimation: const badges.BadgeAnimation.slide(
                               animationDuration: Duration(milliseconds: 200),
-                          colorChangeAnimationDuration: Duration(seconds: 1),
+                              colorChangeAnimationDuration:
+                                  Duration(seconds: 1),
                               loopAnimation: false,
                               curve: Curves.decelerate,
                               colorChangeAnimationCurve: Curves.easeInCirc,
@@ -340,28 +331,6 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
               )
             ],
           ),
-      // bottomNavigationBar: Container(
-      //   decoration:
-      //       BoxDecoration(borderRadius: BorderRadius.circular(50)),
-      //   padding: context.paddingLow,
-      //   child: NavigationBar(
-      //     onDestinationSelected: (index) {
-      //       currentPageIndex = index;
-      //       mainBloc.sinkCurrentPageIndex.add(currentPageIndex);
-      //       checkSelectedIndex(currentPageIndex);
-      //     },
-      //     selectedIndex: indexSnapshot.data ?? currentPageIndex,
-      //     destinations: roleSnapshot.data == RoleEnums.USER.name
-      //         ? userDestinations
-      //         : modDestinations,
-      //   ),
-      // ),
-      // body: IndexedStack(
-      //   index: indexSnapshot.data ?? currentPageIndex,
-      //   children: roleSnapshot.data == RoleEnums.USER.name
-      //       ? userBody
-      //       : modBody,
-      // ),
           body: PersistentTabView(
             context,
             controller: controller,
@@ -372,9 +341,12 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
             resizeToAvoidBottomInset: true,
             stateManagement: true,
             hideNavigationBarWhenKeyboardShows: true,
-        // backgroundColor: Colors.transparent,
+            backgroundColor:
+                themeModeSnapshot.data! ? Colors.white : Colors.black,
             decoration: NavBarDecoration(
               borderRadius: BorderRadius.circular(30.0),
+              colorBehindNavBar:
+                  themeModeSnapshot.data! ? Colors.white : Colors.black,
             ),
             popAllScreensOnTapOfSelectedTab: true,
             itemAnimationProperties: const ItemAnimationProperties(
@@ -389,6 +361,8 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
             navBarStyle: NavBarStyle.style4,
           ),
         );
+      },
+    );
   }
 
   Future<void> getBellNotification() async {

lib/main.dart

@@ -1,25 +1,20 @@
 import 'package:firebase_core/firebase_core.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
+import 'package:sfm_app/product/services/theme_services.dart';
 import 'product/services/language_services.dart';
 import 'feature/main/main_bloc.dart';
 import 'product/base/bloc/base_bloc.dart';
 import 'product/constant/navigation/navigation_router.dart';
-import 'product/theme/provider/app_provider.dart';
-import 'product/theme/theme_notifier.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
   await Firebase.initializeApp();
   runApp(
-    MultiProvider(
+    BlocProvider(
-      providers: [...ApplicationProvider.instance.dependItems],
-      child: BlocProvider(
       child: const MyApp(),
       blocBuilder: () => MainBloc(),
     ),
-    ),
   );
 }
 
@@ -32,17 +27,30 @@ class MyApp extends StatefulWidget {
     _MyAppState? state = context.findAncestorStateOfType<_MyAppState>();
     state?.setLocale(newLocale);
   }
+
+  static void setTheme(BuildContext context, ThemeData newTheme) {
+    _MyAppState? state = context.findAncestorStateOfType<_MyAppState>();
+    state?.setTheme(newTheme);
+  }
 }
 
 class _MyAppState extends State<MyApp> {
   Locale? _locale;
+  ThemeData? _themeData;
   late MainBloc mainBloc;
   LanguageServices languageServices = LanguageServices();
+  ThemeServices themeServices = ThemeServices();
+
   setLocale(Locale locale) {
     _locale = locale;
     mainBloc.sinkLanguage.add(_locale);
   }
 
+  setTheme(ThemeData theme) {
+    _themeData = theme;
+    mainBloc.sinkTheme.add(_themeData);
+  }
+
   @override
   void initState() {
     super.initState();
@@ -52,6 +60,7 @@ class _MyAppState extends State<MyApp> {
   @override
   void didChangeDependencies() {
     languageServices.getLocale().then((locale) => {setLocale(locale)});
+    themeServices.getTheme().then((theme) => {setTheme(theme)});
     super.didChangeDependencies();
   }
 
@@ -62,13 +71,19 @@ class _MyAppState extends State<MyApp> {
       stream: mainBloc.streamLanguage,
       initialData: _locale,
       builder: (context, languageSnapshot) {
+        return StreamBuilder<ThemeData?>(
+          stream: mainBloc.streamTheme,
+          initialData: _themeData,
+          builder: (context, themeSnapshot) {
             return MaterialApp.router(
-          theme: context.watch<ThemeNotifier>().currentTheme,
+              theme: themeSnapshot.data,
               routerConfig: router,
               localizationsDelegates: AppLocalizations.localizationsDelegates,
               supportedLocales: AppLocalizations.supportedLocales,
               locale: languageSnapshot.data,
             );
+          }
+        );
       },
     );
   }

lib/product/services/theme_services.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+import '../cache/local_manager.dart';
+import '../constant/enums/app_theme_enums.dart';
+import '../constant/enums/local_keys_enums.dart';
+import '../theme/app_theme_dark.dart';
+import '../theme/app_theme_light.dart';
+
+class ThemeServices{
+
+  ThemeData _currentTheme(String theme) {
+    if (theme == AppThemes.LIGHT.name) {
+      return AppThemeLight.instance.theme;
+    } else if (theme == AppThemes.DARK.name) {
+      return AppThemeDark.instance.theme;
+    } else {
+      return AppThemeLight.instance.theme;
+    }
+  }
+
+  Future<ThemeData> getTheme() async {
+    await LocaleManager.prefrencesInit();
+    String theme = LocaleManager.instance.getStringValue(PreferencesKeys.THEME);
+    return _currentTheme(theme);
+  }
+
+  Future<ThemeData> changeTheme(String theme) async {
+    await LocaleManager.prefrencesInit();
+    LocaleManager.instance
+        .setStringValue(PreferencesKeys.THEME, theme);
+    return _currentTheme(theme);
+  }
+}

lib/product/theme/provider/app_provider.dart

@@ -1,23 +0,0 @@
-import 'package:provider/provider.dart';
-import 'package:provider/single_child_widget.dart';
-
-import '../theme_notifier.dart';
-
-class ApplicationProvider {
-  static ApplicationProvider? _instance;
-  static ApplicationProvider get instance {
-    _instance ??= ApplicationProvider._init();
-    return _instance!;
-  }
-
-  ApplicationProvider._init();
-
-  List<SingleChildWidget> singleItems = [];
-  List<SingleChildWidget> dependItems = [
-    ChangeNotifierProvider(
-      create: (context) => ThemeNotifier(),
-    ),
-    // Provider.value(value: NavigationService.instance)
-  ];
-  List<SingleChildWidget> uiChangesItems = [];
-}

lib/product/theme/theme_notifier.dart

@@ -1,115 +0,0 @@
-import 'package:flutter/material.dart';
-import 'app_theme_dark.dart';
-import 'app_theme_light.dart';
-
-import '../constant/enums/app_theme_enums.dart';
-
-class ThemeNotifier extends ChangeNotifier {
-  // ThemeData _currentTheme = AppThemeLight.instance.theme;
-  // // ThemeData get currentTheme => LocaleManager.instance.getStringValue(PreferencesKeys.THEME) ==
-  // //             AppThemes.LIGHT.name
-  // //         ? AppThemeLight.instance.theme
-  // //         : AppThemeDark.instance.theme;
-  // ThemeData get currentTheme {
-  //   log("ThemeKey: ${LocaleManager.instance.getStringValue(PreferencesKeys.THEME)}");
-  //   if (LocaleManager.instance.getStringValue(PreferencesKeys.THEME) ==
-  //       AppThemes.LIGHT.name) {
-  //     log("light");
-  //   } else {
-  //     log("dark");
-  //   }
-  //   return LocaleManager.instance.getStringValue(PreferencesKeys.THEME) ==
-  //           AppThemes.LIGHT.name
-  //       ? AppThemeLight.instance.theme
-  //       : AppThemeDark.instance.theme;
-  // }
-
-  // ThemeData _currentTheme = AppThemeLight.instance.theme; // Mặc định là light
-
-  // ThemeNotifier() {
-  //   loadThemeFromPreferences();
-  // }
-
-  // Future<void> loadThemeFromPreferences() async {
-  //   String themeKey =
-  //       LocaleManager.instance.getStringValue(PreferencesKeys.THEME);
-  //   log("ThemeNotifierKey:$themeKey ");
-  //   if (themeKey == AppThemes.LIGHT.name) {
-  //     _currentTheme = AppThemeLight.instance.theme;
-  //   } else {
-  //     _currentTheme = AppThemeDark.instance.theme;
-  //   }
-  //   notifyListeners(); // Thông báo cho các widget lắng nghe
-  // }
-
-  // ThemeData get currentTheme => _currentTheme;
-
-  // AppThemes _currenThemeEnum = AppThemes.LIGHT;
-  // AppThemes get currenThemeEnum =>
-  //     LocaleManager.instance.getStringValue(PreferencesKeys.THEME) ==
-  //             AppThemes.LIGHT.name
-  //         ? AppThemes.LIGHT
-  //         : AppThemes.DARK;
-  // // AppThemes get currenThemeEnum => _currenThemeEnum;
-
-  // void changeValue(AppThemes theme) {
-  //   if (theme == AppThemes.LIGHT) {
-  //     _currentTheme = ThemeData.dark();
-  //   } else {
-  //     _currentTheme = ThemeData.light();
-  //   }
-  //   notifyListeners();
-  // }
-
-  // void changeTheme() {
-  //   if (_currenThemeEnum == AppThemes.LIGHT) {
-  //     _currentTheme = AppThemeDark.instance.theme;
-  //     _currenThemeEnum = AppThemes.DARK;
-  //     LocaleManager.instance
-  //         .setString(PreferencesKeys.THEME, AppThemes.DARK.name);
-  //   } else {
-  //     _currentTheme = AppThemeLight.instance.theme;
-  //     _currenThemeEnum = AppThemes.LIGHT;
-  //     LocaleManager.instance
-  //         .setString(PreferencesKeys.THEME, AppThemes.LIGHT.name);
-  //   }
-  //   notifyListeners();
-  // }
-
-  ThemeData _currentTheme = AppThemeLight.instance.theme;
-  ThemeData get currentTheme => _currentTheme;
-
-  AppThemes _currenThemeEnum = AppThemes.LIGHT;
-  AppThemes get currenThemeEnum => _currenThemeEnum;
-
-  Future<void> loadThemeFromPreferences() async {
-    // String themeKey =
-    //     LocaleManager.instance.getStringValue(PreferencesKeys.THEME);
-    // if (themeKey == AppThemes.LIGHT.name) {
-    //   _currentTheme = AppThemeLight.instance.theme;
-    // } else {
-    //   _currentTheme = AppThemeDark.instance.theme;
-    // }
-    // notifyListeners();
-  }
-
-  void changeValue(AppThemes theme) {
-    if (theme == AppThemes.LIGHT) {
-      _currentTheme = AppThemeLight.instance.theme;
-    } else {
-      _currentTheme = AppThemeDark.instance.theme;
-    }
-    notifyListeners();
-  }
-
-  void changeTheme() {
-    if (_currenThemeEnum == AppThemes.LIGHT) {
-      _currentTheme = AppThemeDark.instance.theme;
-      _currenThemeEnum = AppThemes.DARK;
-    } else {
-      _currentTheme = AppThemeLight.instance.theme;
-      _currenThemeEnum = AppThemes.LIGHT;
-    }
-    notifyListeners();
-  }
-}