この章では、MaterialAppへテーマを設定し、アプリ全体で使用する色や背景を整えます。個々のWidgetへ毎回色を指定するのではなく、共通のデザインルールを上位で定義することで、統一感のある画面を作れます。

5.1 Material Designとは何か

Material Designは、画面の色、文字、ボタン、余白、動きなどを体系化したデザインの考え方です。Flutterでは、MaterialAppをアプリの最上位に配置することで、Material Designに対応したWidgetを利用できます。

たとえば、Scaffold、FilledButton、IconButton、CircularProgressIndicatorなどは、テーマに設定された色や形状を参照して表示されます。

テーマを設定すると、画面ごとに同じ色を繰り返し指定する必要がありません。後からアプリ全体の色を変更するときも、テーマの設定を修正するだけで多くのWidgetへ反映できます。

5.2 Material 3を有効にする

今回のアプリでは、Material Designの新しい仕様であるMaterial 3を利用します。

theme: ThemeData(
  useMaterial3: true,
),

useMaterial3をtrueにすると、Material 3に対応したボタン、配色、角の丸みなどが適用されます。

Material 3を使用しても、すべての画面が自動的に完成するわけではありません。アプリ全体の基本ルールをMaterial 3へ切り替え、その上で各Widgetの配置やサイズを調整していきます。

5.3 カラースキームを設定する

アプリ全体で使用する色の組み合わせは、ColorSchemeで管理します。今回は、黒に近い色を基準として、落ち着いた配色を生成します。

colorScheme: ColorScheme.fromSeed(
  seedColor: const Color(0xFF151515),
  brightness: Brightness.light,
),

ColorScheme.fromSeed()は、指定した基準色から、ボタン、背景、文字、選択状態などに使用する関連色を生成します。

seedColorは配色の基準となる色です。Color(0xFF151515)では、先頭のFFが不透明度、その後の151515が赤、緑、青の強さを表します。

brightnessへBrightness.lightを指定すると、明るい背景を前提とした配色になります。暗い画面を作る場合は、Brightness.darkを使用します。

5.4 背景色を設定する

画面の基本背景色は、scaffoldBackgroundColorで指定します。

scaffoldBackgroundColor: const Color(0xFFF5F5F3),

この色は完全な白ではなく、わずかに温かみのある明るいグレーです。今後作成する3Dモデルの表示領域と区別しつつ、画面全体を柔らかい印象にします。