【Flutter】 VSCodeからiOS SimulatorとAndroidエミュレーターに接続する方法

こんにちは！

今回は、VSCodeでFlutterプロジェクトを立ち上げて、iOS SimulatorとAndroidエミュレーターでアプリを起動するまでの手順を紹介していきます。

例として、Flutterプロジェクトを立ち上げた際に、デフォルトで入っているカウンターアプリを起動していこうと思います。

環境

前提として、Flutter・ VSCode・Xcode・Androidエミュレーターはインストール済みとして進めていきます。

VSCodeでプロジェクトを立ち上げる

まずは、Flutterの新規プロジェクトを作っていきます。

VSCodeを新規で立ち上げます。

「cmd + shift + p」を押すと下記のようにコマンドパレットが表示するので、「flutter」と入力しましょう。
そうすると以下のように表示されるので「Flutter: New Project」をクリックしてください。

注意点！

「flutter」と入力して何も出てこなかった場合は、Flutterのプラグインがないからでしょう。
以下のように、VSCodeの一番左の上から4番目のアイコンをクリックし、「flutter」と入力してください。そして表示された拡張機能の「有効にする」をクリックしてください。そうするとコマンドパレットから「Flutter: New Project」を選択できるようになります。

次に以下のように表示されるので、一番上の「Application」をクリックしてください。

Finderが表示されるので、保存先を決めたら、右下の「Select a folder to create the project in」をクリックしてください。

プロジェクト名を求められるので、適当にプロジェクト名を入れてください。

VSCodeで新規プロジェクトを立ち上げることができました。

VSCodeからIOS Simulatorに接続する

まずは、iOS Simulatorを起動しましょう。

以下のコマンドでも起動する事ができます。

open -a Simulator

iOS Simulatorが起動できたら、以下の画像のように接続したい端末を選択すると、端末が立ち上がります。(例としてiPhone14 Plusを選択しています。)

VSCodeで「cmd + shift + p」を押してコマンドパレットを開いたら、「flutter:Select Device」と入力して、クリックしましょう。

iOS Simulatorが起動できていれば、先ほど選択した端末(例だとiPhone14 Plus)が表示されるはずなので、選択します。

以下のように、VSCodeの右下に選択した端末が表示され手入れば、okです。

あとは、プロジェクトの lib/main.dartを選択して、F5を押せばiOS Simulatorでアプリが起動します。

VSCodeからAndroidエミュレーターに接続する

デバイスの作成

まずはデバイスを作成していきます。Android Studioを起動してください。
起動したら「projects」から右上にあるボタンを押して、「Virtual Device Manager」を押します。

そしたら以下のようなモーダルが出るので「Create device」を押します。

適当なスマホを選択して、「next」を押します。
今回は「Pixel XL」で作成していきます。

システムイメージを選択して、「next」を押します。

「Finish」押します。

以下のように、デバイスが作成されました！

VSCodeからAndroidエミュレーターを起動

VSCodeで「cmd + shift + p」を押してコマンドパレットを開いたら、「flutter:Select Device」と入力して、クリックしましょう。

そしたら、先ほど作成したデバイスを選択してください。

Androidエミュレーターが起動しました。

あとは、プロジェクトの lib/main.dartを選択して、F5を押せばAndroidエミュレーターでアプリが起動します。