关于android:Flutter主题切换-flutter-redux

redux 次要由Store、Action、Reducer三局部组成

Store用于存储和治理State
Action用于用户触发的一种行为
Reducer用于依据 Action 产生新的State

flutter redux 流程

1.Widget通过StoreConnector绑定Store中的State数据
2.Widget通过Action触发一种新的行为
3.Reducer依据收到的Action更新State
4. 更新Store中的State绑定的Widget
依据以上流程，咱们实现我的项目中的主题切换性能。

我的项目集成

flutter redux 库

集成 flutter redux

批改我的项目根目录下pubspec.yaml，并增加依赖
```
flutter_redux: ^0.5.3
```
初始化 Store

首先看下Store的构造函数，如上面代码所示
```
 Store(
  this.reducer, {
  State initialState,
  List<Middleware<State>> middleware = const [],
  bool syncStream: false,
  bool distinct: false,
})
  : _changeController = new StreamController.broadcast(sync: syncStream) {
  _state = initialState;
  _dispatchers = _createDispatchers(
    middleware,
    _createReduceAndNotify(distinct),
  );
}
```
依据下面的构造函数，咱们首先须要创立State，并且还须要实现State初始化；而后须要创立Reducer；最初须要创立Middleware（暂不是本文须要解说的内容）；

创立 State

创立一个State对象AppState, 用于贮存须要共享的主题数据，并且实现AppState初始化工作，如上面代码所示

class AppState {
  ThemeData themeData;

  AppState({this.themeData});

  factory AppState.initial() => AppState(themeData: AppTheme.theme);
}

AppTheme类中定义了一个默认主题theme，如上面代码所示

class AppTheme {static final ThemeData _themeData = new ThemeData.light();

  static get theme {
    return _themeData.copyWith(primaryColor: Colors.black,);
  }
}

到此，实现了 State 的相干操作。

创立 Reducer

创立一个Reducer办法appReducer, 为AppState类里的每一个参数创立一个Reducer，如上面代码所示

AppState appReducer(AppState state, action) {
  return AppState(themeData: themeReducer(state.themeData, action),
  );
}

而themeReducer将 ThemeData 和所有跟切换主题的行为绑定在一起, 如上面代码所示

final themeReducer = combineReducers<ThemeData>([TypedReducer<ThemeData, RefreshThemeDataAction>(_refresh),
]);

ThemeData _refresh(ThemeData themeData, action) {
  themeData = action.themeData;
  return themeData;
}

通过flutter redux的combineReducers与TypedReducer将RefreshThemeDataAction和_refresh绑定在一起，当用户每次收回RefreshThemeDataAction时，都会触发_refresh, 用来更新themeData。

创立 Action

创立一个Action对象RefreshThemeDataAction, 如上面代码所示

class RefreshThemeDataAction{
  final ThemeData themeData;

  RefreshThemeDataAction(this.themeData);
}

RefreshThemeDataAction的参数 themeData 是用来接管新切换的主题。

代码集成

创立Store所有的筹备工作都已筹备，上面创立Store，如上面代码所示

final store = new Store<AppState>(
    appReducer,
    initialState: AppState.initial(),);

而后用StoreProvider加载 store,MaterialApp通过StoreConnector与Store放弃连贯。到此咱们曾经实现了flutter redux的初始化工作，如上面代码所示

void main() {
  final store = new Store<AppState>(
    appReducer,
    initialState: AppState.initial(),);

  runApp(OpenGitApp(store));
}

class OpenGitApp extends StatelessWidget {
  final Store<AppState> store;

  OpenGitApp(this.store);

  @override
  Widget build(BuildContext context) {
    return new StoreProvider<AppState>(
      store: store,
      child: StoreConnector<AppState, _ViewModel>(
        converter: _ViewModel.fromStore,
        builder: (context, vm) {
          return new MaterialApp(
            theme: vm.themeData,
            routes: AppRoutes.getRoutes(),);
        },
      ),
    );
  }
}

StoreConnector通过converter在_ViewModel中转化store.state的数据，最初通过builder返回理论须要更新主题的控件，这样就实现了数据和控件的绑定。_ViewModel的代码如上面所示

class _ViewModel {
  final ThemeData themeData;

  _ViewModel({this.themeData});

  static _ViewModel fromStore(Store<AppState> store) {
    return _ViewModel(themeData: store.state.themeData,);
  }
}

用户行为

最初，只须要增加切换主题局部的代码即可，这部分代码是从官网gallery demo 里的 Style/Colors copy 进去的，不做过多剖析，如上面代码所示

const double kColorItemHeight = 48.0;

class Palette {Palette({this.name, this.primary, this.accent, this.threshold = 900});

  final String name;
  final MaterialColor primary;
  final MaterialAccentColor accent;
  final int
      threshold; // titles for indices > threshold are white, otherwise black

  bool get isValid => name != null && primary != null && threshold != null;
}

