CONTENT
ここから
この章では、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を使用します。
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('3D MODEL'),
SizedBox(height: 14),
Text('3Dモデル表示領域'),
],
)
crossAxisAlignmentをCrossAxisAlignment.startにすると、子Widgetが左側へそろいます。
SizedBoxは、Widget間に一定の空間を作るために使用します。
6.6 タイトルとモデル名を表示する
画面上部には、小さな分類名と、大きなモデル名を表示します。
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'3D MODEL',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
letterSpacing: 1.8,
),
),
SizedBox(height: 3),
Text(
'Astronaut',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
),
),
],
)
fontSizeは文字の大きさ、fontWeightは文字の太さを表します。letterSpacingを指定すると、文字同士の間隔を調整できます。
この段階ではモデル名を直接記述します。後の章で、モデルURLや名前を管理する専用クラスへ移動します。
6.7 Expandedで表示領域を確保する
3Dモデルの表示領域には、タイトル以外の残りの高さを使用します。そのためにExpandedを使います。
Expanded(
child: ColoredBox(
color: Color(0xFFE8E8E5),
child: Center(
child: Text('ここに3Dモデルを表示します'),
),
),
)
Expandedは、ColumnやRowの中で利用できるWidgetです。固定サイズのWidgetを配置したあと、残った空間を自動的に埋めます。
端末の画面サイズが変わっても、3D表示領域が利用可能な高さに合わせて伸縮します。
6.8 この章で完成するコード
lib/screens/model_viewer_screen.dartを次の内容にします。
import 'package:flutter/material.dart';
/// 3Dモデルを表示する画面の基本レイアウトを定義します。
class ModelViewerScreen extends StatelessWidget {
const ModelViewerScreen({super.key});
/// 画面全体のUIを構築します。
///
/// 入力: [BuildContext]
/// 出力: タイトルと3Dモデル表示領域を含む[Widget]
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 14, 16, 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'3D MODEL',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w700,
letterSpacing: 1.8,
),
),
SizedBox(height: 3),
Text(
'Astronaut',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
),
),
],
),
const SizedBox(height: 14),
const Expanded(
child: ColoredBox(
color: Color(0xFFE8E8E5),
child: Center(
child: Text('ここに3Dモデルを表示します'),
),
),
),
],
),
),
),
);
}
}
続いて、main.dartから新しい画面を読み込みます。
import 'package:flutter/material.dart';
import 'package:flutter_3d_model_viewer/screens/model_viewer_screen.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 MaterialApp(
debugShowCheckedModeBanner: false,
title: '3D Model Viewer',
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
seedColor: const Color(0xFF151515),
brightness: Brightness.light,
),
scaffoldBackgroundColor: const Color(0xFFF5F5F3),
),
home: const ModelViewerScreen(),
);
}
}
アプリを起動し、上部にタイトルとモデル名、その下に大きな表示領域が現れることを確認します。
6.9 この章の到達目標
この章の終了時点で、次の内容を確認します。
- 画面を別ファイルへ分割できる
ScaffoldとSafeAreaの役割を説明できるPaddingで画面の余白を設定できるColumnでWidgetを縦に配置できるExpandedで残りの領域を使用できるmain.dartから専用画面を表示できる
次章では、3DモデルのURL、表示名、クレジット情報を画面から分離して管理します。