Zenn
🌊

[Flutter]ThemeData classについての個人的まとめ

に公開
Flutter
Dart
tech

ThemeData class　とは

ThemeData classとは、

MaterialApp またはアプリ内のウィジェットツリーの全体的なビジュアルテーマをカスタマイズするためのクラス。

例えば

  • テキストフォントのデフォルトを変更する
  • Button系Widgetのデフォルトを変更する
  • ダークモードなどの変更をやりやすくする

などをカスタマイズできる

使い方

Themeは基本的にMaterialAppとのセットで使います。MaterialAppのtheme: に指定したThemeDataが アプリ全体に適用されます。
参考記事

とのこと。
つまり　以下二点がPoint

①MaterialApp()のtheme: にThemeData()を指定し、それがアプリ全体に適用する

main.dart
return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData( //引数　theme: にThemeData()を持たせる！
        primarySwatch: Colors.blue,
        ...
      ),
      home: Scaffold(

②ThemeData()で使える引数(プロパティ)はたくさんある

  • colorScheme:
  • textTheme:
  • bannerTheme:
  • buttonTheme:

などなど。


また、テーマを各Widgetに適用させたい時は、Theme.of(context)で取得したThemeDataからスタイルを取り出して使う。(今回は詳しく言及しない)

(Theme class (公式) を使って各WidgetにThemeを配ることができる。一番下で説明)

main.dart
Text(
       'Hello',
       style: Theme.of(context).textTheme.body1,
     ),

以下公式のサンプルコード

main.dart
MaterialApp(
  theme: ThemeData(//Point①：MaterialApp下でtheme: ThemeData()　を設置する
    colorScheme: ColorScheme.fromSwatch(
      primarySwatch: Colors.blue,
    ).copyWith(
      secondary: Colors.green,
    ),
    textTheme: const TextTheme(bodyText2: TextStyle(color: Colors.purple)),
    //Point②：textTheme:　などさまざまな引数で色んな部分のデフォルトをカスタマイズできる！
  ),
  home: Scaffold(
    appBar: AppBar(
      title: const Text('ThemeData Demo'),
    ),
    floatingActionButton: FloatingActionButton(
      child: const Icon(Icons.add),
      onPressed: () {},
    ),
    body: const Center(
      child: Text('Button pressed 0 times'),
    ),
  ),
)

ダークモード

Flutterでダークモードを行う時はMaterialAppのコンストラクタ引数darkTheme:に値を指定。

main.dart
return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      // 引数 MaterialApp()の darkTheme: に ThemeData.dark() を適用する！
      home: Scaffold(

Theme class

  • Theme classは子Widget以下にThemeを適用できる

(ThemeData class がアプリ全体(MaterialApp全体)なのに対して、Theme classは子Widget以下にThemeを適用)

公式より

子孫ウィジェットは、Theme.ofを使用して現在のテーマのThemeDataオブジェクトを 取得します。ウィジェットがTheme.ofを使用する場合、テーマが後で変更された場合に自動的に再構築されるため、変更を適用できます。

ざっとまとめると

Theme()classはThemadata()のもとで、Theme.of(context).textTheme.body1のように使える

って感じ

以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏

参考記事
参考記事

GitHubで編集を提案

Discussion