1

我正在寻找一种在使用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);
}

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

黑暗模式

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

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

但是我不知道在我的代码的GetX架构中将这段代码放在哪里，因为将它包含在main()方法中将不允许我之后切换主题。我也不打算使用AppBar()它来让我改变brightness属性来达到预期的结果。

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

4

1 回答 1

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);
}
于 2021-04-09T15:58:41.127 回答