Flutterをchocolateyを使って導入して最初の実行を試してみるまでのメモ

## 概要
Flutterを試してみる。
環境構築から最初の表示まで。

## 環境
* Windows 10 Home 21H1 19043.1055
* Flutter 2.2.2
  * Engine • revision 91c9fc8fe0
  * Tools • Dart 2.13.3
* Android Studio 4.2.1.0

## インストール
* chocolateyを使用

```
cinst -y flutter androidstudio
```

インストール後、一応再起動。
手順によってはパスを通すように指示がされているが、chocolateyはよしなに設定してくれていた。

### FlutterのUpgrade
* flutterの診断

```
flutter doctor
```

以下のように言われたので、素直にアップグレード

```
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
```

```
flutter upgrade
```

### Android Studio 設定
再度診断。

```
flutter doctor
```

Android Studioが認識されていない

```
[√] Chrome - develop for the web
[!] Android Studio (not installed)
[√] VS Code, 32-bit edition
[√] VS Code, 64-bit edition (version 1.57.1)
[√] Connected device (2 available)
```

スタートに追加されたAndroid Studioを一度立ち上げてみる。
初期設定を行えと表示されるので、そのまま従う。

ダウンロードに結構、時間がかかった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/57f6e957-e51c-21ff-efa2-5d3c7227a07b.png)

HAXMのインストールに失敗。
参考にした記事でもインストールに失敗していたのでそういうものなのだろう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/58919538-7bc2-7b6a-71ba-b16aa80ed8bb.png)

* `flutter doctor`を試してみる。
  * 以下のように表記が変わった。

```
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.2.2, on Microsoft Windows [Version 10.0.19043.1055], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Chrome - develop for the web
[!] Android Studio (not installed)
[√] VS Code, 32-bit edition
[√] VS Code, 64-bit edition (version 1.57.1)
[√] Connected device (2 available)
```

#### HAXMのインストール

[Flutterの開発環境構築手順（Windows）](https://blog.fire-sign.info/1591/)によると、いったんHyper-Vをオフにしないとインストールできないらしい。

```
 bcdedit /enum | Select-String "hypervisor"
```

上記コマンドの結果、`hypervisorlaunchtype    Auto`となっていて有効化されていることが分かった。
一旦オフにする。

```
PS C:\WINDOWS\system32> bcdedit /set hypervisorlaunchtype off
この操作を正しく終了しました。
PS C:\WINDOWS\system32>  bcdedit /enum | Select-String "hyper"
hypervisorlaunchtype    Off
```

ここでいったん再起動。

Android Studioを起動し、右下のConfigureからSDK Managerを選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/077bc22a-5395-8ff6-4e10-8cde9aa2c692.png)

あれ、でもInstalledになってる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/be30b65b-79f5-8abe-a30b-4eb3bcb13e68.png)

念のため、[haxm](https://github.com/intel/haxm/releases)から最新盤をインストールする。
zipをダウンロードして解凍。setup.exeを起動。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/a70d6a65-acfe-edcc-3405-8e82bfef9b00.png)

* Hyper-Vをもとに戻す。

```
PS C:\WINDOWS\system32>  bcdedit /set hypervisorlaunchtype auto
この操作を正しく終了しました。
```

再起動。

#### Flutter Pluginの導入
* config から settingsを選ぶ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/c78a27c5-1214-6455-c4f1-2d6f155b70de.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/d4607697-2aea-b2f1-b687-dde31fca3f69.png)

* PluginsからFlutterを選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/c31ad447-5a2c-6ed3-e7b6-9eb2458a3fe9.png)

* Dartも入れろと言われるのでインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/28b357b4-f5c2-c857-aa9c-486d95ab427c.png)

* OKを押して戻ると、再起動しろと。する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/3516d234-cb1f-474b-7693-1705e2954c33.png)

#### FlutterとAndroid Studioの紐づけ

```
PS C:\WINDOWS\system32>  flutter config --android-studio-dir="C:\Program Files\Android\Android Studio"
Setting "android-studio-dir" value to "C:\Program Files\Android\Android Studio".

You may need to restart any open editors for them to read new settings.
```

* `flutter doctor`を試す。

