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