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