🌊
[Flutter]ThemeData classについての個人的まとめ
ThemeData class とは
ThemeData classとは、
MaterialApp またはアプリ内のウィジェットツリーの全体的なビジュアルテーマをカスタマイズするためのクラス。
例えば
- テキストフォントのデフォルトを変更する
- Button系Widgetのデフォルトを変更する
- ダークモードなどの変更をやりやすくする
などをカスタマイズできる
使い方
Themeは基本的に
MaterialAppとのセット
で使います。MaterialAppのtheme: に指定したThemeDataが アプリ全体に適用
されます。
参考記事
とのこと。
つまり 以下二点がPoint
theme:
にThemeData()
を指定し、それがアプリ全体に適用する
①MaterialApp()の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のように使える
って感じ
以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏
Discussion