```
PS C:\WINDOWS\system32> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.2.2, on Microsoft Windows [Version 10.0.19043.1055], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    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.
[√] Chrome - develop for the web
[√] Android Studio
[√] VS Code, 32-bit edition
[√] VS Code, 64-bit edition (version 1.57.1)
[√] Connected device (2 available)
````

ひもづけできた。


#### ライセンスの承認
まずはdoctorの指示通り。
```
flutter doctor --android-licenses
```
以下のエラーが出た。

```
PS C:\WINDOWS\system32> flutter doctor --android-licenses
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
        at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
        at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
        at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
        at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
        at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
        at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:581)
        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
```

[FlutterはじめたらJavaのClassNotFoundExceptionに遭遇した](https://qiita.com/drafts/a3658665ad8a6335e329/edit)
に従ってAndroid Studioを起動。

* Android Studio configure > SDK Manager > SDK Tools
* Hide Obsolete Packagesのチェックを外す
* Android SDK Command-line Tools(latest)にチェック
* Android SDK Tools(Obsolete)にチェックがついていることを確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/6bb251c0-35f5-234c-8b9f-b00b2d7b7508.png)

AcceptしてNext。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/ca4cb18c-2259-c1a1-131f-ba5ff85d9d0b.png)

* 再度、`flutter doctor --android-licenses`
* エラーが出ず、承認にyを押していく。

```
PS C:\WINDOWS\system32> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.2.2, on Microsoft Windows [Version 10.0.19043.1055], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio
[√] VS Code, 32-bit edition
[√] VS Code, 64-bit edition (version 1.57.1)
[√] Connected device (2 available)

• No issues found!
```

やったー。

## 動作確認

* 最初のAPPを作って確認してみる。
  * [get-started](https://flutter.dev/docs/get-started/test-drive)
* Chocolateyでは、flutterは`C:\tools\flutter`にインストールされるので、SDK Pathはそこを指定。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/690ad86d-3dfc-ec40-8a74-ca76764d788e.png)

* プロジェクト名などをいれて次へ。
なんか、それっぽいのが出来上がる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/0476afd4-d375-af33-c30f-176a327f0c6c.png)

起動してみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/62d46a31-2946-90a6-b279-6921682aa1b6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/ccfca8e6-b28c-5533-8c13-a5d654de0abb.png)

エミュレータが起動する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/e7fc30cb-a4d6-552c-dc52-2991b0e28317.png)

アプリを起動してみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/19aceef3-e093-b575-8e68-fa8a95ef9a71.png)

。。。 立ち上がらない？
attachしてみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/686c3698-368d-de77-c5cc-329fe8275f65.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/928fdc2a-77f4-d065-f1f0-058151856582.png)

たちあがった！

一度、止めて、Runをもう一度試してみる。
今度は、きちんと立ち上がった。初回で調子が悪かったのかもしれない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/c9131445-47c6-6e92-7f72-bd24406e82f4.png)


## 参考

**公式**
[Flutter -androidstudio](https://flutter.dev/docs/get-started/install/windows#android-setup)
[AndroidStudio](https://developer.android.com/studio?hl=ja)
[haxm](https://github.com/intel/haxm/releases)

**導入手順**
[Flutterの開発環境構築手順（Windows）](https://blog.fire-sign.info/1591/)
[Flutter アプリ開発入門](https://qiita.com/tetsukick/items/cdecf64172c5f4a126d6)
[Flutter実行環境の構築(Android StudioとXcode)](https://qiita.com/henjiganai/items/3419ca49a3e36bc59828)
[HAXMのインストール](https://qiita.com/keicha_hrs/items/fd714fe6cf38b5b3fbf8#:~:text=HAXM%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB&text=Android%20Studio%E3%81%AE%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E7%94%BB%E9%9D%A2,%E3%81%B0%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%8C%E5%A7%8B%E3%81%BE%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)
[【Flutter】"[！] Android Studio (not installed)" が出てしまったとき](https://qiita.com/sprout2000/items/508bc8a68756b3658bec)
[FlutterはじめたらJavaのClassNotFoundExceptionに遭遇した](https://qiita.com/drafts/a3658665ad8a6335e329/edit)

[haxm manual setup](https://github.com/intel/haxm/blob/master/docs/manual-windows.md)