Flutter 从主题切换中学习Provider的使用

参考文章：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中是否可以再多加几个属性，是否可以保存对象，列表等其他数据类型？