CONTENT
ここから
この章では、Flutterアプリが起動してから最初の画面を表示するまでの流れを実装します。3Dモデルの表示はまだ行わず、まずは文字だけの画面を作り、アプリの基本構造を理解します。
4.1 main.dartの役割
Flutterアプリを起動すると、最初にlib/main.dartが読み込まれます。このファイルには、アプリの開始地点となるmain()関数と、アプリ全体の土台となるWidgetを記述します。
処理の流れは次のとおりです。
main()関数が呼び出されるrunApp()へ最初のWidgetを渡す- FlutterがWidgetの構造を読み取る
build()が画面を組み立てる- 指定した最初の画面が端末へ表示される
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で生成すると、不要な再生成を減らしやすくなります。
4.4 StatelessWidgetを理解する
アプリ全体の土台となるModelViewerAppは、StatelessWidgetを継承して作成します。
/// 3Dモデルビューアー全体の基本構造を定義します。
class ModelViewerApp extends StatelessWidget {
const ModelViewerApp({super.key});
/// アプリケーションのルートWidgetを構築します。
///
/// 入力: [BuildContext]
/// 出力: Material Designを適用した[Widget]
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text('3D Model Viewer'),
),
),
);
}
}
StatelessWidgetは、Widget自身の内部に変化する状態を持たない画面部品を作るための基底クラスです。
ModelViewerAppは、アプリ全体の設定と最初の画面を決める役割を持ちますが、自身の状態を変更する必要はありません。そのため、ここではStatelessWidgetを使用します。
コンストラクターのsuper.keyは、Widgetを識別するための値を親クラスへ渡します。Flutterはこの値を利用して、Widgetが同じものか、別のものへ置き換わったのかを判断します。
4.5 build()でWidgetを返す
StatelessWidgetを継承したクラスでは、build()を実装する必要があります。
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text('3D Model Viewer'),
),
),
);
}
build()は、画面に何を表示するかをWidgetとして返すメソッドです。
BuildContextには、現在のWidgetがWidgetツリーのどこに存在するかという情報が含まれています。後の章では、テーマや画面サイズなどを取得するときに利用します。
@overrideは、親クラスで定義されているメソッドを、このクラスで上書きしていることを示します。
4.6 最初の画面を指定する
MaterialAppは、FlutterでMaterial Designを利用するための土台です。画面遷移、テーマ、アプリ名、言語設定などを管理します。
homeには、アプリの起動時に最初に表示するWidgetを指定します。
home: Scaffold(
body: Center(
child: Text('3D Model Viewer'),
),
Scaffoldは、1画面分の基本構造を作るWidgetです。bodyへ画面の主要な内容を配置します。
Centerは子Widgetを画面中央へ配置し、Textは文字を表示します。Widgetを入れ子にすることで、表示内容と配置を組み立てていきます。
4.7 この章で完成するコード
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 const MaterialApp(
home: Scaffold(
body: Center(
child: Text('3D Model Viewer'),
),
),
);
}
}
保存後にアプリを起動し、画面中央へ「3D Model Viewer」と表示されることを確認してください。
完成版では、homeに3Dモデルを表示するModelViewerScreenを指定します。ただし、その画面は後の章で作成するため、現在は文字だけの画面を使用します。
4.8 この章の到達目標
この章の終了時点で、次の内容を確認します。
main.dartがアプリの開始地点だと説明できるmain()とrunApp()の役割を説明できる- Widgetが親子関係で構成されることを理解している
StatelessWidgetを使ったクラスを作成できるbuild()がWidgetを返すことを理解しているMaterialAppのhomeへ最初の画面を指定できる- 文字だけのFlutterアプリを起動できる
次章では、アプリ全体の色や背景を設定し、3Dモデルビューアーに適した外観へ整えます。