Change color of system navigation and status bar when entering the dark mode in flutter

I want to change the color of the system navigation and status bar when entering the dark mode.

void main() async {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
  statusBarBrightness: Brightness.dark,
  statusBarColor: Colors.white,
  statusBarIconBrightness: Brightness.dark,
  systemNavigationBarColor: Colors.white,
  systemNavigationBarDividerColor: Colors.white,
  systemNavigationBarIconBrightness: Brightness.dark,
),
);
...
}

After trying many things, I found the following solution to my problem. I don't know if it's the cleanest solution, but it works. This solution is interesting for those who don't use an AppBar like in my case.

@override
Widget build(BuildContext context) {
 Theme.of(context).scaffoldBackgroundColor == Colors.white
    ? _lightStatusAndNavigationBar()
    : _darkStatusAndNavigationBar();
return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
...
}

void _darkStatusAndNavigationBar() {
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarBrightness: Brightness.light,
    statusBarColor: Colors.grey.shade900,
    statusBarIconBrightness: Brightness.light,
    systemNavigationBarColor: Colors.grey.shade900,
    systemNavigationBarDividerColor: Colors.grey.shade900,
    systemNavigationBarIconBrightness: Brightness.light,
  ),
);
}

 void _lightStatusAndNavigationBar() {
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarBrightness: Brightness.dark,
    statusBarColor: Colors.white,
    statusBarIconBrightness: Brightness.dark,
    systemNavigationBarColor: Colors.white,
    systemNavigationBarDividerColor: Colors.white,
    systemNavigationBarIconBrightness: Brightness.dark,
  ),
);
}

以上是解决进入暗黑模式的解决办法之一
https://stackoverflow.com/questions/69598436/change-color-of-system-navigation-and-status-bar-when-entering-the-dark-mode-in

重点来了

暗黑模式不改变状态栏颜色该怎么处理？

tips：暗黑模式下状态栏会改变为白色，字体也为白色，导致状态栏处都是一大片白色，页面看不到状态栏信息
搜了一大堆解决办法，例如：

void main() {
    print('run !isRelease App');
    ///设置状态栏为黑色风格
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    runApp(MyApp());
}

或者呢，改变darkTheme 配置

  @override
  Widget build(BuildContext context) {
    return CustomGetMaterialApp(
      enableLog: false,
      ///设置暗黑模式配置
      darkTheme: appThemeData,
      debugShowCheckedModeBanner: false,
      onInit: () {
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
        // 禁用暗黑模式 beta验证
        // if (BuildConfig.isBeta && Platform.isIOS) {
        //   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
        //     statusBarBrightness: Brightness.light,
        //     statusBarIconBrightness: Brightness.dark,
        //     systemNavigationBarColor: Colors.white,
        //     systemNavigationBarIconBrightness: Brightness.dark,
        //   ));
        // }
      },
      title: 'XXXapp',
      navigatorKey: appNavigatorKey,
      theme: appThemeData,
      color: primaryColor,
      builder: bundleBaseAppTransitionBuilder(
          builder: (_, child) => TopBannerWidget(child: AppListenerWidget(child: child!))),
      navigatorObservers: [
        BotToastNavigatorObserver(),
        RouteObserverUtil().routeObserver,
        routeObserver
      ],
      // initialRoute: UserSettings.acceptanceOfAgreement.isEnable.value
      //     ? PageAddress.MainPage
      //     : PageAddress.WelcomePage,
      initialRoute: PageAddress.MainPage,
      onGenerateRoute: super.onGenerateRoute,
      onUnknownRoute: super.onUnknownRoute,
      unknownRoute: unknownRoute,
      localizationsDelegates: super.localizationsDelegates([]),
      supportedLocales: super.supportedLocales([]),
      // locale: const Locale('zh', ''),
      getPages: super.initGetPages,
    );
  }
}

最终解决办法

 @override
  Widget build(BuildContext context) {
    return CustomGetMaterialApp(
      enableLog: false,
      ///设置暗黑模式（该设置无效）
      darkTheme: appThemeData,
      debugShowCheckedModeBanner: false,
      ///（该设置无效）
      onInit: () {
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
        // 禁用暗黑模式 beta验证
        // if (BuildConfig.isBeta && Platform.isIOS) {
        //   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
        //     statusBarBrightness: Brightness.light,
        //     statusBarIconBrightness: Brightness.dark,
        //     systemNavigationBarColor: Colors.white,
        //     systemNavigationBarIconBrightness: Brightness.dark,
        //   ));
        // }
      },
      title: 'XXXapp',
      navigatorKey: appNavigatorKey,
      theme: appThemeData,
      color: primaryColor,
      ///***重点代码：主题模式默认为系统，修改为ThemeMode.light；
      themeMode: ThemeMode.light,
      builder: bundleBaseAppTransitionBuilder(
          builder: (_, child) => TopBannerWidget(child: AppListenerWidget(child: child!))),
      navigatorObservers: [
        BotToastNavigatorObserver(),
        RouteObserverUtil().routeObserver,
        routeObserver
      ],
      // initialRoute: UserSettings.acceptanceOfAgreement.isEnable.value
      //     ? PageAddress.MainPage
      //     : PageAddress.WelcomePage,
      initialRoute: PageAddress.MainPage,
      onGenerateRoute: super.onGenerateRoute,
      onUnknownRoute: super.onUnknownRoute,
      unknownRoute: unknownRoute,
      localizationsDelegates: super.localizationsDelegates([]),
      supportedLocales: super.supportedLocales([]),
      // locale: const Locale('zh', ''),
      getPages: super.initGetPages,
    );
  }
}

