ThemeとThemeData — その概念とスタイル設定の原則

ThemeとThemeDataとは

ThemeDataは、Materialアプリケーションのビジュアルスタイルの完全な記述を含むクラスです。themeまたはdarkThemeパラメータを介してMaterialAppに渡され、すべての子ウィジェットに継承されます。すべてのMaterial Designウィジェットは、ThemeDataを使用してスタイル（ボタンの色、AppBarのサイズ、テキストスタイル、カードの余白、アイコン）を取得します。

ThemeDataの中核にはColorSchemeがあり、primary、secondary、surface、errorなどの色を定義します。これらの色から、すべてのMaterialコンポーネントの状態（ホバー、フォーカス、プレス）が自動的に計算されます。たとえば、ElevatedButtonは背景にprimary色、テキストにonPrimaryを使用します — 追加設定は不要です。

ThemeウィジェットはInheritedWidgetで、テーマをウィジェットツリーの下位に伝播します。任意のウィジェットはTheme.of(context)を介して現在のテーマにアクセスでき、Theme.copyWithまたはThemeData.copyWithを介して既存のテーマをベースに上書きした値で新しいテーマを作成することもできます。

まとめ: ThemeDataはアプリケーションのスタイルの単一ソースです。開発はThemeDataを定義することから始めましょう — これによりプロジェクト全体のビジュアル言語が設定され、異なる画面でスタイルが分散するのを防ぎます。

ColorScheme: カラーパレットの基礎

ColorSchemeはMaterial 3におけるテーマ設定の中核要素です。非推奨のprimarySwatchとprimaryColorを置き換え、すべての状態とコンポーネントに完全な色のセットを提供します。

ColorSchemeには12の主要色があります: primary、onPrimary、secondary、onSecondary、surface、onSurface、error、onError、background、onBackground、outline、shadow。各色に対して、明るいバリアントと暗いバリアント、およびホバー、フォーカス、プレス、ドラッグ状態の色が自動的に計算されます。primaryのみを指定すると、フレームワークはColorScheme.fromSeedを介して残りの色を自動生成します。

ColorScheme.fromSeedメソッド（Material 3）は、ベースカラーseedColorを受け取り、Material Design 3アルゴリズムに基づいて完全な調和のとれたパレットを生成します。これにより、補色や類似色を手動で選択する必要がなくなります。ブランドの主要色を1つ渡すだけで、ColorScheme.fromSeedがMaterialシステム全体の一貫したパレットを作成します。

まとめ: 新しいプロジェクトでは、パレット生成にColorScheme.fromSeedを使用してください。Material 2互換性の場合は — primarySwatchを使用します。ColorSchemeはMaterial 3の最小要件です。

タイポグラフィとTextTheme: アプリのフォント

TextThemeはThemeDataの一部で、すべての見出しレベル、小見出し、本文、ラベルのテキストスタイルを定義します。Material Designは15のテキストスタイルを定義しています: headlineLarge、headlineMedium、headlineSmall、titleLarge、titleMediumなど。

タイポグラフィは、GoogleFontsによる自動フォント読み込み、またはカスタムTextStyleオブジェクトを使用した組み込みのTheme.of(context).textThemeを介して設定されます。GoogleFontsはgoogle_fontsパッケージを通じて数百のフォントを提供し、初回読み込み後にローカルにキャッシュします。代替方法は、pubspec.yamlを介してフォントをプロジェクトのアセットに埋め込むことです。

アダプティブタイポグラフィのために、TextThemeはMediaQuery.textScaleFactorをサポートしています — システムフォントサイズが増加すると、すべてのテキストスタイルが比例して拡大縮小されます。さらに、MediaQuery.size.widthに応じてisTestを使用して、異なるフォームファクターに異なるフォントサイズを設定できます。

まとめ: ThemeDataでTextThemeを定義し、すべてのテキスト要素にTheme.of(context).textThemeを使用してください。これによりフォントの一貫性が確保され、グローバルなタイポグラフィ変更が簡素化されます。

テーマの継承と上書き

ThemeはInheritedWidgetで、テーマを親から子へ伝播します。子ウィジェットはTheme.of(context)を介して現在のテーマを読み取るだけでなく、ThemeData.copyWithを介して変更を加えた独自のコピーを作成することもできます。

継承メカニズム: ウィジェットが新しいデータを持つThemeでラップされている場合、そのすべての子孫は上書きされたテーマを参照し、このラッパーの外側のウィジェットは元のテーマを参照します。これにより、特定の画面のスタイルを分離できます: ヘッダーは変更されたAppBarThemeを持つカスタムテーマを使用し、アプリの残りの部分は標準テーマを使用します。

Themeのネストは無制限です。Flutterは階層的な検索を使用します: Theme.of(context)が呼び出されると、フレームワークはツリーを上って最初のThemeまで移動し、そのテーマを返します。Themeが見つからない場合は — 例外がスローされます。したがって、MaterialAppは常にアプリケーションをThemeでラップします。

