04 主题
Flutter 中官方默认就支持主题设置,MaterialApp
提供了 theme
参数设置主题,之后可以通过 Theme.of(context)
获取到当前的 ThemeData
用于设置控件的颜色字体等。
ThemeData
的创建提供很多参数,这里主要说 primarySwatch
参数。 primarySwatch
是一个 MaterialColor 对象,内部由10种不同深浅的颜色组成,用来做主题色调再合适不过。
如下图和代码所示,Flutter 默认提供了很多主题色,同时我们也可以通过 MaterialColor
实现自定义的主题色。
MaterialColor primarySwatch = const MaterialColor(
primaryValue,
const <int, Color>{
50: const Color(primaryLightValue),
100: const Color(primaryLightValue),
200: const Color(primaryLightValue),
300: const Color(primaryLightValue),
400: const Color(primaryLightValue),
500: const Color(primaryValue),
600: const Color(primaryDarkValue),
700: const Color(primaryDarkValue),
800: const Color(primaryDarkValue),
900: const Color(primaryDarkValue),
},
);
那如何实现实时的主题切换呢?当然是通过 Redux 啦!
前面我们已经在 GSYState 中创建了 themeData
,此时将它设置给 MaterialApp 的 theme
参数,之后我们通过 dispatch 改变 themeData
即可实现主题切换。
注意,因为你的 MaterialApp 也是一个 StatefulWidget
,如下代码所示,还需要利用 StoreBuilder
包裹起来,之后我们就可以通过 dispatch
修改主题,通过 Theme.of(context).primaryColor
获取主题色啦。
@override
Widget build(BuildContext context) {
/// 通过 StoreProvider 应用 store
return new StoreProvider(
store: store,
child: new StoreBuilder<GSYState>(builder: (context, store) {
return new MaterialApp(
theme: store.state.themeData);
}),
);
}
····
ThemeData themeData = new ThemeData(primarySwatch: colors[index]);
store.dispatch(new RefreshThemeDataAction(themeData));
学员评价