一行代码解决暗黑模式状态栏颜色设置，参考以上代码

      ///主题模式默认为系统，修改为ThemeMode.light
      themeMode: ThemeMode.light,

以下是官方的api，默认为ThemeMode.system,所以你再怎么设置，默认主题跟随系统，导致设置主题色的代码无效；以后碰到问题，还是多看看api，万一官方给出了参数设置呢

const CustomGetMaterialApp(
      {Key? key,
      this.navigatorKey,
      this.home,
      Map<String, Widget Function(BuildContext)> this.routes =
          const <String, WidgetBuilder>{},
      this.initialRoute,
      this.onGenerateRoute,
      this.onGenerateInitialRoutes,
      this.onUnknownRoute,
      List<NavigatorObserver> this.navigatorObservers =
          const <NavigatorObserver>[],
      this.builder,
      this.textDirection,
      this.title = '',
      this.onGenerateTitle,
      this.color,
      this.theme,
      this.darkTheme,
      this.themeMode = ThemeMode.system,
      this.locale,
      this.fallbackLocale,
      this.localizationsDelegates,
      this.localeListResolutionCallback,
      this.localeResolutionCallback,
      this.supportedLocales = const <Locale>[Locale('en', 'US')],
      this.debugShowMaterialGrid = false,
      this.showPerformanceOverlay = false,
      this.checkerboardRasterCacheImages = false,
      this.checkerboardOffscreenLayers = false,
      this.showSemanticsDebugger = false,
      this.debugShowCheckedModeBanner = true,
      this.shortcuts,
      this.customTransition,
      this.translationsKeys,
      this.translations,
      this.onInit,
      this.onReady,
      this.onDispose,
      this.routingCallback,
      this.defaultTransition,
      this.getPages,
      this.opaqueRoute,
      this.enableLog,
      this.logWriterCallback,
      this.popGesture,
      this.transitionDuration,
      this.defaultGlobalState,
      this.smartManagement = SmartManagement.full,
      this.initialBinding,
      this.unknownRoute,
      this.highContrastTheme,
      this.highContrastDarkTheme,
      this.actions})
      : routeInformationProvider = null,
        routeInformationParser = null,
        routerDelegate = null,
        backButtonDispatcher = null,
        super(
            key: key,
            navigatorKey: navigatorKey,
            home: home,
            routes: routes,
            initialRoute: initialRoute,
            onGenerateRoute: onGenerateRoute,
            onGenerateInitialRoutes: onGenerateInitialRoutes,
            onUnknownRoute: onUnknownRoute,
            navigatorObservers: navigatorObservers,
            builder: builder,
            title: title,
            onGenerateTitle: onGenerateTitle,
            theme: theme,
            darkTheme: darkTheme,
            themeMode: themeMode,
            customTransition: customTransition,
            color: color,
            translationsKeys: translationsKeys,
            translations: translations,
            textDirection: textDirection,
            locale: locale,
            fallbackLocale: fallbackLocale,
            localizationsDelegates: localizationsDelegates,
            localeListResolutionCallback: localeListResolutionCallback,
            localeResolutionCallback: localeResolutionCallback,
            supportedLocales: supportedLocales,
            showPerformanceOverlay: showPerformanceOverlay,
            checkerboardRasterCacheImages: checkerboardRasterCacheImages,
            checkerboardOffscreenLayers: checkerboardOffscreenLayers,
            showSemanticsDebugger: showSemanticsDebugger,
            debugShowCheckedModeBanner: debugShowCheckedModeBanner,
            shortcuts: shortcuts,
            highContrastTheme: highContrastTheme,
            highContrastDarkTheme: highContrastDarkTheme,
            actions: actions,
            debugShowMaterialGrid: debugShowMaterialGrid,
            routingCallback: routingCallback,
            defaultTransition: defaultTransition,
            opaqueRoute: opaqueRoute,
            onInit: onInit,
            onReady: onReady,
            onDispose: onDispose,
            enableLog: enableLog,
            logWriterCallback: logWriterCallback,
            popGesture: popGesture,
            smartManagement: smartManagement,
            initialBinding: initialBinding,
            transitionDuration: transitionDuration,
            defaultGlobalState: defaultGlobalState,
            getPages: getPages,
            unknownRoute: unknownRoute);
}

总结一条，网上各种千奇百怪的解决方案，多看看官方文档