MaterialAppとは — ルートウィジェットの設定と役割

FlutterのMaterialAppとは？

MaterialAppはFlutterアプリケーションでMaterial Designを初期化するラッパーウィジェットです。Widget Treeのルートとなり、子ウィジェットにシステムサービス（ナビゲーション、テーマ、メディアクエリ、ローカライゼーション）へのアクセスを提供します。MaterialAppがないと、アプリケーションは標準のMaterialスタイルを持たず、Scaffold、AppBar、FloatingActionButton、BottomNavigationBarなどのウィジェットを使用できません。

MaterialAppがWidget Treeに追加するもの

MaterialAppを使用すると、Flutterは自動的にツリーのルートにいくつかの主要なウィジェットを追加します：Navigator（ナビゲーション用の画面スタック）、Theme（カラースキームとスタイル）、MediaQuery（デバイス情報）、Localizations（ローカライズされた文字列）、Directionality（テキストの方向）。これらのウィジェットはInheritedWidgetとして実装され、アプリケーションのどこからでもBuildContextを介してアクセスできます。

基本的な使用方法

MaterialAppの最小構成にはhomeパラメータのみが必要です — メイン画面に表示されるウィジェットです。FlutterはWidgetsBindingメカニズムを通じて、homeが既にScaffoldでない場合、自動的にScaffoldでラップします。runApp(MaterialApp(home: MyHomePage()))でアプリケーションを起動すると、FlutterはMaterialAppをルートとするルートWidget Treeを作成します。

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Application",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Roboto",
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

この例では、MaterialAppが基本テーマ（ライトとダーク）、タイトル、メイン画面を設定しています。titleパラメータはウィンドウタイトル（デスクトップ）とアクセシビリティに使用されます。themeとdarkThemeパラメータは異なるモードでのアプリケーションの外観を定義します。

MaterialAppの構造とパラメータ

MaterialAppは30以上のパラメータを受け入れ、これらはMaterial Design設定、ルーティング、テーマ設定、ローカライゼーション、エラー動作、プラットフォーム固有の設定に分類されます。主要なパラメータを理解することで、追加コードを書かずにアプリケーションを柔軟に設定できます。

主要な設定パラメータ

titleパラメータは、ウィンドウタイトルとアクセシビリティのためのアプリケーション名を設定します。colorはAndroidのタスクスイッチャー用のアプリケーションカラーを定義します。debugShowCheckedModeBannerはリリースビルドでデバッグモードバナーを非表示にします。showPerformanceOverlayはパフォーマンス情報のオーバーレイを有効にします。supportDarkThemeはアプリケーションがダークテーマをサポートするかどうかを示します。

プラットフォーム固有のパラメータ

MaterialAppは異なるプラットフォームでの動作を設定するパラメータを提供します：restorationScopeId（Androidでの再起動時にアプリケーション状態を保存）、scrollBehavior（異なるOSでのスクロール動作の設定）、useMaterial3（Material 3（Material You）の有効化）。Material 3は動的色、新しいコンポーネント、更新されたスタイルを追加します。

themeとdarkThemeによるテーマ設定

テーマ設定はMaterialAppの主要パラメータの1つです。themeパラメータはThemeDataオブジェクトを受け入れ、ライトテーマのカラーパレット、タイポグラフィ、コンポーネントの形状、アイコンを定義します。darkThemeパラメータはダークテーマの同等の設定です。Flutterはデバイスのシステム設定に基づいて自動的にテーマを切り替えます。

ThemeData: カラースキーム

ThemeDataにはprimarySwatch（メインカラー）、colorScheme（拡張Material 3カラースキーム）、brightness（ライトまたはダーク）、fontFamily（デフォルトフォント）、textTheme（テキストスタイル）、cardTheme、appBarTheme、buttonThemeなど、特定のコンポーネントをカスタマイズするための多数のパラメータが含まれます。Material 3にはcolorSchemeを、Material 2にはprimarySwatchを使用します。

Material 3の動的色

Material 3（Material You）はAndroid 12+でデバイスの壁紙から抽出される動的色をサポートしています。有効にするには、useMaterial3: trueを設定し、colorScheme.fromSeedまたはcolorScheme.fromImageProviderを使用します。動的色は自動的にprimary、secondary、tertiary、neutral、neutralVariantの5トーンの調和のとれたパレットを生成します。

ウィジェットでのテーマへのアクセス

任意のウィジェットはTheme.of(context)を介して現在のテーマにアクセスできます。Theme.ofはThemeDataオブジェクトを返し、colors、textThemeなどのパラメータを取得できます。テーマの変更（ライトモードとダークモードの切り替えなど）を購読するには、buildメソッド内でコンテキストを使用します — Flutterはテーマが変更されると自動的にウィジェットを再構築します。

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Themed text example",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

この例では、Theme.of(context)が最も近いMaterialAppから現在のテーマを取得します。背景色とテキストスタイルは自動的に現在のテーマ（ライトまたはダーク）に一致します。テーマが切り替わると、ContainerとTextは更新されたThemeDataの新しい値で再構築されます。

MaterialAppのルーティングとナビゲーション

