Flutter：如何根據當前主題（暗/亮）更改狀態欄和導航欄顏色

Question

我希望我的 flutter 應用程序在應用程序主題更改時更改“狀態欄”和“導航欄”顏色。 我在 android studio 上做了一個演示

在 flutter 中最簡單的方法是什么？

Answer 1

您可以像這樣獲得設備亮度

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

根據isDarkMode的值切換通知欄的樣式

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

Answer 2

好的，我確實喜歡這樣：

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),
        ),
      ),
    );
  }
}