CONTENT
ここから
この章では、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モデルの表示領域と区別しつつ、画面全体を柔らかい印象にします。
この設定は、テーマを参照するすべてのScaffoldへ適用されます。各画面のScaffoldへ同じ背景色を個別に書く必要はありません。
5.5 デバッグバナーを非表示にする
デバッグ実行中のFlutterアプリには、通常、画面右上にDEBUGと書かれたバナーが表示されます。
debugShowCheckedModeBanner: false,
この設定によって、開発中でも完成画面に近い状態でUIを確認できます。ただし、バナーを消してもデバッグモード自体が解除されるわけではありません。
あわせて、titleへアプリ名を設定します。
title: '3D Model Viewer',
titleはアプリを識別するための情報です。通常、スマートフォンの画面上へ直接表示される見出しではありません。
5.6 この章で完成するコード
lib/main.dartを次の内容へ更新します。
import 'package:flutter/material.dart';
/// アプリケーションを起動します。
///
/// 入力: なし
/// 出力: Flutterアプリケーションを画面へ描画します。
void main() {
runApp(const ModelViewerApp());
}
/// 3Dモデルビューアー全体のテーマと初期画面を定義します。
class ModelViewerApp extends StatelessWidget {
const ModelViewerApp({super.key});
/// アプリケーションのルートWidgetを構築します。
///
/// 入力: [BuildContext]
/// 出力: Material Designを適用した[Widget]
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: '3D Model Viewer',
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
seedColor: const Color(0xFF151515),
brightness: Brightness.light,
),
scaffoldBackgroundColor: const Color(0xFFF5F5F3),
),
home: const Scaffold(
body: Center(
child: Text('3D Model Viewer'),
),
),
);
}
}
アプリを保存して再読み込みし、DEBUGバナーが消え、背景が明るいグレーへ変わることを確認します。
5.7 テーマと各Widgetの関係
テーマは、アプリの上位にあるMaterialAppから、その内側に配置されたWidgetへ引き継がれます。この仕組みにより、後から追加する画面やボタンも同じデザインルールを利用できます。
特定のWidgetだけ見た目を変更したい場合は、そのWidgetへ個別の設定を追加できます。ただし、共通して使用する色や文字設定は、できる限りテーマへまとめる方が管理しやすくなります。
5.8 この章の到達目標
この章の終了時点で、次の内容を確認します。
ThemeDataがアプリ全体のデザインを管理することを説明できる- Material 3を有効にできる
ColorScheme.fromSeed()の役割を理解しているScaffoldの共通背景色を設定できる- デバッグバナーを非表示にできる
- テーマが内側のWidgetへ引き継がれることを理解している
次章では、3Dモデルを表示する専用画面を作成し、タイトルと表示領域を配置します。