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



相关文章
|
Dart Android开发 iOS开发
比较 Flutter 日期选择器库【Flutter 专题 6】
日期选择器是对 UI 的有用补充,它使您的应用程序用户可以轻松地从日历中选择日期。无论您是在注册表单中添加出生日期字段,还是为用户提供预约时间段,您都可以使用日期选择器库来简化流程。 在本教程中,我们将探索 Flutter 的三个流行日期选择器库 Flutter、Flutter Datetime Picker、Flutter Date Range Picker 和date_time_picker。我们将检查每个库的功能并将每个库安装在一个简单的移动应用程序中。
1023 0
比较 Flutter 日期选择器库【Flutter 专题 6】
|
1月前
|
Dart UED
Flutter用户交互组件
Flutter用户交互组件
28 2
|
缓存 Dart 前端开发
Flutter 中使用 Widgetbook 管理你的组件 | 猫哥
Flutter 界面开发中我们有几个痛点 : - 与设计师协作复用一套设计规范(figma) - 可视化的管理你的组件代码(基础组件、业务组件) - 不同设备尺寸测试你的组件 - 实时修改你的测试组件参数
4265 1
Flutter 中使用 Widgetbook 管理你的组件 | 猫哥
|
7月前
|
开发者 索引 容器
Flutter开发笔记:Flutter 布局相关组件
Flutter开发笔记:Flutter 布局相关组件
270 0
|
数据库 容器
Flutter笔记:无限滚动与动态加载的实现
在 Flutter 中,实现一个无尽滚动列表通常涉及使用 ListView、ListView.builder 或 ListView.separated 组件,并结合数据源和滚动控制器。这使得你可以加载和显示大量数据,只有在需要时才会动态加
298 0
|
Dart Android开发 iOS开发
【Flutter】Flutter 混合开发 ( 安卓端向 Flutter 传递数据 | FlutterFragment 数据传递 | FlutterActivity 数据传递 )
【Flutter】Flutter 混合开发 ( 安卓端向 Flutter 传递数据 | FlutterFragment 数据传递 | FlutterActivity 数据传递 )
530 0
【Flutter】Flutter 混合开发 ( 安卓端向 Flutter 传递数据 | FlutterFragment 数据传递 | FlutterActivity 数据传递 )
|
开发者
Flutter异步加载的会引起的问题
在 Flutter 中,异步加载是非常常见的操作,例如从网络获取数据、读取本地文件等。然而,在使用异步加载时也会遇到一些坑点,如卡顿、内存泄漏等问题。以下是一些常见的异步加载坑点和优化方法
Flutter异步加载的会引起的问题
|
API 数据安全/隐私保护
Flutter | 常用组件(下)
Flutter | 常用组件(下)
Flutter | 常用组件(下)
|
缓存 API 开发者
Flutter | 常用组件(上)
Flutter | 常用组件(上)
Flutter | 常用组件(上)
Flutter组件使用技巧(一)
Flutter组件使用技巧(一)