Flutter：使用 Get.changeTheme()

问题描述

我正在寻找一种在使用 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 属性只是为了达到预期的结果。

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

解决方法

您可以使用 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);
}