MaterialAppはNavigatorを統合しています — 画面間の遷移を管理するスタックベースのナビゲーターです。initialRoute、routes、onGenerateRouteパラメータはFlutterがナビゲーションを処理する方法を決定します。Navigator.pushとNavigator.pushReplacementはプログラムで画面を切り替え、Navigator.popは戻ることを可能にします。

名前付きルート（routes）

routesパラメータはMap<String, WidgetBuilder>を受け入れます。キーはルート名（文字列）、値はその画面のウィジェットを作成する関数です。名前付きルートは静的ナビゲーションに便利です：'/'（ルートルート）は通常homeに対応し、'/settings'、'/profile'は他の画面です。Navigator.pushNamed(context, '/settings')で設定画面に移動します。

ルート生成（onGenerateRoute）

onGenerateRouteはroutesにルートが見つからない場合に呼び出される関数です。RouteSettingsを受け入れ、MaterialPageRouteを返します。このアプローチはルートがデータに依存する動的ナビゲーション（例：/user/42）に役立ちます。onGenerateRouteはルート名を解析し、パラメータを抽出して適切な画面を作成します。

ディープリンクと名前付きルーティング

ディープリンクをサポートするには、onGenerateInitialRouteとonGenerateRouteパラメータを一緒に使用します。ディープリンクを使用すると、URL（例：https://example.com/promo）を介してアプリケーションの特定の画面を開くことができます。FlutterはAndroid（intent filters経由）とiOS（universal links経由）でディープリンクを処理し、パスをonGenerateRouteに渡します。

MaterialApp(
  initialRoute: "/",
  routes: {
    "/": (context) => const HomePage(),
    "/settings": (context) => const SettingsPage(),
  },
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith("/user/") == true) {
      final userId = settings.name!.split("/").last;
      return MaterialPageRoute(
        builder: (_) => UserPage(userId: userId),
      );
    }
    return null;
  },
)

この例では、onGenerateRouteが/user/42のような動的ルートを処理します。ルートが静的なroutesに見つからず、動的パターンにも一致しない場合、Flutterはエラーページを表示します。これはonUnknownRouteでカスタマイズできます。

ローカライゼーションと国際化

MaterialAppはlocalizationsDelegatesとsupportedLocalesパラメータを通じて、組み込みのローカライゼーションサポートを提供します。LocalizationsDelegatesはローカライズされた文字列をロードし、supportedLocalesはアプリケーションがサポートする言語を決定します。Flutterはデバイスの言語を自動的に検出し、対応するローカライズされたリソースをロードします。

supportedLocalesとlocalizationsDelegatesの設定

supportedLocalesパラメータはアプリケーションがサポートするLocaleのリストを受け入れます：[const Locale('en'), const Locale('ru'), const Locale('de')]。localizationsDelegatesはローカライズされた文字列をロードするデリゲートのリストです。Material Designには、GlobalMaterialLocalizations.delegate、GlobalWidgetsLocalizations.delegate、GlobalCupertinoLocalizations.delegateを追加します。

アプリケーション文字列のローカライズ

独自の文字列をローカライズするには、flutter_localizationsまたはintlパッケージを介して作成されたAppLocalizationsクラスを使用します。AppLocalizationsはローカライズされた文字列にアクセスするための静的メソッドを提供します：AppLocalizations.of(context)!.helloMessage。MaterialAppは自動的にLocalizationsをWidget Treeに渡し、コンテキストを介してアクセス可能にします。

• flutter_localizations — Materialウィジェットとシステム文字列をローカライズするための公式パッケージ。
• intl — 国際化のためのパッケージ：数値、日付、通貨のフォーマットと複数形処理。
• ARBファイル — ローカライズされた文字列を保存する形式で、flutter_localizationsとintlで使用されます。

MaterialApp vs CupertinoApp vs WidgetsApp

Flutterは異なるプラットフォーム向けに3つのルートウィジェットを提供しています：MaterialApp（Androidとウェブ向けMaterial Design）、CupertinoApp（iOSスタイル）、WidgetsApp（スタイリングなしの基本ウィジェット）。ルートウィジェットの選択は、アプリケーション全体の外観とプラットフォーム固有のコンポーネントの利用可能性を決定します。

MaterialApp: ユニバーサルな選択

MaterialAppはMaterial Designのサポートによりほとんどのアプリケーションに適しており、Android、ウェブ、デスクトップで優れた外観を提供します。Material Designは豊富なコンポーネントライブラリを提供します：Scaffold、AppBar、BottomNavigationBar、Drawer、SnackBar、Dialogなど多数。MaterialAppは動的色を備えたMaterial 3もサポートしています。

CupertinoApp: iOSスタイル

CupertinoAppはAppleのヒューマンインターフェイスガイドラインに従うCupertino Designを使用します。CupertinoPageScaffold、CupertinoNavigationBar、CupertinoTabBarなどのiOSスタイルのコンポーネントを提供します。iOSアプリケーションや全てのプラットフォームでAppleスタイルに従うアプリケーションにはCupertinoAppを使用します。

WidgetsApp: 最小限のルート

WidgetsAppはスタイリングなしの基本ルートウィジェットです。Navigator、MediaQuery、Localizationsを追加しますが、テーマやMaterial/Cupertinoコンポーネントは提供しません。WidgetsAppはカスタムデザインシステム、ゲーム、またはMaterialやCupertinoが過剰な独自スタイルのアプリケーションに適しています。