[Flutter] MaterialAppって何？

2023年4月18日2023年6月12日

FlutterはGoogleが開発したUIフレームワークで、クロスプラットフォームアプリケーションの開発に使用されます。Flutterはウィジェットツリーを使用してUIを構築します。そして、MaterialAppはFlutterのウィジェットの1つで、Material Designを使用してアプリケーションの外観を定義するために使用されます。

MaterialAppはFlutterアプリケーションの最上位に配置され、アプリケーション全体で共有するテーマやルートページを指定することができます。MaterialAppの主な目的は、アプリケーションのテーマを設定し、アプリケーション内でルートとなるウィジェットを定義することです。

それでは、MaterialAppの使い方について解説していきます。

MaterialAppを使用する手順

まずは、MaterialAppを使用するために必要なパッケージをインポートします。以下のコードをファイルの先頭に記述してください。

import 'package:flutter/material.dart';

次に、MaterialAppを作成します。以下のコードを使用して、MaterialAppを作成してください。

MaterialApp(
  title: 'MyApp',
  home: MyHomePage(),
);

上記のコードでは、アプリケーションのタイトルを”MyApp”に設定し、homeプロパティにMyHomePageウィジェットを設定しています。homeプロパティは、アプリケーションのルートウィジェットを定義するために使用されます。ここでは、MyHomePageをルートウィジェットとして設定しています。

MaterialAppのプロパティ

MaterialAppは様々なプロパティを持っています。以下は、MaterialAppで使用できる主なプロパティです。

title: アプリケーションのタイトルを指定します。
home: アプリケーションのルートページを指定します。
routes: 名前付きルートと対応するページのマップを指定します。
initialRoute: アプリケーションが開始されたときに表示されるページの名前付きルートを指定します。
onGenerateRoute: 名前付きルートが見つからなかった場合に呼び出される関数を指定します。
theme: アプリケーションのテーマを設定します。
debugShowCheckedModeBanner: デバッグモードのバナーを表示するかどうかを指定します。

titleを設定した際の表示位置

titleプロパティは、アプリケーションのタイトルバーに表示されます。ただし、表示の仕方はプラットフォームごとに異なります。

PC（Windows、macOS、Linux）: PCの場合、titleプロパティはアプリケーションのウィンドウのタイトルバーに表示されます。一般的には、ウィンドウの上部にあるバーの中央に表示されます。
iOS: iOSの場合、titleプロパティはアプリケーションのナビゲーションバーに表示されます。ナビゲーションバーは画面上部にあり、通常は左上に戻るボタン（バックボタン）が表示される場所です。
Android: Androidの場合、titleプロパティはアプリケーションのアクションバー（Action Bar）またはアプリバー（App Bar）に表示されます。アクションバーは画面上部にあり、アプリケーションのタイトルやメニューアイコンが表示される場所です。

これらのプロパティは、プラットフォームのデフォルトの動作に基づいて表示されるため、特定のプラットフォームに依存せず、クロスプラットフォームなアプリケーションのタイトルを設定するのに便利です。

titleに設定する文言のローカリゼーションについて

作成するアプリケーションのtitle表示を地域や言語で分けたいとき、ローカリゼーションの設定を行い、表示内容の出しわけを行います。他のウィジットでのローカライズと異なり、titleのローカライズを行いたい場合はMaterialAppの初期化を事前に実施しておく必要があり、一手間必要です。titleプロパティのローカリゼーションについては別記事に記載していますので、そちらを参考にしてみて下さい。

MaterialAppの例

以下は、MaterialAppの例です。この例では、アプリケーションのタイトルを”MyApp”に設定し、ルートウィジェットをMyHomePageに設定しています。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MyHomePage'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

まとめ

MaterialAppはFlutterアプリケーションのルートとなるウィジェットであり、アプリケーションのテーマやルートページを指定するために使用されます。MaterialAppは、Flutterのウィジェットの1つで、Material Designを使用してアプリケーションの外観を定義します。上記の例を参考にして、自分のアプリケーションにMaterialAppを組み込んで、アプリケーションの外観を設定してください。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！