この章では、Flutterアプリが起動してから最初の画面を表示するまでの流れを実装します。3Dモデルの表示はまだ行わず、まずは文字だけの画面を作り、アプリの基本構造を理解します。

4.1 main.dartの役割

Flutterアプリを起動すると、最初にlib/main.dartが読み込まれます。このファイルには、アプリの開始地点となるmain()関数と、アプリ全体の土台となるWidgetを記述します。

処理の流れは次のとおりです。

1. main()関数が呼び出される
2. runApp()へ最初のWidgetを渡す
3. FlutterがWidgetの構造を読み取る
4. build()が画面を組み立てる
5. 指定した最初の画面が端末へ表示される

Flutterでは、画面、文字、余白、ボタンなど、UIを構成するほぼすべての要素をWidgetとして扱います。

4.2 main()関数を作成する

Dartでは、プログラムの開始地点をmain()関数で表します。Flutterアプリでも、この仕組みは同じです。

/// アプリケーションを起動します。
///
/// 入力: なし
/// 出力: Flutterアプリケーションを画面へ描画します。
void main() {
  runApp(const ModelViewerApp());
}

voidは、この関数が値を返さないことを示します。

main()の中では、runApp()を呼び出しています。ここで渡しているModelViewerAppが、アプリの最上位に配置されるWidgetです。

4.3 runApp()でアプリを起動する

runApp()は、指定されたWidgetをFlutterの画面へ接続する関数です。

runApp(const ModelViewerApp());

Flutterは、ここで渡されたWidgetを起点に、内部に含まれるWidgetを順番に構築します。この親子関係をWidgetツリーと呼びます。

constは、生成するWidgetの内容が変化しないことをFlutterへ伝える指定です。変更されないWidgetをconstで生成すると、不要な再生成を減らしやすくなります。