I want my flutter app to change "status bar" and "navigation bar" color whenever app theme changes. I made a demo of this on android studio

What is the simplest way to do it in flutter?

CodePudding user response：

You can get the device brightness like this

var brightness = MediaQuery.of(context).platformBrightness;
 bool isDarkMode = brightness == Brightness.dark;

Based on the value of isDarkMode switch the style of notification bar

systemOverlayStyle: SystemUiOverlayStyle(
    statusBarBrightness: (isDarkMode)?Brightness.dark:Brightness.light
  ),

CodePudding user response：

Ok, I did like this:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {

        // Getting current theme brightness
        bool isDark =
            MediaQuery.of(context).platformBrightness == Brightness.dark;

        Color overlayColor = isDark ? Colors.black : Colors.white;
        Brightness overlayBrightness =
            isDark ? Brightness.light : Brightness.dark;

        // Changeing "status bar" and "navigation bar" color
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          statusBarColor: overlayColor,
          statusBarIconBrightness: overlayBrightness,
          systemNavigationBarColor: overlayColor,
          systemNavigationBarIconBrightness: overlayBrightness,
        ));
        
        // child is home widget in this case
        return child!;
      },
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        textTheme: const TextTheme(subtitle1: TextStyle(color: Colors.black)),
      ),
      darkTheme: ThemeData(
        scaffoldBackgroundColor: Colors.black,
        textTheme: const TextTheme(subtitle1: TextStyle(color: Colors.white)),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    bool isDark = MediaQuery.of(context).platformBrightness == Brightness.dark;
    return Scaffold(
      body: Center(
        child: Text(
          isDark ? "Dark Theme Mode" : "Light Theme Mode",
          style: Theme.of(context)
              .textTheme
              .subtitle1
              ?.copyWith(fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}