１．ColorScheme() クラス
ColorScheme()クラスは、Flutter でマテリアルデザインのカラーパレットを設定するためのクラスです。
このクラスを利用することで、アプリケーションのテーマを統一的に管理することができます。
ここでは、ColorScheme()の各コンストラクタの特徴を説明します。
- ColorScheme()
説明: デフォルトのプロパティ値を使用して、ColorScheme オブジェクトを生成します。
特徴: 明示的にカラー値を設定しない場合、デフォルトの色が使用されます。全てのプロパティに対して null が設定されるため、使用時には各プロパティに具体的な値を指定する必要があります。 - ColorScheme.dark()
説明: ダークテーマ用の ColorScheme を生成します。
特徴: ダークテーマに適したデフォルトのカラー値が設定されます。背景色やテキスト色などがダークテーマ向けに最適化されています。 - ColorScheme.fromSeed()
説明: 指定されたシードカラーを基に、カラーパレットを生成します。
特徴: シードカラーから派生した色を元に、ColorScheme の各色が自動的に生成されます。これにより、シードカラーを中心とした一貫性のあるテーマを簡単に作成できます。 - ColorScheme.fromSwatch()
説明: マテリアルデザインのカラースウォッチを基にして ColorScheme を生成します。
特徴: カラースウォッチから主要な色を抽出し、それを元に ColorScheme の各色が設定されます。カスタマイズが容易で、広範囲の色をテーマに組み込むことができます。 - ColorScheme.highContrastDark()
説明: ハイコントラストなダークテーマ用の ColorScheme を生成します。
特徴: 視認性を高めるためにコントラストが強化されたダークテーマが設定されます。視覚障害があるユーザーにとって読みやすいテーマ設定です。 - ColorScheme.highContrastLight()
説明: ハイコントラストなライトテーマ用の ColorScheme を生成します。
特徴: ライトテーマでありながら、コントラストを高めることで全体的な視認性を向上させます。明るい背景でも色の識別がしやすくなっています。 - ColorScheme.light()
説明: ライトテーマ用の ColorScheme を生成します。
特徴: ライトテーマに適したデフォルトのカラー値が設定され、明るい背景に適した色合いが用意されます。
これらのコンストラクタを使うことで、さまざまなテーマニーズに合わせたカラースキームを効果的に設計し、アプリケーションのユーザーインターフェースを一貫性のある方法でカスタマイズできます。それぞれの使用シナリオに応じて選択することが重要です。
２．ColorScheme.fromSwatch()
ColorScheme.fromSwatch() は、Flutter の マテリアルデザイン２（Material Design 2） のカラーパレットを生成するために設計されています。マテリアルデザイン２では、主に ColorSwatch に基づいてカラーパレットを管理し、基準色（プライマリカラー）に基づくカラーパレットを作成します。この方法はまだ利用可能であり、特にマテリアルデザイン２のテーマを使用する場合には有効でした。
ColorSwatch クラスの概要
継承元
olor クラスを継承していますが、1つの色だけでなく、複数の色を管理するために作られています。
主な目的
ColorSwatch は、1つの基準色に対して、複数のシェード（明るさや濃さの違うバリエーション）を格納するために使用されます。これにより、アプリケーション内で一貫性のあるカラーパレットを構築できます。
ColorSwatchの使い方
ColorSwatchは、主にマテリアルデザインのカラーパレットを表現するために使われます。
例えば、Colors.blueのようなカラーパレットはColorSwatchクラスで定義されています。
const ColorSwatch<int> blue = const ColorSwatch(
0xFF0000FF, // 基準となるプライマリカラー
const <int, Color>{
50: const Color(0xFFE3F2FD),
100: const Color(0xFFBBDEFB),
200: const Color(0xFF90CAF9),
300: const Color(0xFF64B5F6),
400: const Color(0xFF42A5F5),
500: const Color(0xFF2196F3), // 基準色（プライマリカラー）
600: const Color(0xFF1E88E5),
700: const Color(0xFF1976D2),
800: const Color(0xFF1565C0),
900: const Color(0xFF0D47A1),
},
);ColorSwatchの構成要素
基準色（Primary Color）:
ColorSwatch は、まず1つの基準色（プライマリカラー）を指定します。例えば、0xFF0000FF はブルー（青）です。これがパレット全体の中心となる色です。
シェード（Shade）:
基準色の周りに、異なる明るさや濃さのバリエーションを設定します。これらのシェードは、数値（50、100、200、300…900など）で管理されます。この数値は、色の明るさや濃さを示しており、数値が小さいほど明るく、大きいほど濃い色になります。
ColorSwatchの活用シーン
マテリアルデザインのテーマ設定
マテリアルデザインでは、1つのプライマリカラーに対して、複数のシェード（明るさや濃さの違い）を持つことが一般的です。例えば、青色を基準としたカラーパレットには、Colors.blue[500] という基準色があり、それ以外にも Colors.blue[100] や Colors.blue[900] のような明るさの異なるシェードが用意されています。
アプリ全体で一貫性のあるカラーパレットを構築
ColorSwatchを使うことで、アプリケーション内の色の一貫性を保ちながら、必要に応じて異なる明るさや濃さの色を簡単に使い分けることができます。これにより、カスタムテーマを作成する場合でも、アプリ全体で統一されたデザインを提供できます。
Colors.blue の使用例：
Container(
color: Colors.blue[500], // 基準色（プライマリカラー）
child: Text('This is blue!'),
);
Container(
color: Colors.blue[100], // 明るいブルー
child: Text('This is light blue!'),
);
Container(
color: Colors.blue[900], // 濃いブルー
child: Text('This is dark blue!'),
);３．ColorScheme.fromSeed()
上記２では、ColorScheme.fromSwatch()によるカラーテーマを使用しましたが、Flutterでマテリアルデザイン3（Material You）に基づいたカラーテーマを使いたい場合、ColorScheme.fromSwatch()よりも、ColorScheme.fromSeed()がより適切な選択です。
ColorScheme.fromSeed() は、マテリアルデザイン3（Material You） に基づいてカラースキームを生成するための最新のコンストラクタです。マテリアル3では、ダイナミックカラーやシードカラーに基づくカラーパレット生成が特徴的です。このコンストラクタでは、1つのシードカラー（基準となる色）から自動的にカラーパレット全体が生成され、自動的に調和の取れた色の組み合わせを作成することができます。
ColorScheme.fromSeed() 使用例：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), // シードカラーに基づいてカラーパレットを生成
useMaterial3: true, // Material 3 を有効にする
),
home: Scaffold(
appBar: AppBar(
title: Text('Material 3 Theme'),
),
body: Center(
child: ElevatedButton(
onPressed: () {},
child: Text('Press me'),
),
),
),
);
}
}