Fix system navigation bar color (#1614)

* Fix system navbar color * Use FlexColorScheme to set the transparent nav bar
thunder-app · Nov 27, 2024 · d8bb721 · d8bb721
1 parent 0bcd924
commit d8bb721
Showing 1 changed file with 23 additions and 26 deletions.
diff --git a/lib/main.dart b/lib/main.dart
@@ -234,35 +234,32 @@ class _ThunderAppState extends State<ThunderApp> {
               theme = theme.copyWith(pageTransitionsTheme: pageTransitionsTheme);
               darkTheme = darkTheme.copyWith(pageTransitionsTheme: pageTransitionsTheme);
 
-              // Set navigation bar color on Android to be transparent
-              SystemChrome.setSystemUIOverlayStyle(
-                SystemUiOverlayStyle(
-                  systemNavigationBarColor: Colors.black.withOpacity(0.0001),
-                ),
-              );
-
               Locale? locale = AppLocalizations.supportedLocales.where((Locale locale) => locale.languageCode == thunderBloc.state.appLanguageCode).firstOrNull;
 
               return OverlaySupport.global(
-                child: MaterialApp.router(
-                  title: 'Thunder',
-                  locale: locale,
-                  localizationsDelegates: const [
-                    ...AppLocalizations.localizationsDelegates,
-                    MaterialLocalizationsEo.delegate,
-                    CupertinoLocalizationsEo.delegate,
-                  ],
-                  supportedLocales: const [
-                    ...AppLocalizations.supportedLocales,
-                    Locale('eo'), // Additional locale which is not officially supported: Esperanto
-                  ],
-                  routerConfig: router,
-                  themeMode: state.themeType == ThemeType.system ? ThemeMode.system : (state.themeType == ThemeType.light ? ThemeMode.light : ThemeMode.dark),
-                  theme: theme,
-                  darkTheme: darkTheme,
-                  debugShowCheckedModeBanner: false,
-                  scaffoldMessengerKey: GlobalContext.scaffoldMessengerKey,
-                  scrollBehavior: (state.reduceAnimations && Platform.isAndroid) ? const ScrollBehavior().copyWith(overscroll: false) : null,
+                child: AnnotatedRegion<SystemUiOverlayStyle>(
+                  // Set navigation bar color on Android to be transparent
+                  value: FlexColorScheme.themedSystemNavigationBar(context, systemNavBarStyle: FlexSystemNavBarStyle.transparent),
+                  child: MaterialApp.router(
+                    title: 'Thunder',
+                    locale: locale,
+                    localizationsDelegates: const [
+                      ...AppLocalizations.localizationsDelegates,
+                      MaterialLocalizationsEo.delegate,
+                      CupertinoLocalizationsEo.delegate,
+                    ],
+                    supportedLocales: const [
+                      ...AppLocalizations.supportedLocales,
+                      Locale('eo'), // Additional locale which is not officially supported: Esperanto
+                    ],
+                    routerConfig: router,
+                    themeMode: state.themeType == ThemeType.system ? ThemeMode.system : (state.themeType == ThemeType.light ? ThemeMode.light : ThemeMode.dark),
+                    theme: theme,
+                    darkTheme: darkTheme,
+                    debugShowCheckedModeBanner: false,
+                    scaffoldMessengerKey: GlobalContext.scaffoldMessengerKey,
+                    scrollBehavior: (state.reduceAnimations && Platform.isAndroid) ? const ScrollBehavior().copyWith(overscroll: false) : null,
+                  ),
                 ),
               );
             },