使用Flutter_Redux实现主题切换

简介: 使用Flutter_Redux实现主题切换

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);
  }
}



相关文章
|
移动开发 JavaScript 小程序
从入门到实践:Uni-app跨平台开发与应用
从入门到实践:Uni-app跨平台开发与应用
847 1
|
JSON Dart IDE
Flutter实现国际化
开发一个App,如果我们的App需要面向不同的语种(比如中文、英文、繁体等),那么我们需要对齐进行国际化开发
1625 0
Flutter实现国际化
|
7月前
|
开发工具 Android开发 iOS开发
如何在Android Studio中配置Flutter环境?
如何在Android Studio中配置Flutter环境?
1697 61
|
7月前
|
开发工具 Android开发 iOS开发
flutter 环境配置
flutter 环境配置
1314 63
|
存储 开发框架 自然语言处理
【Uniapp 专栏】Uniapp 的多语言支持功能详解
【5月更文挑战第14天】Uniapp是一款跨平台开发框架,提供强大多语言支持,助力开发者轻松构建支持多种语言的应用,提升用户体验和市场拓展。其特点包括灵活的语言管理、跨平台一致性。通过语言文件存储内容,切换机制让用户自由切换。注重翻译准确性和文化适应性,集成到页面和组件中,同时关注性能优化。面对翻译不一致和更新及时性等问题,Uniapp将持续发展和完善,为全球化应用开发提供强有力支持。
741 3
【Uniapp 专栏】Uniapp 的多语言支持功能详解
Flutter 中优雅切换应用主题的组件
【Flutter】使用adaptive_theme组件优雅切换应用主题:封装MaterialApp,支持light/dark/system模式,自定义色彩,保存选择,含调试按钮。安装配置、设置主题、监听切换、自定义颜色、读取配置步骤详细。代码示例与学习路径推荐。[查看完整教程](https://flutter.ducafecat.com/blog/flutter-app-theme-switch)
257 1
Flutter 中优雅切换应用主题的组件
|
缓存 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义绘制与Canvas API
【4月更文挑战第30天】Flutter允许开发者通过`CustomPaint`和`CustomPainter`进行自定义绘制,以实现丰富视觉效果。`CustomPaint` widget将`CustomPainter`应用到画布,而`CustomPainter`需实现`paint`和`shouldRepaint`方法。`paint`用于绘制图形,如示例中创建的`MyCirclePainter`绘制蓝色圆圈。Canvas API提供绘制形状、路径、文本和图片等功能。注意性能优化,避免不必要的重绘和利用缓存提升效率。自定义绘制让Flutter UI更具灵活性和个性化,但也需要图形学知识和性能意识。
255 0
【Flutter前端技术开发专栏】Flutter中的自定义绘制与Canvas API
Flutter 74: 图解基本 DropdownButton 下拉选项框按钮
0 基础学习 Flutter,第七十四步:学习一下下拉选项框的基本用法!
3567 0
Flutter 74: 图解基本 DropdownButton 下拉选项框按钮