3分钟
08 Redux与主题
使用 Redux 来做 Flutter 的全局 State 管理最合适不过,由于Redux内容较多,如果感兴趣的可以看看 篇章二 ,这里主要通过 Redux 来实现实时切换主题的效果。
如下代码,通过 StoreProvider
加载了 store ,再通过 StoreBuilder
将 store 中的 themeData 绑定到 MaterialApp
的 theme 下,之后在其他 Widget 中通过 Theme.of(context)
调你需要的颜色,最终在任意位置调用 store.dispatch
就可实时修改主题,效果如后图所示。
class FlutterReduxApp extends StatelessWidget {
final store = new Store<GSYState>(
appReducer,
initialState: new GSYState(
themeData: new ThemeData(
primarySwatch: GSYColors.primarySwatch,
),
),
);
FlutterReduxApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
/// 通过 StoreProvider 应用 store
return new StoreProvider(
store: store,
///通过 StoreBuilder 获取 themeData
child: new StoreBuilder<GSYState>(builder: (context, store) {
return new MaterialApp(
theme: store.state.themeData,
routes: {
HomePage.sName: (context) {
return HomePage();
},
});
}),
);
}
}
学员评价