CONTENT
ここから
Flutterには、画面表示やボタンなどの基本機能が標準で用意されています。一方、3Dモデルの表示、HTTP通信、端末内へのファイル保存といった専門的な機能は、外部パッケージを利用することで効率よく実装できます。
この章では、パッケージを管理するpubspec.yamlの役割を理解し、3Dモデルビューアーに必要なパッケージをプロジェクトへ追加します。
3.1 pubspec.yamlの役割
pubspec.yamlは、Flutterプロジェクト全体の設定を管理するファイルです。アプリ名、バージョン、対応するDart SDK、外部パッケージ、画像やフォントなどのアセット情報を記述します。
YAML形式では、行の先頭にある空白がデータの階層を表します。そのため、インデントがずれると、内容が正しくてもエラーになることがあります。通常は半角スペース2文字で階層をそろえ、タブ文字は使用しません。
今回のプロジェクトでは、Dart SDK 3.11以上4.0未満を利用する設定になっています。fileciteturn0file0L7-L8
environment:
sdk: '>=3.11.0 <4.0.0'
3.2 必要なパッケージを追加する
このアプリでは、次の3つの外部パッケージを使用します。
flutter_3d_controllerは、GLBやGLTFなどの3DモデルをFlutterの画面内に表示するためのパッケージです。モデルの回転、拡大・縮小、カメラ位置の変更などを扱います。
httpは、インターネット上のデータやファイルを取得するためのパッケージです。今回の完成プログラムでは将来のダウンロード処理に備えて登録されています。
path_providerは、アプリが端末内へファイルを保存するときに、適切な保存先を取得するためのパッケージです。モデルを端末内へ保存し、再利用する機能を実装するときに使用します。
添付プログラムでは、次のバージョンが指定されています。fileciteturn0file0L10-L16
dependencies:
flutter:
sdk: flutter
flutter_3d_controller: ^2.3.0
http: ^1.6.0
path_provider: ^2.1.5
バージョン番号の前にある^は、互換性が保たれる範囲で新しいバージョンを利用できる指定です。ただし、将来の更新によって動作やAPIが変わる可能性があります。教材を進める間は、添付プログラムと同じバージョンを使用します。
3.3 依存パッケージを取得する
pubspec.yamlへパッケージ名を書いただけでは、まだプロジェクト内で使用できません。ターミナルでプロジェクトの最上位フォルダへ移動し、次のコマンドを実行します。
flutter pub get
このコマンドは、pubspec.yamlを読み取り、必要なパッケージと、それらが内部で利用している関連パッケージを取得します。
取得された正確なバージョン情報は、pubspec.lockへ記録されます。このファイルによって、別の開発環境でも同じ構成を再現しやすくなります。通常は内容を直接編集せず、Flutterのコマンドに管理を任せます。
3.4 Dartファイルからパッケージを利用する
取得したパッケージは、使用するDartファイルでimportすると利用できます。3Dモデルを表示する画面では、次のように読み込みます。
import 'package:flutter_3d_controller/flutter_3d_controller.dart';
importは、そのファイル内で外部のクラスや関数を使用可能にする宣言です。パッケージをpubspec.yamlへ追加していても、必要なファイルでimportしていなければ利用できません。
httpやpath_providerも、実際に通信処理や保存処理を実装するファイルで読み込みます。使用していない段階でimportすると警告が表示されるため、必要になった時点で追加します。
3.5 パッケージ導入時のエラーを確認する
パッケージを追加したあとにエラーが出た場合は、まずpubspec.yamlのインデント、パッケージ名、バージョン番号を確認します。
代表的な原因には、次のようなものがあります。
dependenciesの位置が間違っている- 半角スペースではなくタブを使用している
- パッケージ名を誤って入力している
- Dart SDKとパッケージの対応条件が合っていない
flutter pub getを実行していない- エディターが古い解析結果を保持している
設定を修正したら、再度パッケージを取得します。
flutter pub get
それでもエラーが消えない場合は、アプリを停止して再起動します。必要に応じて、生成済みファイルを整理してから取得し直します。
flutter clean
flutter pub get
flutter cleanは生成済みのビルドデータを削除するコマンドです。ソースコードそのものは削除されませんが、通常は単純な入力ミスや設定ミスを先に確認してください。
3.6 この章の到達目標
この章の終了時点で、次の内容を確認します。
pubspec.yamlの役割を説明できる- YAMLではインデントが重要だと理解している
- 3つのパッケージの用途を説明できる
flutter pub getを正常に実行できる- Dartファイルでパッケージをimportする意味を説明できる
- パッケージ導入時の基本的なエラーを確認できる
次章では、
main.dartを編集し、Flutterアプリが起動する仕組みを確認します。