【Flutter】AndroidStudio、VSCodeそれぞれでサンプルアプリを動かす

# この記事の概要
Flutter開発環境を構築後、実際に動く状態になっているのか、サンプルアプリを使って稼働確認します。
最初にAndroidStudioで試し、次にVSCodeで試しました。

＜環境＞
・MacBook Air（15インチ、M2、2023）Sonoma 14.6.1
・Android Studio Ladybug Feature Drop | 2024.2.2
・VSCode 1.96.2 (Universal)
・Flutter 3.27.1

# Android Studioで試す
まずAndroid Studioに以下2つのプラグインがインストールされていることが前提です。
・Dart
・Flutter
![CleanShot 2025-01-19 at 17.49.52@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/0f69a0c4-c0c9-82df-b3e7-bbd1c72e8a02.jpeg)

AndroidStudioを起動し、「New Flutter Project」を選択する。
![CleanShot 2025-01-19 at 18.02.12@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/2ef64ac4-1b90-6dcf-8cb1-1a2a4dea882f.jpeg)

つまづきポイントだが、ジェネレーターでは「Flutter」を選択する。
「New Flutter Project」を選択したのだからデフォルトで「Flutter」が選択されているといいのに。
![CleanShot 2025-01-19 at 18.08.51@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/c7784e73-6bba-17bc-a9d8-fd17870fa127.jpeg)

プロジェクト名に適当な値を入力する。
英小文字とアンダースコアのみ使える。
![CleanShot 2025-01-19 at 18.13.07@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/c115d5f4-98f5-e88a-e4cf-5e9d8e43b3a4.jpeg)

大文字を入れるとこんなエラーが表示される。
<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/53135e9f-9ca0-37e9-2465-9fc94b390227.jpeg">

プロジェクト作成後。
実行ボタンを押す前に、その左隣のデバイスを確認する。
「&lt;no device selected&gt;」となっている場合は、何かしらを選択してから実行ボタンをクリックする。
![CleanShot 2025-01-19 at 18.14.57@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/0ce7a209-f422-b17b-4077-c317fca51474.jpeg)

ちなみに、Android Emulatorが表示されない場合は、一度Refreshしてみると現れるかも。
<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/062f90e6-c754-c8ff-5cfb-1c08efb40cb3.jpeg">

## 実行ボタンを押下してもうまく動かない場合
:::note warn
実行ボタンを押下してもうまく起動せずにこの↓エラーメッセージが表示される場合は以下を試してみてください。
「Error connecting to the service protocol: failed to connect to」
:::
![CleanShot 2025-01-19 at 18.37.13@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/a1bf7046-4585-c478-173c-9bf9888e41c9.jpeg)

DeviceManagerをクリックし、起動中なら一旦停止する。
![CleanShot 2025-01-19 at 18.54.49@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/8136d94e-b210-fe36-f9ec-39953a5a9e90.jpeg)

停止すると再生ボタンに変わるので、もう一度起動する。
すると勝手にRunning Device画面になり、デバイスが起動したらホーム画面が表示される。
![CleanShot 2025-01-19 at 19.02.16@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/0da8a8d6-bb62-6ab8-b410-76f0eaf62106.jpeg)

その上で、アプリの実行ボタンを押下するとサンプルアプリが起動する。
![CleanShot 2025-01-19 at 19.04.00@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/10c470c1-39ea-a490-3b54-a797106e6db5.jpeg)

# VSCodeで試す

「コマンドパレット」を表示する。
<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/69213400-4c85-e8ec-6f31-2546a16ff5f2.jpeg">

「flutter」を入力し、「New Project」を選択する。
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/77ffe975-57dd-638f-dc96-613aa6909ead.jpeg">

「Application」を選択する。
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/f3144f78-6d10-6abb-05af-cc70a3501752.jpeg">

プロジェクトの配置先を指定する。
<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/073dede7-30f0-6877-8c6d-2295e061daeb.jpeg">

プロジェクト名を入力する。
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/2ac293ef-750a-260d-f9d2-1b6917c5dd92.jpeg">

信頼するを選択。
<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/0286eb2a-319b-37bf-3d04-b910174df1ff.jpeg">

プロジェクトが作成できたら、右下のMac OSをクリックし、起動したいデバイスを選択する。
![CleanShot 2025-01-19 at 19.26.28@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/c1b908b3-59ba-b780-e489-40b7349c1514.jpeg)

すると、自動的にデバイスが起動される。
<img width=200 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/bfd073a9-f382-5800-d5d2-9fd707a83e92.jpeg">

VSCodeに戻ってF5を押すとサンプルアプリが起動する。
<img width=200 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/ca229817-cce2-ebd7-402f-622940068219.jpeg">

:::note warn
F5を押下してもうまく起動せずにこの↓エラーメッセージが表示される場合は、ファイヤーウォールの無効化を試してみてください。
「Could not GET 〜」
「Got soket exception 〜」
:::
![CleanShot 2025-01-19 at 19.29.31@2x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942074/079b1d75-da56-aca3-2a38-ed23a74566fa.jpeg)
私の環境ではファイヤーウォールの無効化で起動できるようになりました。

以上。