こんにちは!
今回は、VSCodeでFlutterプロジェクトを立ち上げて、iOS SimulatorとAndroidエミュレーターでアプリを起動するまでの手順を紹介していきます。
例として、Flutterプロジェクトを立ち上げた際に、デフォルトで入っているカウンターアプリを起動していこうと思います。
目次
環境
前提として、Flutter・ VSCode・Xcode・Androidエミュレーターはインストール済みとして進めていきます。
今回の環境
- Flutter: 3.3.3
- VSCode: バージョン1.71
- Android Studio Dolphin | 2021.3.1
- Xcode: 14.0.1
VSCodeでプロジェクトを立ち上げる
まずは、Flutterの新規プロジェクトを作っていきます。
VSCodeを新規で立ち上げます。
![vscode初期画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-16.11.03.png)
「cmd + shift + p」を押すと下記のようにコマンドパレットが表示するので、「flutter」と入力しましょう。
そうすると以下のように表示されるので「Flutter: New Project」をクリックしてください。
![vscodeのflutterプロジェクト作成画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-18.52.48-1.png)
注意点!
「flutter」と入力して何も出てこなかった場合は、Flutterのプラグインがないからでしょう。
以下のように、VSCodeの一番左の上から4番目のアイコンをクリックし、「flutter」と入力してください。そして表示された拡張機能の「有効にする」をクリックしてください。そうするとコマンドパレットから「Flutter: New Project」を選択できるようになります。
![vscodeのflutterプラグイン画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-16.54.08-1-1024x277.png)
次に以下のように表示されるので、一番上の「Application」をクリックしてください。
![vscodeのflutterプロジェクト作成画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-16.20.54.png)
Finderが表示されるので、保存先を決めたら、右下の「Select a folder to create the project in」をクリックしてください。
![vscodeのflutterプロジェクト作成フォルダ作成](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-16.27.07.png)
プロジェクト名を求められるので、適当にプロジェクト名を入れてください。
![vscodeのflutterプロジェクト名作成画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-16.25.09.png)
VSCodeで新規プロジェクトを立ち上げることができました。
![vscodeでflutterプロジェクト作成後の画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-16.46.08.png)
VSCodeからIOS Simulatorに接続する
まずは、iOS Simulatorを起動しましょう。
以下のコマンドでも起動する事ができます。
open -a Simulator
iOS Simulatorが起動できたら、以下の画像のように接続したい端末を選択すると、端末が立ち上がります。(例としてiPhone14 Plusを選択しています。)
![iOS Simulator端末選択画像](/wp-content/uploads/2022/11/スクリーンショット-2022-11-27-15.26.29.png)
VSCodeで「cmd + shift + p」を押してコマンドパレットを開いたら、「flutter:Select Device」と入力して、クリックしましょう。
![vscodeの端末選択画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-18.20.26.png)
iOS Simulatorが起動できていれば、先ほど選択した端末(例だとiPhone14 Plus)が表示されるはずなので、選択します。
![vscodeの端末詳細選択画像](/wp-content/uploads/2022/11/スクリーンショット-2022-11-27-15.35.50.png)
以下のように、VSCodeの右下に選択した端末が表示され手入れば、okです。
![vscodeの端末選択後画像](/wp-content/uploads/2022/11/スクリーンショット-2022-11-27-15.38.53.png)
あとは、プロジェクトの lib/main.dart
を選択して、F5
を押せばiOS Simulatorでアプリが起動します。
![vscodeでiOS Simulator接続画像](/wp-content/uploads/2022/11/スクリーンショット-2022-11-27-15.47.51-1024x650.png)
VSCodeからAndroidエミュレーターに接続する
デバイスの作成
まずはデバイスを作成していきます。Android Studioを起動してください。
起動したら「projects」から右上にあるボタンを押して、「Virtual Device Manager」を押します。
![Android Studio選択画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-17.46.07-1.png)
そしたら以下のようなモーダルが出るので「Create device」を押します。
![Android Studio画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-17.51.10.png)
適当なスマホを選択して、「next」を押します。
今回は「Pixel XL」で作成していきます。
![Android Studio端末選択画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-17.55.30.png)
システムイメージを選択して、「next」を押します。
![Android Studioイメージ画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-17.57.47.png)
「Finish」押します。
![Android Studio端末名設定画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-18.00.19.png)
以下のように、デバイスが作成されました!
![Android Studio端末作成後画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-18.02.56.png)
VSCodeからAndroidエミュレーターを起動
VSCodeで「cmd + shift + p」を押してコマンドパレットを開いたら、「flutter:Select Device」と入力して、クリックしましょう。
![vscodeの端末選択画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-18.20.26.png)
そしたら、先ほど作成したデバイスを選択してください。
![vscodeの端末選択詳細画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-18.25.31.png)
Androidエミュレーターが起動しました。
![Androidエミュレーター画像](/wp-content/uploads/2022/10/スクリーンショット-2022-10-09-18.33.09.png)
あとは、プロジェクトの lib/main.dart
を選択して、F5
を押せばAndroidエミュレーターでアプリが起動します。
![](/wp-content/uploads/2022/11/スクリーンショット-2022-11-27-16.19.29-1024x643.png)