Flutter（七）自定义主题并切换保存

您好，欢迎关注我，本文章是关于 Flutter 的系列文，从简单的 Flutter 介绍开始，一步步带你了解进入 Flutter 的世界。你最好有一定的移动开发经验，如果没有也不要担心，在我的专栏底部给我留言，我会尽我的能力给你解答。

上一篇专栏，是教大家如何发布自己的Flutter库到公共库。本篇专栏是我关于Flutter专栏的第八篇文章，相信通过之前的学习，大家对Flutter开发需要掌握的小技巧都以及了解过了。从这篇专栏开始，我会更加偏向于介绍实际使用Flutter开发会遇到的问题以及解决方法，以及一些小技巧。

之前介绍过Flutter是一个完善的库，它自身提供了很多成熟的控件以及架构思路可以直接拿来用，本篇要介绍的主题也是如此。

现在越来越多的应用程序支持黑/白主题切换了，在Flutter中更是简单，Flutter库中提供了ThemeData.dark和Theme.light两个默认主题。在main.dart初始化MaterialApp的时候直接设置进去即可

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );

一.自定义主题

知道怎么设定主题了，我们再来看如何自定义主题。通过copyWith原始主题样式之后，修改一些需要自定义的颜色到主题里。

ThemeData _buildDarkTheme() {
  const Color primaryColor = Color(0xFF0175c2);
  final ThemeData base = new ThemeData.dark();
  return base.copyWith(
    primaryColor: primaryColor,
    buttonColor: primaryColor,
    indicatorColor: Colors.white,
    accentColor: const Color(0xFF13B9FD),
    canvasColor: const Color(0xFF202124),
    scaffoldBackgroundColor: const Color(0xFF202124),
    backgroundColor: const Color(0xFF202124),
    errorColor: const Color(0xFFB00020),
    buttonTheme: const ButtonThemeData(
      textTheme: ButtonTextTheme.primary,
    ),
    textTheme: _buildTextTheme(base.textTheme),
    primaryTextTheme: _buildTextTheme(base.primaryTextTheme),
    accentTextTheme: _buildTextTheme(base.accentTextTheme),
  );
}

二.使用自定义主题

拥有了自定义主题之后，我们就可以在最初的MaterialApp初始化的时候设置使用它。在一些需要特殊使用指定颜色的地方可以直接获取到theme对象后再使用。

Text(widget.options.theme.toString(), 
     style: TextStyle(
     color: widget.options.theme.data.textTheme.body1.color),),

当需要动态改变主题的时候，使用StatefulWidget的setState(() {})方法可以直接切换。

三.保存主题

我们希望主题更改后下次启动App还能保留最后一次修改后的主题，那么我们就要用到shared_preferences存起来。

void putAppString(String key, String value) async {
    (await SharedPreferences.getInstance()).setString(key, value);
  }

当App启动的时候从shared_preferences取出来，然后调用Widget刷新即可。

static Future<String> getAppString(String key) async {
    return (await SharedPreferences.getInstance()).getString(key);
}