【Flutter】Android開発環境を構築してエミュレータでアプリ起動確認まで(Windows環境)

自分用のメモ。次回からFlutter開発環境を作るのに悩まなくて済むようにしたい

今回記事では環境構築をしてAndroidエミュレーターでアプリ起動確認までがスコープで、次回以降はFlutterのコーディングに踏み込んだ話をしていく([次回記事](https://qiita.com/hidepy/items/c3bd9ad767deb4117f7a)では、よくFlutter開発で使われるプラグインについて触れていく)

OS: Windows 11 Pro

## 各種ソフトウェアをダウンロード&インストール&設定

### Git for Windows

[Git for Windows公式サイト](https://gitforwindows.org/)にアクセスして、Downloadを押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/eda5670c-53ad-e116-114a-f7fde38fba38.png)

記事執筆時点のバージョンはGit-2.47.0.2。

Download後、exe実行でインストールするが、結構色々なオプションを問われます。
必要に応じて設定を変更しても良いが、後から変更もできるので一旦今回は全部デフォルトのままでインストールした。

GitはVSCode経由でFlutter SDKをinstallする際などで使用されるので最初に入れておく。

### Visual Studio Code

#### ダウンロード&インストール

基本的に、コーディングやエミュレータ起動等はVSCode上で行う。Flutter開発を初めてはや3ヶ月程が経過するが、VSCode上での開発で特に不満に感じた点は無いので大丈夫だと思う。
(ただ、今回はAndroidネイティブ機能をゴリゴリに利用することになったが、その際は流石にKotlin on AndroidStudioで開発)

[VSCode公式サイト](https://code.visualstudio.com/)にアクセスして、Download for Windowsを押下するだけ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/4f9a70a5-acf5-45bf-fb0f-54f1c78c4b21.png)

#### Flutter開発用のセットアップ
VSCodeを開き、左側のExtension-> 検索窓に「flutter」と入力、「Flutter」プラグインをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/35353d2c-a97b-17af-936f-3765b0d2c076.png)

Ctrl + Shift + Pでコマンドパレットを開き `flutter`を入力して出てくる `Flutter:New Project`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/135c9d40-5bd0-79b1-4528-4ef3c2a85c7b.png)

「SDKが無い」で怒られるはずなので「Download SDK」を押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/2933a0d5-9a5a-da17-79bb-d0bc5540966f.png)

今回は `C:\flutter\` 配下にSDKをダウンロードすることに(VSCodeを管理者権限で開いておかないと権限的に上手くいかないかもしれないので注意)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/bd5f89ca-9b76-21d6-75b3-3d994a7f2cf8.png)

SDKのダウンロードが正常に終わったら、再度コマンドパレットから `Flutter: New Project`

Applicationを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/242979a6-3ee6-a4b8-9c10-b79e4ab4b7b1.png)

flutter applicationを配置する先を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/7ce44f26-bd55-bc5c-9e07-d55fcf5a1bef.png)

flutterのproject名を入力。今回はデフォルトのままでいく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/a54b2b6f-3e4a-0167-d470-c02167cc70a0.png)

暫く待つ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/55cc8cfb-5c50-d1f3-964f-92c656cfa6a2.png)

正常終了。現状、Androidが×になっているが、後続でAndroid用の設定を行っていく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/6fdd031b-1124-84c1-2c77-be745f682d54.png)

まずはflutterがブラウザ上で動くところまでをやっていく。コマンドラインで `flutter pub get`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/ba7ff008-9ac0-7373-5f3d-d46bebfbf39a.png)

コマンドパレットで Flutter: Select Deviceを選択の後、Chromeを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/8b37a32f-30e2-dcba-2f26-36c89eb0a768.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/9efef2ce-8e16-01de-5942-529b82f98b15.png)

その後、コマンドラインで `flutter run`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/2647242f-95ba-8657-2fa4-9e21faa4435f.png)

ブラウザデバッグ用のSDK等がDLされ、特に問題が無ければ下記のようにflutterを起動するブラウザを問うてくる(さっき選んだ気がするが、いつも聞かれる)
今回はchromeなので2を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/64913ef6-56bf-9540-faf2-83cffafde6d4.png)

何事もなければ勝手にブラウザが立ち上がり、flutter starterアプリが動くはず
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/6db82b35-2fd4-ded1-9e4a-0295bb37e25a.png)
(右下のフローティングボタンを押下することで数字がカウントアップされる)

#### (必要に応じて)プロキシ環境の場合はプロキシ設定を入れておく
Ctrl + , でSettingsを開き、右上のOpenSettings(JSON)を選択して下記のようにプロキシ設定を入れる(strictSSLオプション等はその環境に応じて)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/337de0a1-d749-9cb9-32b0-0da0d173b47f.png)

### Android Studio

開発はVSCodeで行うが、エミュレータの作成等はAndroidStudio側で行うのでインストール
特に開発環境に縛りが無いのであれば、[Android Studio公式](https://developer.android.com/)からDownloadボタンを押下でOK。

今回は過去バージョンを選んでDLする。(Android公式ページはenサイトじゃないと不都合が生じることがあるので注意)
* [Android Studio(英語サイト)](https://developer.android.com/studio/archive?hl=en)にアクセス
* 下の方のI Agree To The Termsをクリック
* お好みのバージョンのAndroid StudioをDL。今回はKoalaのinstallerにした
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/94df0390-2eac-d92a-b39d-6a54405876e5.png)

ダウンロードが完了したら、exeを実行してAndroid Studioをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/e81339a4-67b1-0bb2-69fa-e60ecdec9338.png)

Android Virtual Deviceにチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/f189d65c-3c91-627c-cf1c-9025b242a367.png)

インストール完了後、さらに別のウィザードが立ち上がるので進める
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/72154574-0502-e5cb-e4c6-1b8c63b27af3.png)

AndroidStudioを起動し、New Project
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/7f0c2060-409c-8a35-02eb-a63f3408ce36.png)

その後の選択は今回は重要ではないのでとりあえず進めていく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/ebe7feaf-b3e2-3bc0-8af1-f8fcdf3f3a1f.png)

メイン画面が開いたら、左上メニュー-> Tools-> DeviceManager
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/f7e488b7-16d8-4f94-f622-29c7e824e3de.png)

DeviceManagerのプラスボタンを押下-> Create New Device を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/8c372c5d-7662-1d2e-8a96-b4ffe9049604.png)

お好みのデバイス設定をしていく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/498a74d3-e899-6cbd-5460-bc27d9c379da.png)

Androidエミュレータの作成が完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/758dd4fd-62f1-ea58-8802-b013e667b4b4.png)

ここで、一旦エミュレータの再生ボタンを押下。今回は下記のようなダイアログが出て素直に起動しなかったのでさらに進める
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/96e96ed7-71ba-3d68-e6b0-5481bf9865be.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/9d196a98-c301-ecb2-275a-aac02c53e391.png)

正常に起動したようだ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/d0997b6c-de5a-9b98-1c05-ec0dd0ec053e.png)


### 再び Visual Studio Codeに戻ってAndroidエミュレータ起動

VSCodeを開いたままの状態だった場合は、一旦クローズして再度オープン。管理者権限で起動しておく方が安心。

コマンドパレットから `Flutter: Select Device`で先ほどAndroid Studio側で作成したデバイスが表示されているはずなので選択(今回はPixel8を選択)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/e1acf418-98b3-bced-178a-04ac0215ec37.png)

デバイス選択後、 `flutter run`コマンド実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/70dcfa47-cec4-a761-5b9f-a94b195ecadd.png)

Androidエミュレータ上で先ほどのアプリが動いた！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145371/f6abbf2b-aabf-e68e-0fa3-7a89399d4bfe.png)

Android Studioや、Android用のSDKダウンロードに時間がかかったけど、非プロキシ環境であれば比較的詰まることなく環境構築できた

#### プロキシ環境の場合はgradleでコケる可能性有りなので...

プロキシの設定と、証明書の取り込みが必要になる(かも)

プロキシ設定は、 `%USERPROFILE%\.gradle\gradle.properties` に下記のような設定を入れていけばOK
```
systemProp.http.proxyHost=
systemProp.http.proxyPort=
systemProp.http.proxyUser
systemProp.http.proxyPassword
systemProp.https.proxyHost ... 
```

証明書起因でいまいち上手くいかない場合は、下記のようにkeytoolで証明書の取り込みを行う
下記フォルダにkeytool.exeがあると思うので、
`C:\Program Files\Android\Android Studio\jbr\bin\`

こんな感じ
```
cd C:\Program Files\Android\Android Studio\jbr\bin
keytool.exe -import -file "C:\path\to\my_ca_sha2.cer" -keystore C:\"Program Files"\Android\"Android Studio"\jbr\lib\security\cacerts
```

私の手元の環境だと、上記の2つの設定で無事プロキシ環境下でもflutter実行 on Androidエミュレータまで行うことができました

次回は、Flutter開発を行う上でよく使うプラグインを使いつつ、実際のコーディングに入っていきます
(次回記事)[https://qiita.com/hidepy/items/c3bd9ad767deb4117f7a]