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);
}