flutter - 基于系统明暗模式的动态主题变化
问题描述
我一直在研究 Flutter 中的动态明暗模式功能。
当我从系统设置更改移动系统的暗/亮模式时,我想将应用程序的主题更改为暗主题或亮主题。
但是,我无法根据 Mobile System 的亮模式或暗模式更改应用程序的暗模式或亮模式。
我正在使用以下代码。
main.dart
import 'package:flutter/material.dart';
import 'package:flutterrookieapp/provider/ThemeProvider.dart';
import 'package:flutterrookieapp/utils/AppTheme.dart';
import 'package:provider/provider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) => ThemeProvider(
MediaQuery.of(context).platformBrightness == Brightness.dark
? darkTheme
: lightTheme),
)
],
child: Consumer<ThemeProvider>(
builder: (temp, theme, _) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Sample',
theme: MediaQuery.platformBrightnessOf(context) == Brightness.dark
? darkTheme
: lightTheme,
home: HomePage(),
);
},
),
);
}
}
}
ThemeProvider.dart
import 'package:flutter/material.dart';
class ThemeProvider with ChangeNotifier {
ThemeData _themeData;
ThemeProvider(this._themeData);
ThemeData getTheme() => _themeData;
setTheme(ThemeData themeData) async {
this._themeData = themeData;
notifyListeners();
}
}
解决方案
您可以在其中使用,MaterialApp
或者darkTheme
它theme
始终来自移动系统设置
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Sample',
darkTheme: darkTheme,
theme: lightTheme,
home: HomePage(),
),
推荐阅读
- javascript - 如何处理 NodeJS Express 请求竞争条件
- python-3.x - 如何在 python 中解析 (La)Tex (MathML) 对象
- java - 用户输入二维数组,Java
- reactjs - 身份服务器 4 + oidc-client-js 注销重定向
- action - 拦截发送到 NgRx 存储的所有操作
- python - 如何解决 AttributeError:模块 'keras.optimizers' 没有属性 'Adam'
- arrays - 以某个索引打字稿/角度9将对象推入或拼接到对象数组上?
- linux - wifi 断开连接后 SSH 连接重新连接到 Azure VM 时出现问题
- html - Outlook 电子邮件未显示所需的 html 表格格式(边框折叠不起作用)
- python - Python如何列出一个数组并使它们成为枚举