CONTENT
ここから
この章では、3DモデルのURL、表示名、クレジット表記を画面のコードから分離します。
設定値を専用ファイルへまとめると、別のモデルへ変更するときに画面全体を探す必要がありません。また、画面のレイアウトとデータの管理を分けることで、それぞれの役割が明確になります。
7.1 設定値を分離する理由
前章では、モデル名のAstronautを画面へ直接記述しました。このような値を複数箇所へ書くと、モデルを変更した際に修正漏れが発生する可能性があります。
たとえば、モデル名だけを変更してURLを変更し忘れると、画面上の名前と実際に表示されるモデルが一致しません。
そこで、次の情報を一つのクラスへまとめます。
- 3Dモデルを取得するURL
- 画面に表示するモデル名
- モデルの配布元やライセンス表記
7.2 設定ファイルを作成する
libの中にconfigフォルダを作り、model_source.dartを追加します。
lib/
├── config/
│ └── model_source.dart
├── screens/
│ └── model_viewer_screen.dart
└── main.dart
configフォルダには、アプリの動作に必要な設定値を配置します。画面を作るscreensとは役割を分けて管理します。
7.3 ModelSourceクラスを作成する
model_source.dartへ、次の内容を記述します。
// lib/config/model_source.dart
/// 3Dモデルの取得元を管理します。
abstract final class ModelSource {
/// Google model-viewerのデモ用GLBモデルURLです。
static const String modelUrl =
'<https://modelviewer.dev/shared-assets/models/Astronaut.glb>';
/// 画面上に表示するモデル名です。
static const String displayName = 'Astronaut';
/// 配布元が指定するクレジット表記です。
static const String attribution = 'Astronaut by Poly · CC BY';
}
このクラスは、3Dモデルに関する情報だけを管理します。画面の配置や読み込み処理は含めません。
7.4 abstract final classを理解する
abstractを指定したクラスは、直接インスタンス化できません。そのため、次のようにオブジェクトを生成する使い方を防げます。
// ModelSourceは設定値だけを管理するため、生成して使用しません。
final ModelSource source = ModelSource();
finalは、別の場所で安易に継承や実装されることを制限します。
ModelSourceは状態を持つオブジェクトではなく、共通の設定値をまとめる入れ物です。そのため、インスタンスを生成しないabstract final classとして定義しています。
7.5 static constで定数を定義する
各設定値には、static constを付けています。
static const String displayName = 'Astronaut';
staticを付けると、オブジェクトを生成せず、クラス名から値を参照できます。
ModelSource.displayName
constは、実行中に値が変化しない定数であることを表します。モデル名やURLを固定値として管理することで、意図しない変更を防げます。
Stringは、値が文字列であることを明示しています。
7.6 モデルURLを定義する
modelUrlには、GLB形式の3Dモデルを取得するURLを指定します。
static const String modelUrl =
'<https://modelviewer.dev/shared-assets/models/Astronaut.glb>';
GLBは、3Dモデルの形状、材質、画像などを一つのファイルへまとめられる形式です。
今回のURLは外部サイト上のファイルを参照するため、表示時にはインターネット接続が必要です。また、外部URLは将来変更や停止が発生する可能性があります。本番アプリでは、自分が管理できる保存先やアプリ内アセットの利用も検討します。
7.7 画面から設定値を参照する
model_viewer_screen.dartで、設定ファイルを読み込みます。
import 'package:flutter_3d_model_viewer/config/model_source.dart';
前章で直接記述していたモデル名を、次のように変更します。
const Text(
ModelSource.displayName,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
),
)
画面下部へクレジット表記も追加します。
const Center(
child: Text(
ModelSource.attribution,
style: TextStyle(
color: Color(0xFF777777),
fontSize: 11,
),
),
)
現時点では、モデルURLをまだ使用しません。次章で3Dビューアーを配置するときに、ModelSource.modelUrlを読み込み元として指定します。
7.8 この章の完成コード
model_viewer_screen.dartを次のように更新します。
import 'package:flutter/material.dart';
import 'package:flutter_3d_model_viewer/config/model_source.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(
ModelSource.displayName,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
),
),
],
),
const SizedBox(height: 14),
const Expanded(
child: ColoredBox(
color: Color(0xFFE8E8E5),
child: Center(
child: Text('ここに3Dモデルを表示します'),
),
),
),
const SizedBox(height: 10),
const Center(
child: Text(
ModelSource.attribution,
style: TextStyle(
color: Color(0xFF777777),
fontSize: 11,
),
),
),
],
),
),
),
);
}
}
アプリを起動し、モデル名とクレジット表記がこれまでと同じように表示されることを確認します。見た目が変わっていなくても、内部では設定値の管理場所が整理されています。
7.9 この章の到達目標
この章の終了時点で、次の内容を確認します。
- 設定値を画面から分離する理由を説明できる
configフォルダの役割を理解しているabstract final classを設定値の管理に利用できるstatic constの意味を説明できる- クラス名から定数を参照できる
- モデル名、URL、クレジットを一箇所で管理できる
次章では、
ModelSource.modelUrlを使って、実際の3Dモデルを画面へ表示します。