Flutter：使用 Get.changeTheme() 时更改状态栏的颜色答案

【问题标题】：Flutter: Changing color of status bar when using Get.changeTheme()Flutter：使用 Get.changeTheme() 时更改状态栏的颜色
【发布时间】：2021-06-08 14:31:42
【问题描述】：

我正在寻找一种在使用 GetX 的 Get.changeTheme() 实用功能更改主题时更改状态栏外观的方法。

这是我的代码：

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      theme: lightTheme(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: TextButton(
                onPressed: () => {
                      Get.changeTheme(
                          Get.isDarkMode ? lightTheme() : darkTheme())
                    },
                child: Text('Change Theme'))));
  }
}

ThemeData darkTheme() {
  return ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey[900]);
}

ThemeData lightTheme() {
  return ThemeData.light().copyWith(scaffoldBackgroundColor: Colors.white);
}

当按下“更改主题”按钮时，我无法弄清楚如何更改状态栏的颜色（截图）。

我查看了ThemeData 的文档，但似乎没有可以添加到我的darkTheme() 的属性，以便将状态栏中的文本颜色更改为白色。我也知道

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

但我不知道将这段代码放在我代码的 GetX 架构中的什么位置，因为将其包含在 main() 方法中将不允许我之后切换主题。我也不打算使用AppBar()，这会让我更改brightness 属性只是为了达到预期的结果。

我很高兴收到任何提示和建议！

【问题讨论】：

标签： flutter statusbar flutter-getx theme-daynight

【解决方案1】：

您可以使用 GetMaterialApp 小部件中的 routingCallback 函数，以便您可以根据应用的路由更改状态栏。

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      theme: lightTheme(),
      home: MyHomePage(),
      // Add this function to GetMaterialApp Widget
      routingCallback: (value) {
         // Here you can check which screen your app is currently on
         if(value.current == '/home'){
           SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
             statusBarColor: Colors.white
           ));
          }
             
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: TextButton(
                onPressed: () => {
                      Get.changeTheme(
                          Get.isDarkMode ? lightTheme() : darkTheme())
                    },
                child: Text('Change Theme'))));
  }
}

ThemeData darkTheme() {
  return ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey[900]);
}

ThemeData lightTheme() {
  return ThemeData.light().copyWith(scaffoldBackgroundColor: Colors.white);
}

【讨论】：