まとめ: Themeの継承はスタイル分離のための柔軟なメカニズムです。グローバル設定を複製することなく、個々の画面にテーマの上書きを使用してください。

ダークテーマ: アプリのダークモード

ダークテーマは、Flutterのライトテーマとダークテーマを切り替える組み込み機能です。ThemeDataはMaterialAppのtheme（ライト）とdarkTheme（ダーク）パラメータに格納されます。themeModeパラメータがモードを制御します: ThemeMode.light（常にライト）、ThemeMode.dark（常にダーク）、ThemeMode.system（システム設定に従う）。

ダークテーマを実装する際、すべてのスタイルをゼロから再作成する必要はありません。単にColorScheme.fromSeed(seedColor, brightness: Brightness.dark)をdarkThemeに渡します。フレームワークは自動的にダーク背景用に色を調整します: surfaceはダークグレーに、テキストは明るくなります。他のサブテーマ（AppBarTheme、CardTheme、BottomNavigationBarTheme）は、明示的に上書きされない限り、ライトバージョンから継承されます。

テーマ間のスムーズな遷移のために、FlutterはAnimatedThemeを介したアニメーションを提供します。themeModeが変更されると、色とスタイルがアニメーションし、視覚的に魅力的な切り替えを実現します。AnimatedThemeはDurationとCurveを使用してアニメーション速度を設定します。

まとめ: ダークテーマはdarkThemeとColorScheme.fromSeed（brightness: Brightness.dark）を使用して実装します。ユーザーのシステム設定に従うにはThemeMode.systemを使用します。

ThemeとThemeDataのコード例

例1 — ColorScheme.fromSeedを使用したMaterialAppを介したグローバルテーマ設定。

final ThemeData appTheme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.indigo,
    brightness: Brightness.light,
  ),
  appBarTheme: const AppBarTheme(
    centerTitle: true,
    elevation: 0,
  ),
  cardTheme: const CardTheme(
    elevation: 2,
    margin: EdgeInsets.all(8),
  ),
);

return MaterialApp(
  theme: appTheme,
  themeMode: ThemeMode.system,
  home: const MyHomePage(),
);

この例では、Material 3、インディゴベースのカラースキーム、カスタムのAppBarとCardスタイルを持つThemeDataを作成します。useMaterial3は新しいMaterial 3テーマシステムを有効にし、ColorScheme.fromSeedが完全なパレットを生成します。

例2 — テーマへのアクセスとアプリケーションの一部の上書き。

Widget build(BuildContext context) {
  final theme = Theme.of(context);

  return Column(
    children: [
      Text(
        'Standard headline',
        style: theme.textTheme.headlineMedium,
      ),
      Theme(
        data: theme.copyWith(
          colorScheme: theme.colorScheme.copyWith(
            primary: Colors.orange,
          ),
        ),
        child: const SpecialSection(),
      ),
    ],
  );
}

2つ目の例では、Theme.of(context)を使用したスタイルの読み取りと、グローバル設定を変更せずにツリーの一部でテーマを上書きするためのcopyWith付きTheme()の使用を示しています。Theme内のSpecialSectionはオレンジのprimary色を受け取り、アプリの残りの部分は元のインディゴを維持します。

まとめ: グローバルテーマはMaterialAppで設定し、Theme.of(context)を介してアクセスし、copyWith付きのThemeを介して上書きします。Material 3の場合はColorScheme.fromSeedを使用します。

テーマ設定のよくある間違い

間違い1: Material 3でColorSchemeの代わりにprimarySwatchを使用する。primarySwatchは非推奨で、Material 3ではサポートされていません。primarySwatchでuseMaterial3: trueを使用すると、Flutterは警告を発します。解決策: パレット生成にColorScheme.fromSeedに移行してください。

間違い2: Theme.of(context)を使用せずにウィジェットに色をハードコードする。開発者はテーマのprimaryやsecondary色を使わずに、Containerに直接Colors.blueと書きます。テーマが変更されても、これらの色は変わらず、一貫性が損なわれます。解決策: 常にTheme.of(context).colorScheme.primaryまたはテーマの他の色を使用してください。

間違い3: darkThemeの欠如。アプリケーションがdarkThemeを定義していない場合、デバイスでダークテーマが有効になると、Flutterは自動的にライトテーマを適応させようとしますが、多くの場合、品質の低い結果になります。解決策: ダークテーマが優先事項でなくても、常にMaterialAppにdarkThemeを渡してください — これはユーザーにとって重要なUXです。

間違い4: ビルドごとに新しいテーマを作成する。ThemeDataがbuildメソッド内で作成されると、ウィジェットが再構築されるたびに新しいテーマオブジェクトが作成され、InheritedWidgetの最適化が損なわれます。解決策: ThemeDataをbuildの外側のstaticフィールドまたはconstコンストラクタに移動してください。

まとめ: 適切なテーマ設定には集中管理アプローチが必要です。ThemeDataを定数に移動し、テーマのカラースキームを使用し、常にライトとダークの両方のテーマを定義してください。