[Flutter] ゼロからAndroidエミュレータ上で"Hello, World!"するまで

# はじめに
こんにちは、yuzu_juiceです🥂
最近、スマホアプリ開発系の友人と会話をしたときにFlutterを知り、自分でも少し触ってみたくなりました。
お試し的に、Androidエミュレータ上でHello, World!したので、その手順を自分の備忘録として残しておきます。

# 目指すところ
Androidエミュレータ上でアプリを実行し、Hello, World!と表示させる

# 環境構築
2023/05/02時点の手順です。今後はバージョンや画面が変わる可能性があるので、ご留意ください。

Android環境でのHello Worldには、以下3つの環境構築が必要です。
- Visual Studio Code
- Flutter
- Android Studio

## Visual Studio Code
Visual Studio Codeのインストールをする(詳細は割愛)
https://code.visualstudio.com

Visual Studio CodeにFlutterの拡張機能を入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/83cef37b-e67b-5c5e-2231-40ff35a68144.png)



## Flutter
手順自体は、[公式ドキュメント](https://docs.flutter.dev/get-started/install/windows)にあります。以下は、手順の要約を記載

下記URLをクリック
https://docs.flutter.dev/get-started/install

Windowsをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/8241aa33-4f9e-71f1-af00-74c882f6f5cc.png)

遷移先で少し下にスクロールし、flutter_windows_3.7.12-stable.zipをクリックすると、sdkがダウンロードされる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/fcfb3d47-e722-6c03-9d87-21dd1d96cb1f.png)

ダウンロードしたsdkをunzipし、出てきた```flutter```というフォルダを```C:\```直下に配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/a93b83e6-51ed-00ca-d6cc-9421600286c0.png)

```C:\flutter\bin```をユーザ環境変数(Path)に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/64e82579-83b4-e108-3093-b47cf05956e5.png)


cmdを起動し、Pathが通っているか確認します。
```
>where flutter
C:\flutter\bin\flutter
C:\flutter\bin\flutter.bat
```

## Android Studio
公式からダウンロードします。
https://developer.android.com/studio

Download Android Studio Flamingoをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/9fb8be75-bd33-4a91-6a63-8ef68e4aeeed.png)

すべてそのままNextを押し、インストールします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/2c58ec69-9e85-dee2-42eb-b7bfab5f4552.png)

## 環境構築ができているか確認
```
>flutter doctor
[√] Flutter (Channel stable, 3.7.12, on Microsoft Windows [Version 10.0.22621.1555], locale ja-JP)
[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.3)
[!] Android Studio (not installed)
[√] VS Code (version 1.77.3)
[√] Connected device (2 available)
[√] HTTP Host Availability
```
Windows Version, Android toolchain, ChromeにXが付いている…
今から、AndroidでHello Worldをするので、Android toolchainは√にする必要がある。

### Unable to locate Android SDKの解決
Android Studioを起動し、More ActionsからSDK Managerをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/c96c4d50-1002-c119-0a49-1c3466826cf0.png)

Android SDK LocationのEditをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/ac36dfa4-c69d-d51b-d8f6-dae2f1ed46ec.png)

そのままNextをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/c962afbe-1e15-f363-bcb3-bbd48d1911cf.png)

そのままNextをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/677ed989-6f1a-7740-cf8c-ad98bfc8b44c.png)

Acceptをクリックし、Nextをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/0c9026cb-285d-ff49-03ec-0f54fff3c713.png)

少し待ち、この画面が表示されればFinishをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/4b0f1aee-8a48-89ed-79a1-718f487b2cba.png)

このパスをコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/50d0688c-0ab7-572e-0d0b-5f67f6df925b.png)

flutterにパスを教えてあげる
```
>flutter config --android-sdk C:\Users\xxx\AppData\Local\Android\Sdk
Setting "android-sdk" value to "C:\Users\xxx\AppData\Local\Android\Sdk".
```

ここでもう一度flutter doctorする。なんかXが増えてる…
```
>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.7.12, on Microsoft Windows [Version 10.0.22621.1555], locale ja-JP)
[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.3)
[√] Android Studio (version 2022.2)
[√] VS Code (version 1.77.3)
[√] Connected device (2 available)
[√] HTTP Host Availability
```

### cmdline-tools component is missingの解決
SDK Tools > Android SDK Command-line Toolsにチェックを入れ、Applyをクリックしてインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/77fe6b2d-2c51-cae1-2c47-385f03352a8b.png)

### Android license status unknownの解決
下記コマンドを入力し、ライセンスを承認する
```
>flutter doctor --android-licenses
```

以上で、Android toolchainのエラーはなくなった。
```
>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.7.12, on Microsoft Windows [Version 10.0.22621.1555], locale ja-JP)
[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.3)
[√] Android Studio (version 2022.2)
[√] VS Code (version 1.77.3)
[√] Connected device (2 available)
[√] HTTP Host Availability
```

# Hello, World!
## プロジェクトの作成
Visual Studio CodeでCommand Paletteを開き、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/a8e44352-334d-7718-9a9e-dfe0dbe8a677.png)

Flutter: New Projectを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/1bc5d190-63a2-d15a-eae8-7e5bf7dc4d89.png)

Applicationを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/d3d68faf-1be2-95de-e2c6-428208c1ebde.png)

プロジェクトの保存先を選択すると、下記のようにプロジェクトが作成されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/e0e023cb-d35d-a7df-b311-2e9d77a8aea3.png)

## Android Studioでエミュレータを設定
Android Studioを開き、More Actions > Virtual Device Mangagerを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/b62d1657-5552-1ace-4ab7-e3e01b472e01.png)

Create virutal deviceを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/0c5448e1-b226-595a-cea9-7b8a8b619d05.png)

どんなデバイスでもよいので、好きなデバイスを選択してNext
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/da63c962-2b09-9b91-9c26-d72f31e03aa6.png)

エミュレータのsystem imageも特にこだわりないので、Release Nameの赤枠で囲っている部分をクリックし、system imageをダウンロード、ダウンロード完了したら、Next
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/bae210c6-ca2e-34d2-defc-7b80d0c9277a.png)

Finishで完了。Android Studio側の設定は以上。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/cb615ee9-b9d8-d441-532e-7a576cc4d76c.png)

## エミュレータでアプリを実行
画面右下のWindows…となっている部分をクリックすると、画面上部のメニューが表示されるので、先ほどAndroid Studioで作成したデバイスを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/40398ea6-fd71-58bd-dcf7-d6cd544ed1b9.png)

さっそく実行しようとすると、エラーがでた。どうやら、Flutterのプロジェクトが保存されているパスに日本語が含まれているとダメらしいので、別の場所にプロジェクトフォルダを移動させた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/683bf666-8fff-0bc8-e054-be2c2693cada.png)

順番が前後するが、main.dartの105~107行目を以下のように追記し、F5キーでデバッグをすると、うまくHello, World!ができた。めでたし。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086592/3289287a-dc32-881f-2963-c31d08a70a1b.png)

以上

# こちらを参考に作業を進めました！

https://zenn.dev/kazutxt/books/flutter_practice_introduction

https://docs.flutter.dev/get-started/install/windows