この章では、3Dモデルを表示する専用画面を作成します。まだモデル自体は読み込まず、画面タイトル、モデル名、表示領域を配置します。

先にレイアウトだけを完成させることで、3D表示に問題が起きた場合も、画面構造とモデル読み込み処理を分けて確認できます。

6.1 画面用ファイルを作成する

libの中にscreensフォルダを作成し、その中へmodel_viewer_screen.dartを追加します。

lib/
├── main.dart
└── screens/
    └── model_viewer_screen.dart

main.dartはアプリ全体の設定、model_viewer_screen.dartは3Dモデル画面の表示を担当します。役割ごとにファイルを分けると、コードが増えても修正箇所を見つけやすくなります。

6.2 画面の土台を作る

今回は、まだ変化する状態を扱わないため、StatelessWidgetとして画面を作成します。

import 'package:flutter/material.dart';

/// 3Dモデルを表示する画面の基本レイアウトを定義します。
class ModelViewerScreen extends StatelessWidget {
  const ModelViewerScreen({super.key});

  /// 画面全体のUIを構築します。
  ///
  /// 入力: [BuildContext]
  /// 出力: 3Dモデル表示領域を含む[Widget]
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('Model Viewer Screen'),
      ),
    );
  }
}

Scaffoldは、1画面分の基本構造を作るWidgetです。今後、このbodyの中へタイトルや3Dビューアーを配置します。

6.3 SafeAreaで表示領域を保護する

スマートフォンには、ステータスバー、ノッチ、ホームインジケーターなどがあります。SafeAreaを使用すると、これらと画面内容が重ならないように余白が確保されます。

return Scaffold(
  body: SafeArea(
    child: Text('Model Viewer Screen'),
  ),
);

端末ごとに画面形状が異なるため、画面全体を作るときはSafeAreaを利用すると安全です。

6.4 画面全体へ余白を付ける

画面端に文字や3Dモデルが密着しないように、Paddingを追加します。

Padding(
  padding: const EdgeInsets.fromLTRB(16, 14, 16, 16),
  child: Text('Model Viewer Screen'),
)

EdgeInsets.fromLTRB()は、左、上、右、下の順に余白を指定します。今回は左右に16、上に14、下に16の余白を設定しています。

6.5 Columnで縦方向に配置する

画面には、上部のタイトルと、その下の3D表示領域を配置します。縦方向にWidgetを並べる場合はColumnを使用します。