[flutter] 一貫性のある色使いの実現

1. ColorSchemeの作成

• ColorSchemeの作成：ColorSchemeクラスを利用し、アプリ全体で使う色の基盤を作成する。

• fromSeedでの自動生成：シードカラーを基に、一貫したカラースキームを自動で生成する。

  ColorScheme colorScheme = ColorScheme.fromSeed(
    seedColor: Colors.blue,
  );
  

2. テーマデータのカスタマイズ

• ThemeDataでのテーマ作成：作成したカラースキームをThemeDataに組み込み、アプリのテーマとしてカスタマイズする。

  ThemeData themeData = ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  );
  

3. MaterialAppへのテーマ適用

• テーマの統合：MaterialAppのthemeプロパティを使用して、カスタマイズしたテーマデータをアプリ全体に適用する。

  MaterialApp(
    theme: themeData,
    home: MyHomePage(),
  );
  

4. コンポーネントへの実装

• テーマから色の取り出し：Theme.of(context)を通じて、テーマデータから色を取り出し、UIコンポーネントに適用する。

  Container(
    color: Theme.of(context).colorScheme.primary,
    child: Text(
      'Hello, World!',
      style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
    ),
  );
  

ColorSchemeのプロパティ

プロパティ	説明
primary	アプリケーションの主色。重要な要素に使用。
onPrimary	primary色の上のテキストやアイコンの色。
primaryContainer	primaryのコンテナバリエーション。
onPrimaryContainer	primaryContainer上のテキストやアイコンの色。
secondary	アプリケーションの補助色。アクセントや強調に用いられる。
onSecondary	secondary色の上のテキストやアイコンの色。
secondaryContainer	secondaryのコンテナバリエーション。
onSecondaryContainer	secondaryContainer上のテキストやアイコンの色。
background	アプリケーションの背景色。
onBackground	background色の上のテキストやアイコンの色。
surface	UI要素の背景色、例えばカードやメニュー。
onSurface	surface色の上のテキストやアイコンの色。
error	エラーを示す要素に使用される色。
onError	error色の上のテキストやアイコンの色。
brightness	全体の明るさ。Brightness.lightまたはBrightness.dark。