使用Flutter_Redux实现主题切换
flutter 实现 使用 切换 主题 redux
2023-06-13 09:16:10 时间
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);
}
}
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- Flutter使用Canvas实现精美表盘效果
- Flutter使用Canvas实现微信红包领取效果
- Flutter使用Canvas实现小白兔的绘制
- Flutter游戏引擎Flame初探,实现是男人就坚持100秒
- Flutter 桌面探索 | 自定义可拖拽导航栏
- Flutter 状态管理 | 业务逻辑与构建逻辑分离
- Flutter State生命周期
- flutter中如何实现deeplink
- 源码推荐:一款flutter实现的闹钟
- 每日tips:Dart & Flutter Easy Wins 15-21
- 2022-01-24: flutter weekly第4期
- Flutter 实现登录 UI
- Flutter 实战快速实现音视频通话应用
- Flutter Web - 一种取巧的 CDN 方案
- flutter 报错解决
- Flutter异常捕获 | 从bugsnag源码学习如何追溯异常产生路径
- Flutter 知识集锦 | 基于 Flow 实现滑动显隐层
- 【Flutter】Flutter 应用创建运行 ( Android Studio 创建 / 运行 Flutter 应用 | 命令行创建 / 运行 Flutter 应用 )
- 【错误记录】Flutter 报错 ( Could not read script ‘xxxflutter_toolsgradleapp_plugin_loader.gradle‘ )
- 【错误记录】Flutter 报错 ( Could not resolve io.flutter:flutter_embedding_debug:1.0.0. )
- 【Flutter】Flutter 开源项目参考
- 【错误记录】Flutter 组件报错 ( No Directionality widget found. | RichText widgets require a Directionality )
- 【Flutter】ListView 列表 ( List 集合的 map 方法说明 | 垂直列表 | 水平列表 | 代码示例 )
- 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 在 Flutter 端实现 MethodChannel 通信 )
- 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | Android 端实现 BasicMessageChannel 通信 )
- 【Flutter】屏幕像素适配方案 ( flutter_screenutil 插件 )
- 人力成本有效节约35%以上,深度解读网易有道Flutter一码多端实践