final List<Palette> allPalettes = <Palette>[
  new Palette(
      name: 'RED',
      primary: Colors.red,
      accent: Colors.redAccent,
      threshold: 300),
  new Palette(
      name: 'PINK',
      primary: Colors.pink,
      accent: Colors.pinkAccent,
      threshold: 200),
  new Palette(
      name: 'PURPLE',
      primary: Colors.purple,
      accent: Colors.purpleAccent,
      threshold: 200),
  new Palette(
      name: 'DEEP PURPLE',
      primary: Colors.deepPurple,
      accent: Colors.deepPurpleAccent,
      threshold: 200),
  new Palette(
      name: 'INDIGO',
      primary: Colors.indigo,
      accent: Colors.indigoAccent,
      threshold: 200),
  new Palette(
      name: 'BLUE',
      primary: Colors.blue,
      accent: Colors.blueAccent,
      threshold: 400),
  new Palette(
      name: 'LIGHT BLUE',
      primary: Colors.lightBlue,
      accent: Colors.lightBlueAccent,
      threshold: 500),
  new Palette(
      name: 'CYAN',
      primary: Colors.cyan,
      accent: Colors.cyanAccent,
      threshold: 600),
  new Palette(
      name: 'TEAL',
      primary: Colors.teal,
      accent: Colors.tealAccent,
      threshold: 400),
  new Palette(
      name: 'GREEN',
      primary: Colors.green,
      accent: Colors.greenAccent,
      threshold: 500),
  new Palette(
      name: 'LIGHT GREEN',
      primary: Colors.lightGreen,
      accent: Colors.lightGreenAccent,
      threshold: 600),
  new Palette(
      name: 'LIME',
      primary: Colors.lime,
      accent: Colors.limeAccent,
      threshold: 800),
  new Palette(name: 'YELLOW', primary: Colors.yellow, accent: Colors.yellowAccent),
  new Palette(name: 'AMBER', primary: Colors.amber, accent: Colors.amberAccent),
  new Palette(
      name: 'ORANGE',
      primary: Colors.orange,
      accent: Colors.orangeAccent,
      threshold: 700),
  new Palette(
      name: 'DEEP ORANGE',
      primary: Colors.deepOrange,
      accent: Colors.deepOrangeAccent,
      threshold: 400),
  new Palette(name: 'BROWN', primary: Colors.brown, threshold: 200),
  new Palette(name: 'GREY', primary: Colors.grey, threshold: 500),
  new Palette(name: 'BLUE GREY', primary: Colors.blueGrey, threshold: 500),
];

class ColorItem extends StatelessWidget {
  const ColorItem(
      {Key key,
      @required this.index,
      @required this.color,
      this.prefix = '',
      this.onChangeTheme})
      : assert(index != null),
        assert(color != null),
        assert(prefix != null),
        super(key: key);

  final int index;
  final Color color;
  final String prefix;
  final Function(Color) onChangeTheme;

  String colorString() =>
      "#${color.value.toRadixString(16).padLeft(8,'0').toUpperCase()}";

  @override
  Widget build(BuildContext context) {
    return new Semantics(
      container: true,
      child: new Container(
        height: kColorItemHeight,
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        color: color,
        child: new SafeArea(
          top: false,
          bottom: false,
          child: FlatButton(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[new Text('$prefix$index'),
                new Text(colorString()),
              ],
            ),
            onPressed: () {onChangeTheme(color);
            },
          ),
        ),
      ),
    );
  }
}

class PaletteTabView extends StatelessWidget {
  static const List<int> primaryKeys = const <int>[
    50,
    100,
    200,
    300,
    400,
    500,
    600,
    700,
    800,
    900
  ];
  static const List<int> accentKeys = const <int>[100, 200, 400, 700];

  PaletteTabView({Key key, @required this.colors, this.onChangeTheme})
      : assert(colors != null && colors.isValid),
        super(key: key);

  final Palette colors;
  final Function(Color) onChangeTheme;

  @override
  Widget build(BuildContext context) {final TextTheme textTheme = Theme.of(context).textTheme;
    final TextStyle whiteTextStyle =
        textTheme.body1.copyWith(color: Colors.white);
    final TextStyle blackTextStyle =
        textTheme.body1.copyWith(color: Colors.black);
    final List<Widget> colorItems = primaryKeys.map((int index) {
      return new DefaultTextStyle(
        style: index > colors.threshold ? whiteTextStyle : blackTextStyle,
        child: new ColorItem(
            index: index,
            color: colors.primary[index],
            onChangeTheme: onChangeTheme),
      );
    }).toList();

    if (colors.accent != null) {colorItems.addAll(accentKeys.map((int index) {
        return new DefaultTextStyle(
          style: index > colors.threshold ? whiteTextStyle : blackTextStyle,
          child: new ColorItem(
              index: index,
              color: colors.accent[index],
              prefix: 'A',
              onChangeTheme: onChangeTheme),
        );
      }).toList());
    }

    return new ListView(
      itemExtent: kColorItemHeight,
      children: colorItems,
    );
  }
}

class ThemeSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, _ViewModel>(
        converter: _ViewModel.fromStore,
        builder: (context, vm) {
          return new DefaultTabController(
            length: allPalettes.length,
            child: new Scaffold(
              appBar: new AppBar(
                elevation: 0.0,
                title: const Text("主题色"),
                bottom: new TabBar(
                  isScrollable: true,
                  tabs: allPalettes
                      .map((Palette swatch) => new Tab(text: swatch.name))
                      .toList(),),
              ),
              body: new TabBarView(children: allPalettes.map((Palette colors) {
                  return new PaletteTabView(
                    colors: colors,
                    onChangeTheme: vm.onChangeTheme,
                  );
                }).toList(),),
            ),
          );
        });
  }
}

class _ViewModel {final Function(Color) onChangeTheme;

  _ViewModel({this.onChangeTheme});

  static _ViewModel fromStore(Store<AppState> store) {
    return _ViewModel(onChangeTheme: (color) {SharedPrfUtils.saveInt(SharedPrfKey.SP_KEY_THEME_COLOR, color.value);
        store.dispatch(RefreshThemeDataAction(AppTheme.changeTheme(color)));
      },
    );
  }
}

运行成果

执行代码，成果如下

flutter redux 流程

我的项目集成

flutter redux 库

集成 flutter redux

初始化 Store