前回のレッスンでFlutter開発環境のインストールを済ませたと思います。今回の講座ではAndroid Studioを使ってFlutterアプリを開発していきます。
Flutterプラグインをインストールする
デフォルトの状態ではAndroid StudioはFlutterに対応していないため、Flutter用のプラグインを別途インストールする必要があります。
Android Studioを起動したら、上部メニューの File → Settings（ショートカットキー：Ctrl+Alt+S）を開きます。
左側のプラグインタブを選択し、flutterで検索してインストールをクリック。インストール完了後、Android Studioを再起動してください。
Flutter SDKのパスを設定する
プラグインを導入しただけでは動作しないため、Android Studio内でFlutter SDKの保存先パスを指定する必要があります。
File → Settings → Languages & Frameworks → Flutter
ファイル 設定 言語とフレームワーク flutter
flutterのルートフォルダを指定し、binフォルダまで指定しないでください。設定後はapplyボタンをクリックします。
自動でインストールと設定処理が完了するまで待機します。
プロジェクトを作成する
ここから先は通常のAndroid Studioでのプロジェクト作成手順と同じ操作になります。
Flutterテンプレートを選択し、右側でFlutterのディレクトリを再確認したらNextをクリックします。
続いてプロジェクト情報を入力します。プロジェクト名、保存先フォルダ、説明文、組織IDを記載します。組織IDは一意の値にする必要があり、後でGoogle Playに公開する場合はドメインを逆順に記述するのが一般的です。本記事ではcom.foxdevelop.プロジェクト名という形式で記載しています。次にAndroidネイティブ言語を選択します。こちらはAndroidアプリの下地に使われる言語で、開発コード自体はDartで記述します。Platforms欄にはビルド・公開したい対象プラットフォームをチェックします。今回はAndroid、Web、Windowsデスクトップアプリを出力するため該当項目にチェックを入れています。iOS、Linux、macOS向けに開発する場合は残り3つの項目にチェックを追加し、最後にCreateボタンを押します。
注意：プロジェクト名は小文字英字のみ使用し、スペースや特殊記号を含めてはいけません。
Android Studioがプロジェクトファイルの生成を開始します。この処理には少し時間がかかります。
こちらの手順でエラーが発生したので紹介します。
Run Flutter Doctorを実行し、Flutterの環境診断ツールで不具合を確認します。
診断後はプロジェクトを正常に開けますが、別の問題が発生します。
右上の実行ボタンからプロジェクトを起動できない状態が下記の通りです。
テーマカラーを変更したため、スクリーンショットのAndroid Studioはライトモードになっています。
画像に赤い×マークが表示されているのでクリックします。
実行構成の編集を選択します。
Dart SDKのパスが未設定であると警告が出るので、右側のFixボタンをクリックします。
Dart SDKのフォルダを指定します。Flutterをインストールしていれば、DartはFlutter SDK内に同梱されています。
例えばFlutter SDKのパスが下記の場合、
対応するDart SDKのパスはこちらになります。
上記の画像を参考にDart SDKを設定し、Android Studioを再起動してください。
再起動後、上部ツールバーに緑色の再生ボタンが表示されます。横のドロップダウンにWindows desktopと表示されており、Windowsデスクトップアプリとして実行可能です。緑の再生ボタンをクリックするとプロジェクトが起動します。
※よくあるエラーと対処法
下記のエラーが発生していない場合はこの項目を飛ばして構いません。
上記のエラーはパッケージ依存関係のダウンロードが失敗した際に発生し、ネットワーク環境が原因の場合が多いです。ミラーサイトを利用することで解消できます。
この依存関係エラーが出た際は、画像を参考にAndroid Studio内蔵ターミナルにミラー設定コマンドを入力します。
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
flutter pub cache repair
flutter pub getCode language: PHP (php)コマンド実行完了後、コードに関するすべてのエラーが消えます。
プロジェクトを起動する
左上の緑色再生ボタンをクリックしてプロジェクトを実行します。Flutterはマルチプラットフォームに対応しており、開発者オプションを有効にしたスマホをPCに接続してAndroidアプリをデバッグするか、Windows Desktopをデバッグ先として実行できます。
画像のドロップダウンにはプロジェクト作成時に選択した3つのプラットフォームが表示されます。今回はWindows desktopを選択し、緑の再生ボタンでアプリを起動します。
上記のウィンドウが今回作成した初めてのFlutterアプリとなります。本講座はここまでです。実際に操作して試してみてください。何か不具合や疑問点があれば下部にコメントを残してください。