save - 如何在颤振开始时加载主题
问题描述
我希望用户可以在我的应用程序中更改和保存主题颜色。但是,我不知道如何在应用程序开始运行时加载保存的主题颜色。比如我想在下面的评论处直接加载保存的主题颜色。我试过SharedPreference。但是 SharedPreference 实例需要与await一起运行。这里好像不能用。有什么办法可以直接在这里加载保存的主题而不是使用 setState 或类似的东西?</p>
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: // how to load saved theme here?
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
解决方案
这个答案更进一步。它展示了如何加载和保存主题首选项、如何构建ThemeData
以及如何从应用程序页面更改主题。
shared_preferences
使用插件保存用户首选项(选择哪个主题) 。- 使用在整个 Flutter 框架中使用的“控制器模式”为您的应用程序提供当前选择的主题(及其更改)。
- 使用 an
InheritedWidget
在应用程序的任何部分使用控制器。
这是控制器的外观:
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
/// provides the currently selected theme, saves changed theme preferences to disk
class ThemeController extends ChangeNotifier {
static const themePrefKey = 'theme';
ThemeController(this._prefs) {
// load theme from preferences on initialization
_currentTheme = _prefs.getString(themePrefKey) ?? 'light';
}
final SharedPreferences _prefs;
String _currentTheme;
/// get the current theme
String get currentTheme => _currentTheme;
void setTheme(String theme) {
_currentTheme = theme;
// notify the app that the theme was changed
notifyListeners();
// store updated theme on disk
_prefs.setString(themePrefKey, theme);
}
/// get the controller from any page of your app
static ThemeController of(BuildContext context) {
final provider = context.inheritFromWidgetOfExactType(ThemeControllerProvider) as ThemeControllerProvider;
return provider.controller;
}
}
/// provides the theme controller to any page of your app
class ThemeControllerProvider extends InheritedWidget {
const ThemeControllerProvider({Key key, this.controller, Widget child}) : super(key: key, child: child);
final ThemeController controller;
@override
bool updateShouldNotify(ThemeControllerProvider old) => controller != old.controller;
}
InheritedWidget
以下是您在应用程序中使用控制器的方式:
void main() async {
// load the shared preferences from disk before the app is started
final prefs = await SharedPreferences.getInstance();
// create new theme controller, which will get the currently selected from shared preferences
final themeController = ThemeController(prefs);
runApp(MyApp(themeController: themeController));
}
class MyApp extends StatelessWidget {
final ThemeController themeController;
const MyApp({Key key, this.themeController}) : super(key: key);
@override
Widget build(BuildContext context) {
// use AnimatedBuilder to listen to theme changes (listen to ChangeNotifier)
// the app will be rebuilt when the theme changes
return AnimatedBuilder(
animation: themeController,
builder: (context, _) {
// wrap app in inherited widget to provide the ThemeController to all pages
return ThemeControllerProvider(
controller: themeController,
child: MaterialApp(
title: 'Flutter Demo',
theme: _buildCurrentTheme(),
home: MyHomePage(),
),
);
},
);
}
// build the flutter theme from the saved theme string
ThemeData _buildCurrentTheme() {
switch (themeController.currentTheme) {
case "dark":
return ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.orange,
);
case "light":
default:
return ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.blue,
);
}
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
// thanks to the inherited widget, we can access the theme controller from any page
ThemeController.of(context).setTheme('light');
},
child: Text('Light Theme'),
),
RaisedButton(
onPressed: () {
ThemeController.of(context).setTheme('dark');
},
child: Text('Dark Theme'),
)
],
),
),
);
}
}
推荐阅读
- c# - 使用类 Map 的字典在 C# 中使用多态性
- react-native - 有什么办法可以将 TabBar 放在我的标题上
- mongodb - 如何避免集合中的重复条目?
- bash - 用 MAKEFLAGS 覆盖包含空格的 make 变量
- sql - 需要帮助从 sql 内部联接获取 SUM 数据
- python - 比较熊猫组中的不同行
- gradle - 在 gradle 中解压 rpm
- apache-spark - 从数据块中的 mlflow-registry 加载模型时出现 InvalidMountException
- python - 如何使用 Kivy/Buildozer 在 Android 上请求 ACCESS_SURFACE_FLINGER 权限?
- c# - c# 中 CefSharp DevTool 类中的事件处理程序