アプリ全体の背景色や主要な色などを決める際に、ThemeDataを使うと便利です。
これを使うことで、わざわざ個別のWidgetに色を設定する必要がなくなるので、色を変更したい場合は一括で変更できますし、アプリ全体を統一感のあるデザインにすることができます。
また、ダークモードに対応も簡単に行えます。
目次
ThemeDataの設定
ThemeDataはMaterialAppウィジェットで設定します。
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
theme: ThemeData(
brightness: Brightness.light, // 明るさ
colorScheme: ColorScheme.light(
background: Colors.grey.shade400, // 全体の背景
primary: Colors.grey.shade300, // 主要な色
secondary: Colors.grey.shade200,
),
),
);
}
}ThemeDataで設定した色の使い方
設定したテーマの色をWidgetに適用させたい時は次のように書きます。
// 背景色
Theme.of(context).background例えば、Scaffoldウィジェットの背景色を設定する場合は次のとおりです。
return Scaffold(
backgroundColor: Theme.of(context).colorScheme.background,
);
ダークモードに対応
ダークモード時に色を変えたい場合は、MaterialAppウィジェットのdarkThemeにThemeDataを追加するだけです。
コードが長くなるので、ThemeDataのファイルを別ファイルにまとめておきます。
● theme.dart
import 'package:flutter/material.dart';
// ライトモード
ThemeData lightMode = ThemeData(
brightness: Brightness.light,
colorScheme: ColorScheme.light(
background: Colors.grey.shade400,
primary: Colors.grey.shade300,
secondary: Colors.grey.shade200,
),
);
// ダークモード
ThemeData darkMode = ThemeData(
brightness: Brightness.dark,
colorScheme: ColorScheme.dark(
background: Colors.grey.shade900,
primary: Colors.grey.shade800,
secondary: Colors.grey.shade700,
),
);● main.dart
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
theme: lightMode,
darkTheme: darkMode,
);
}
}結果は次のとおり、ライトモードとダークモードで色が自動で切り替わります。
テキストの設定
ThemeDataでは色の設定の他にテキストやアイコンなどの設定もできます。
設定項目が多いので、必要に応じて追加していくのが良いでしょう。
全体のフォントを定義したい場合は、fontFamilyを、テキストスタイルの設定（サイズや太さなど）を定義したい場合はtextThemeを設定します。
ThemeData(
brightness: Brightness.light,
colorScheme: ColorScheme.light(
background: Colors.grey.shade400,
primary: Colors.grey.shade300,
secondary: Colors.grey.shade200,
),
fontFamily: 'Roboto', // フォントファミリーの設定
textTheme: TextTheme(
// テキストの設定
bodySmall: TextStyle(fontSize: 14.0, fontWeight: FontWeight.normal),
bodyMedium: TextStyle(fontSize: 20.0, fontWeight: FontWeight.normal),
bodyLarge: TextStyle(fontSize: 32.0, fontWeight: FontWeight.normal),
),
)
Comment