如何根据Flutter中的主题更改导航和状态栏颜色？
如何根据Flutter中的主题更改导航和状态栏颜色？
提问于 2019-10-17 08:51:37
在我的MaterialApp中，我使用了属性theme和darkTheme，这样当用户切换他们的全局设备主题时，它就可以利用它了。然而，我遇到了一个问题，当用户切换主题时，状态栏和导航栏不会更改。我使用的是路由系统，所以我的home属性中没有任何内容，我只有一个initialRoute。
我在初始路由页面中有如下代码：
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Builder(builder: (BuildContext context) {
final MediaQueryData mediaQuery = MediaQuery.of(context);
if (mediaQuery.platformBrightness == Brightness.dark) {
Themes.setDarkSystemColors();
} else {
Themes.setLightSystemColors();
}
return Scaffold(
appBar: CustomAppBar(title: "Home"),
drawer: CustomDrawer(),
body: SizedBox(),
);
});
}
}但这只在我重新启动应用程序时有效，当我改变主题时，它不起作用。我知道我可能不得不重建MaterialApp，但我不确定该怎么做。我在想也许是InheritedWidget，但我不知道。如果有人能帮我，那就太好了。
回答 1
Stack Overflow用户
发布于 2020-07-14 05:27:06
这就是我如何将导航栏的颜色与暗/亮/系统主题更改一起更改：
child: Consumer<Preferences>(
builder: (context, preferences, child) {
var app = MaterialApp(
title: 'dikt',
initialRoute: '/',
routes: {
'/': (context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor:
Theme.of(context).canvasColor, // navigation bar color
//statusBarColor: Colors.pink, // status bar color
));
return Lookup();
},
},
themeMode: preferences.themeMode,
theme: lightTheme,
darkTheme: darkTheme,
);https://github.com/maxim-saplin/dikt/blob/master/lib/main.dart
请注意，我使用的是允许用户更改主题的自定义首选项提供程序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58423431
复制相关文章
相似问题
腾讯云开发者
