CONTENT
ここから
2.1 Flutterの開発環境を確認する
アプリの実装を始める前に、Flutterを実行できる開発環境が整っているか確認します。Flutterアプリの開発には、Flutter SDK、Dart SDK、コードエディター、実行対象となる端末が必要です。
コードエディターには、Visual Studio CodeやAndroid Studioなどを利用できます。あわせて、Flutter用の拡張機能を導入しておくと、入力補完、エラー表示、デバッグ実行などが使いやすくなります。
実行対象には、Androidエミュレーター、iOSシミュレーター、実際のスマートフォンがあります。3Dモデルの表示や指による操作は端末環境の影響を受けることがあるため、最終的には実機でも確認します。
開発を始める前に、Flutterの診断機能を使い、必要なツールやライセンスに問題がないことを確認してください。
2.2 新しいプロジェクトを作成する
Flutterプロジェクトを作成すると、アプリを動かすために必要なフォルダと設定ファイルが自動的に用意されます。
プロジェクト名には、英小文字、数字、アンダースコアを使用します。今回の教材では、3Dモデルビューアーであることが分かる名前を使用します。
作成先のフォルダには、日本語や空白を含まないパスを選ぶと、ツールや外部パッケージに起因する問題を避けやすくなります。また、既存のファイルが入ったフォルダではなく、新しい作業用フォルダを用意してください。
プロジェクトの作成が完了したら、コードエディターでプロジェクト全体を開きます。特定のファイルだけを開くのではなく、プロジェクトの最上位フォルダを開くことが重要です。
2.3 プロジェクトのフォルダ構成を理解する
Flutterプロジェクトには、役割の異なる複数のフォルダがあります。
libフォルダには、Dartで記述するアプリ本体のプログラムを配置します。この教材で主に編集するのも、このフォルダです。
androidとiosには、それぞれのOSでアプリを動かすための設定が入っています。通常の画面実装では頻繁に変更しませんが、権限やアプリ名など、OS固有の設定が必要になったときに使用します。
testには、自動テストのためのファイルを配置します。buildは、アプリの実行やビルド時に自動生成されるフォルダです。基本的に、開発者が直接編集する必要はありません。
プロジェクトの最上位にあるpubspec.yamlでは、アプリ名、バージョン、Dartの実行条件、利用するパッケージなどを管理します。今回のプロジェクトでは、Dart SDK 3.11以上4.0未満が指定されています。fileciteturn0file0L1-L8
2.4 アプリを初めて起動する
プロジェクトを作成した直後は、Flutterが用意したサンプルアプリが入っています。まずは内容を書き換えずに起動し、開発環境が正常に動くことを確認します。
実行前に、使用するエミュレーター、シミュレーター、または実機を選択します。起動に成功すると、選択した端末にサンプル画面が表示されます。
この段階でエラーが発生した場合は、教材の実装へ進む前に解決してください。環境設定の問題を残したままコードを変更すると、設定上のエラーとプログラム上のエラーを区別しにくくなります。
2.5 変更が画面へ反映される仕組みを確認する
Flutterには、アプリを起動したまま変更内容を反映できるホットリロードがあります。画面の文字、余白、色などを変更した場合、アプリを最初から起動し直さなくても、変更後の表示を素早く確認できます。
一方、アプリの起動処理や初期状態に関わる変更では、ホットリスタートや完全な再起動が必要になる場合があります。変更したのに表示が変わらないときは、ホットリロードだけでなく再起動も試してください。
2.6 この章の到達目標
この章の終了時点で、次の内容を確認できれば準備完了です。
- Flutterの診断で重大な問題が表示されていない
- 開発用の端末を選択できる
- Flutterプロジェクト全体をエディターで開いている
libとpubspec.yamlの役割を説明できる- 初期状態のアプリを起動できる
- ホットリロードで画面の変更を確認できる
次章では、3Dモデルを表示するために必要な外部パッケージをプロジェクトへ追加します。