参考文章：https://blog.csdn.net/qq_33419925/article/details/105746626
参考文章写的很好，但是关于主题数据的持久化保存没有说清楚，接下来是本人的实现过程：
效果图：
切换主题
主题数据ThemeData的内容非常多，包括以下：
ThemeData({
Brightness brightness, //深色还是浅色
MaterialColor primarySwatch, //主题颜色样本，见下面介绍
Color primaryColor, //主色，决定导航栏颜色
Color accentColor, //次级色，决定大多数Widget的颜色，如进度条、开关等。
Color cardColor, //卡片颜色
Color dividerColor, //分割线颜色
ButtonThemeData buttonTheme, //按钮主题
Color cursorColor, //输入框光标颜色
Color dialogBackgroundColor,//对话框背景颜色
String fontFamily, //文字字体
TextTheme textTheme,// 字体主题，包括标题、body等文字样式
IconThemeData iconTheme, // Icon的默认样式
TargetPlatform platform, //指定平台，应用特定平台控件风格
...
})
这里我只动态修改primaryColor，primaryColorDark，accentColor，primaryColorLight这四个属性
1 第一步：先配置好我们的一些可供选择的主题 总共六个
在前边的gif中可以看到，主题选择对话框里就是以下六个颜色选择
/* 主题列表 */
static const Map themeColor = {
0: {//green
"primaryColor": Color(0xff4caf50),
"primaryColorDark": Color(0xff388E3C),
"colorAccent": Color(0xff8BC34A),
"primaryColorLight": Color(0xffC8E6C9),
},
1:{//red
"primaryColor": Color(0xffF44336),
"primaryColorDark": Color(0xffD32F2F),
"colorAccent": Color(0xffFF5252),
"primaryColorLight": Color(0xffFFCDD2),
},
2:{//blue
"primaryColor": Color(0xff2196F3),
"primaryColorDark": Color(0xff1976D2),
"colorAccent": Color(0xff448AFF),
"primaryColorLight": Color(0xffBBDEFB),
},
3:{//pink
"primaryColor": Color(0xffE91E63),
"primaryColorDark": Color(0xffC2185B),
"colorAccent": Color(0xffFF4081),
"primaryColorLight": Color(0xffF8BBD0),
},
4:{//purple
"primaryColor": Color(0xff673AB7),
"primaryColorDark": Color(0xff512DA8),
"colorAccent": Color(0xff7C4DFF),
"primaryColorLight": Color(0xffD1C4E9),
},
5:{//grey
"primaryColor": Color(0xff9E9E9E),
"primaryColorDark": Color(0xff616161),
"colorAccent": Color(0xff9E9E9E),
"primaryColorLight": Color(0xffF5F5F5),
},
6:{//black
"primaryColor": Color(0xff333333),
"primaryColorDark": Color(0xff000000),
"colorAccent": Color(0xff666666),
"primaryColorLight": Color(0xff999999),
},
};
2.第二步：创建Provider和主题选择Dialog
provider: ^4.0.0 #跨组件状态共享
2.1 创建保存数据的Model
继承于ChangeNotifier，使用get方法暴露需要改变的数据，使用setTheme方法修改数据
//全局状态管理---主题颜色
import 'package:flutter/cupertino.dart';
class ThemeProvideModel extends ChangeNotifier {
int _themeIndex;
int get themeIndex => _themeIndex;
void setTheme(int index) async {
_themeIndex = index;
notifyListeners();
}
}
这里我们需要全局共享的数据是int _themeIndex;简单的int型，对应第一步中属性列表的选择。
2.2 创建主题选择Dialog
void showThemeDialog() {
showDialog<void>(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return AlertDialog(
//对话框标题
title: Text("切换主题"),
//主题列表比较长 使用可以滚动
content: SingleChildScrollView(
child: Container(
//包含ListView要指定宽高 以避免Dialog过高
width: MediaQuery.of(context).size.width * 0.9,
height: MediaQuery.of(context).size.height * 0.5,
child: ListView.builder(
shrinkWrap: true,
//确定列表项数目
itemCount: MyColors.themeColor.keys.length,
//确定列表项内容
itemBuilder: (BuildContext context, int position) {
return GestureDetector(//使用手势探测器做好点击监听
child: Container(//列表项内容其实就是一个Container填充颜色
padding: EdgeInsets.all(20.0),
margin: EdgeInsets.only(bottom: 15),
color: MyColors.themeColor[position]["primaryColor"],
),
onTap: () async {
//监听搭配点击后 使用Provider通知全局 主题属性改变
Provider.of<ThemeProvideModel>(context,listen: false)
.setTheme(position);
//SharedPreferences存储主题下标
SharedPreferences sp =
await SharedPreferences.getInstance();
sp.setInt(Constant.THEMEINDEX, position);
//自动关闭对话框
Navigator.of(context).pop();
},
);
}),
),
),
);
},
);
}
代码中比较重要的几点说明：
Container本身没有手势监听，但是可以在外套一层GestureDetector实现手势监听
Provider状态改变使用Provider.of
Provider.of<ThemeProvideModel>(context,listen: false) .setTheme(position);
这里有一个属性listen，目前设置为false，设置为ture或者null都会报错。
这样就完成了一个简单的属性选择Dialog，但是点击它并没有反应，因为目前还没有设置Provider的订阅者。
3 第三步 设置订阅则 Provider属性改变 立马知道
因为这个Theme主题是整个APP全局共享的，所以在main中设置providers，使用MultiProvider可以设置多个provider
class MyApp extends StatelessWidget {
//本地保存的主题选择编号
int themeIndex;
MyApp({Key key, @required this.themeIndex}) : super(key: key);
//provider的主题选择编号
int providerThemeIndex;
@override
Widget build(BuildContext context) {
//使用MultiProvider可以设置多个provider
return MultiProvider(
//设置provider
providers: [ChangeNotifierProvider.value(value: ThemeProvideModel())],
//设置订阅者Consumer
child: Consumer<ThemeProvideModel>(
//构建出订阅ThemeProvideModel的Widget
builder: (context, themeProvideModel, child) {
//context:上下文 themeProvideModel：订阅的数据的model对象
providerThemeIndex = themeProvideModel.themeIndex;
print("Provider提供主题数据");
if (providerThemeIndex == null) {
//首次启动Provider内数据为null 此时将保存的本地数据作为启动主题
providerThemeIndex = themeIndex;
}
//返回构建的Widget
return MaterialApp(
title: 'Tomato News',
theme: ThemeData(
//根据保存的主题编号读取主题颜色数据
primaryColor: MyColors.themeColor[providerThemeIndex]
["primaryColor"],
primaryColorDark: MyColors.themeColor[providerThemeIndex]
["primaryColorDark"],
accentColor: MyColors.themeColor[providerThemeIndex]
["accentColor"],
primaryColorLight: MyColors.themeColor[providerThemeIndex]
["primaryColorLight"],
),
//主界面
home: MainPage(),
);
},
));
}
}
关键代码说明Consumer是作为订阅者，可以订阅provider的数据提供给它包裹的Widget。
Consumer有一个builder方法就是用于构建Widget的
builder有三个参数：context, themeProvideModel, child
分别是：context:上下文，themeProvideModel：订阅的数据的model对象，child(暂时不清楚也没用到)
接下来从themeProvideModel中获取数据，启动的时候肯定是null，这时我们给它一个初始值themeIndex（之后讲），然后就可以构建主题数据ThemeData了。
现在再点击切换主题Dialog就可以改变主题了。
4 第四步 主题数据的持久化存储 下次启动 还是如你所选
在第二步创建Dialog中，我们可以看到，在选择了主题属性编号后，我们是将这个编号使用SharedPreferences存储起来了。那我希望在下次启动app时就可以读取并使用这次选择的内容该怎么做呢？
我们可以在整个程序的入口main函数中，在runApp启动之前，进行读取，然后将读取结果传入MyApp。
void main() async {
//runApp前调用，初始化绑定，手势、渲染、服务等
WidgetsFlutterBinding.ensureInitialized();
int themeIndex = await getThemeIndex(); //在界面加载前读取存储的主题数据
runApp(MyApp(themeIndex: themeIndex));
}
Future<int> getThemeIndex() async {
SharedPreferences sp = await SharedPreferences.getInstance();
int themeIndex = sp.getInt("themeIndex");
if (themeIndex == null) {
//首次启动没有保存 默认为第一个主题颜色
themeIndex = 0;
}
return themeIndex;
}
关键代码说明：获取SharedPreferences需要耗时 所以getThemeIndex在异步操作，这里为了等待读取本地保存的数据结果，所以main函数中也要等待结果返回了再启动App。(那界面不就卡住了？所幸SharedPreferences实例不需要太久，几乎无感)
我们将获取的themeIndex传递给APP启动Widget，这样第三步中的themeIndex就有值了。
补充点
1.这里Consumer只订阅了一个数据themeProvideModel，但如果我们的子Widget需要多个数据源呢？
https://blog.csdn.net/u013894711/article/details/102782366
image.png
从Consumer——Consumer6，你最多可以一次性获取6个Provider，如果你要获取7个呢？抱歉，真没这种方式了，只能自力更生。。。。。
2.这里使用Provider只保存了单个int数据，想一想一个Provider model中是否可以再多加几个属性，是否可以保存对象，列表等其他数据类型？
网友评论