Flutter - Android bottom navigation bar not changing colors based on custom light/dark theme definitions

Viewed 25

I can't find any easy way to make the Android bottom navigation bar white in light mode and black in dark mode. Right now I have created custom AppBar themes for light and dark and they work just fine except for the bottom navigation bar. Even though I have them set appropriately.

main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
    MaterialApp(
      title: 'MyApplicationName',
      theme: CustomTheme.lightTheme,
      darkTheme: CustomTheme.darkTheme,
      themeMode: ThemeMode.system,
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
      routes: {...routesMap},
    ),
  );
}

custom_theme.dart

class CustomTheme {
  static ThemeData lightTheme = ThemeData(
   appBarTheme: const AppBarTheme(
      elevation: 0,
      centerTitle: true,
      backgroundColor: Colors.white,
      titleTextStyle: TextStyle(color: Colors.black),
      iconTheme: IconThemeData(color: Colors.black),
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Colors.white,
        statusBarIconBrightness: Brightness.dark,
        systemNavigationBarColor: Colors.white, <----
        systemNavigationBarIconBrightness: Brightness.dark, <----
      ),
    ),
  );

  static ThemeData darkTheme = ThemeData(
   appBarTheme: const AppBarTheme(
      elevation: 0,
      centerTitle: true,
      backgroundColor: Colors.black,
      titleTextStyle: TextStyle(color: Colors.white),
      iconTheme: IconThemeData(color: Colors.white),
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Colors.black,
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarColor: Colors.black, <----
        systemNavigationBarIconBrightness: Brightness.light, <----
      ),
    ),
  );

How it looks in light mode:

enter image description here

How it looks in dark mode (Black is default I'm thinking and not because I have it set to that):

enter image description here

Any guidance on this would be really appreciated. Thank you in advance.

0 Answers
Related