Flutter主題-Theme

Theme Widget可以為Material APP 定義主題數據（ThemeData），Material組件庫里很多Widget都使用了主題數據，如導航欄顏色、標題字體、Icon樣式等。Theme內會使用InheritedWidget來為其子樹Widget共享樣式數據。

ThemeData

ThemeData是Material Design Widget庫的主題數據，Material庫的Widget需要遵守相應的設計規范，而這些規范可自定義（部分），所以我們可以通過ThemeData來自定義應用主題，我們可以通過Theme.of方法來獲取當前的ThemeData。

我們看看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, //指定平台，應用特定平台控件風格
  ...
})

上面只是ThemeData的一小部分屬性，完整列表讀者可以查看SDK定義。上面屬性中需要說明的是primarySwatch，它是主題顏色的一個樣本，通過這個樣本可以在一些條件下生成一些其他的屬性，例如，如果沒有指定primaryColor，並且當前主題不是深色主題，那么primaryColor就會默認為primarySwatch指定的顏色，還有一些相似的屬性如accentColor、indicatorColor等也會受primarySwatch影響。

示例

我們實現一個路由換膚功能：

class ThemeTestRoute extends StatefulWidget {
  @override
  _ThemeTestRouteState createState() => new _ThemeTestRouteState();
}

class _ThemeTestRouteState extends State<ThemeTestRoute> {
  Color _themeColor = Colors.teal; //當前路由主題色

  @override
  Widget build(BuildContext context) {
    ThemeData themeData = Theme.of(context);
    return Theme(
      data: ThemeData(
          primarySwatch: _themeColor, //用於導航欄、FloatingActionButton的背景色等
          iconTheme: IconThemeData(color: _themeColor) //用於Icon顏色
      ),
      child: Scaffold(
        appBar: AppBar(title: Text("主題測試")),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //第一行Icon使用主題中的iconTheme
            Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.favorite),
                  Icon(Icons.airport_shuttle),
                  Text("  顏色跟隨主題")
                ]
            ),
            //為第二行Icon自定義顏色（固定為黑色)
            Theme(
              data: themeData.copyWith(
                iconTheme: themeData.iconTheme.copyWith(
                    color: Colors.black
                ),
              ),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.favorite),
                    Icon(Icons.airport_shuttle),
                    Text("  顏色固定黑色")
                  ]
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: () =>  //切換主題
                setState(() =>
                _themeColor =
                _themeColor == Colors.teal ? Colors.blue : Colors.teal
                ),
            child: Icon(Icons.palette)
        ),
      ),
    );
  }
}