使用Flutter_Redux实现主题切换
2023-02-18 16:39:32 时间
1. 添加依赖
dependencies:
flutter_redux: ^0.6.0
2. 定义State
/// 1.定义状态
class AppStates {
ThemeData themeData;
AppStates({this.themeData});
}
/// 2.提供appReducer方法
AppStates appReducer(AppStates states, dynamic action) {
return AppStates(
/// 使用对应的Reducer将states中的状态和action绑定
themeData: themeModeReducer(states.themeData, action),
);
}
/// 3. 可对数据进行拦截处理
final List<Middleware<AppStates>> middleware = [
AppStatesMiddleware(),
];
3. 定义Reducer
/// 1. 提供action
class BrightnessAction {
Brightness brightness;
BrightnessAction(this.brightness);
}
/// 2. 添加改变状态的方法
ThemeData _change(ThemeData themeData, dynamic action) {
themeData = ThemeData(brightness: action.brightness);
return themeData;
}
/// 3.定义Reducer
final themeModeReducer = combineReducers<ThemeData>([
TypedReducer<ThemeData, BrightnessAction>(_change),
]);
4. 在顶层StatefulWidget中初始化Store
final store = Store<AppStates>(
appReducer,
middleware: middleware,
initialState: AppStates(
themeData: ThemeData.dark(),
),
);
@override
Widget build(BuildContext context) {
return StoreProvider<AppStates>(
store: store,
child: StoreBuilder<AppStates>(builder: (context, store) {
return MaterialApp(
/// 从store中取出当前主题数据
theme: store.state.themeData,
home: MyHomePage(),
);
}),
);
}
5. 修改主题
FlatButton(
onPressed: () {
// 执行dispatch来改变数据的状态
store.dispatch(BrightnessAction(
store.state.themeData.brightness == Brightness.dark
? Brightness.light
: Brightness.dark));
},
child: Text('切换主题'),
),
6.拦截器
class AppStatesMiddleware implements MiddlewareClass<AppStates> {
@override
void call(Store<AppStates> store, action, next) {
// 判断action类型
if(action is BrightnessAction){
// 进行拦截处理
}
// 继续执行
next(action);
}
}
相关文章
- 短链接 url 压缩程序 Polr
- 驱动开发:DKOM 实现进程隐藏
- Nginx typecho Access denied
- 驱动开发:内核读取SSDT表基址
- 驱动开发:驱动与应用的简单通信
- 360 前端静态资源库
- 详解UDS CAN诊断:SecurityAccess Service(SID:0X27)
- WannaCry 勒索病毒
- MyBatis实现增删改查
- @EnableCaching如何一键开启缓存
- 驱动开发:恢复SSDT内核钩子
- 开局一张图,构建神奇的 CSS 效果
- 驱动开发:挂接SSDT内核钩子
- typecho 应对垃圾评论
- Windows 双宽带双网卡
- 驱动开发:WinDBG 配置内核双机调试
- typecho1.2 (18.10.23) 新窗口打开链接
- kafka单条消息过大导致线上OOM,运维连夜跑路了!
- Rime 小狼毫 五笔输入法自定义短语
- Spring Boot整合分布式搜索引擎ElasticSearch 实现相关基本操作