FlutterのThemeを触ってみる

FlutterのThemeはアプリケーションの色や見た目を提供するものです。
子孫WidgetはThemeのThemeDataを使うことでその見た目を反映させたWidgetをビルドすることができます。

DemoアプリのThemeを触ってみる

Flutter DemoアプリのThemeDataを少し変えてみます。

• MaterialAppのthemeのprimarySwatchをamberに追加
• MaterialAppのthemeにbuttonColorを追加
• _MyHomePageStateのTextのtextThemeをheadline1に変更

実際のコード

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // primarySwatchをamberに変更
        primarySwatch: Colors.amber,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        buttonColor: Colors.lightBlue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// _MyHomePageState 抜粋
body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(
        'You have pushed the button this many times:',
      ),
      Text(
        '$_counter',
        style: Theme.of(context).textTheme.headline1,
      ),
      RaisedButton(
        child: Text('Button'),
        onPressed: () {},
      ),
    ],
  ),
),

見た目の変更

• primaryカラーがamberになりました
• Buttonの色がlightBlueとして設定されました
• countを表す文字が大きくなりました

ダークテーマの使用

MaterialAppのthemeをdarkにするとダークモードがデフォルトになります。
OS設定のダークモード時に適用する場合は、MaterialAppのdarkTheme属性にThemeDataを設定します。

例えば以下のように記述すると、通常テーマ(ライトテーマ)とダークモードが逆になります。

// StatelessWidget
theme: ThemeData.dark(),
darkTheme:ThemeData.light(),

ダークテーマが反映された例

公式ドキュメント

公式ドキュメントにThemeDataのプロパティが記載されいます。かなり細かく設定できるようです。
これを活用することで、Widgetツリーの複数箇所に見た目の設定コードが分散するという煩雑さを避けることができると思います。