Flutterの導入(1) ~for Windows10~ Android Studio と Flutter をインストールしよう

今回は Windows 環境でのインストールの話をしておく。

---

Flutterを扱うには、以下のものをインストールしておく必要がある。

- [Android Studio](https://developer.android.com/studio?hl=ja)
  - [最新](https://developer.android.com/studio?hl=ja)のものでいいです。 
- PowerShell
  - Windows10 で WindowsUpdate してれば、1909 以降なので入ってるはず
  - なければOSのVersionを確認するか、[最新](https://github.com/PowerShell/PowerShell/releases)を確認してインストールする
- 何でもいいから Git を扱えるソフト
  - 自分が扱いやすいと思えば、何でもいいです。 
     - [Git for Windows](https://gitforwindows.org/) とか
     - [SourceTree](https://www.sourcetreeapp.com/) とか
     - [GitKraken](https://www.gitkraken.com/)とか
     - [GitHub Desktop](https://desktop.github.com/)とか

---

## Android Studio のインストール
これは多分説明要らないと思う。
[最新](https://developer.android.com/studio?hl=ja)から、
ダウンロードしてきて、インストールするだけ。

## PowerShell の準備
これも説明不要かな。
ウィンドウズボタンを右クリックすると、こんなのがあれば、インストール済み。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194966/cc7d649c-473b-1e09-8834-5d16ce74bfeb.png)
無いのであれば、インストールか設定が必要。

コマンドプロンプトがリストにあるなら、
[ココ](https://pc-karuma.net/windows10-creators-update-powershell-command-prompt/)を確認した上でPowerShellが表示されるようにしておくといいかも。
コマンドプロンプトに powershell と入力して実行しても、
powershell が実行されないなら、インストールが必要。
Windows10なら、WindowsUpdateをするだけで済むはず。

## 何でもいいからGitを扱えるソフトをインストールする
これは好みの話になるので、好きなのをインストールしたらいいと思う。
個人的には、[GitKraken](https://www.gitkraken.com/)か、[SourceTree](https://www.sourcetreeapp.com/)がお気に入り。

## Android Studio の設定をする
Android Studio で色々インストールする。

#### SDK Manager で 各Android の SDK をインストールする
Projectを作成してた場合は、Tools にある、SDK Manager を起動。
Projectを作成してない or 開いていない場合は、歯車のマークをクリックした、
サブメニュー画面から起動できる。赤枠の↓ココね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194966/88a76a13-4268-2a06-4400-91ff12480610.png)

1. SDK Manager を起動。
2. インストール先を変更する場合は、SDK Manager の上の方に、Android SDK Location というのがあるので、その右側の方にある Edit を押下して、変更する。
3. SDK Platform にある、自分が必要そうな Android の Version の SDK を、Nameから選んでチェックを付けていき、 Apply か OK を押下してインストールする。

#### SDK Manager で Tool をインストールする

1. SDK Manager を起動。
2. SDK Tools というタブをクリックする。
3. Toolが並んでるので、以下をインストールする
  - Android SDK Build-Tools
  - GPU Debugging tools
  - NDK (Side by side)
  - Android SDK Command-line Tools(latest)
  - CMake
  - Android Emulator
  - Android SDK Platform-Tools
  - Android SDK Tools
  - Google Play services
  - Google USB Driver
  - Google Web Driver(コレは要らないかも)
  - Intel x86 Emulator Accelerator (HAXM installer) ※

※ これは Intel CPU の HAXM という機能を使って、Emulatorの処理を速くする機能。Emulator使わないなら無くていい。VT-x機能とかが要る。メモリも16GB以上推奨。有効にできないけど有効にしたい場合は、[このサイト](https://qiita.com/keicha_hrs/items/fd714fe6cf38b5b3fbf8)を確認してみて。

#### 環境変数 ANDROID_HOME を追加する
ANDROID_HOME という、環境変数が必要になるので、
Android SDK をインストールした先のパスを設定しておく。

1. 適当なExplorerを起動して、PCを右クリックし、プロパティを起動。
2. システムの詳細設定にある、環境変数をクリック。
3. 上段の「ユーザーの環境変数」にある「新規」をクリック。
4. 「新しいユーザー変数」の「変数名」に ANDROID_HOME を入力する。
5. 「新しいユーザー変数」の「変数値」に Android Studio で、Android SDK Location に選んだ場所を追加して入力する。
(なので、 ～\AppData\Local\Android\Sdk を追加する事になるはず)
6. OKをクリックして、画面を閉じる。

#### (必要なら)開発時に使うAndroid端末の準備をする
エミュレータではなく実機デバッグがしたいなら、その準備もする。
Flutterは、Android4.1以降でないと使えない。
Android端末の「開発者オプション」にある、「USBデバッグ」機能を有効にする必要がある。
常に有効にしてると、一部アプリが使えなかったりするので注意。
（たぶん、セキュリティ的に良くないからじゃないかなー）

「開発者向けオプション」は、最初は非表示になっている。
表示させるには、「端末情報」の「ビルド番号」を連続でタップする。
「開発者向けオプション」を非表示に戻したい場合は、
スマホのストレージのデータをほぼ全削除してリセットしない限り戻らない。

「USBデバッグ」機能を有効にすることで、実機でデバッグ確認が出来るようになる。

## Flutterのインストール
#### 安定版か最新版を選んでインストールする。
- 安定版(2021/08/03 現在)
  - https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_2.2.3-stable.zip
  - 古ければ、最新の安定版を探してください。
    - [ここ](https://flutter.dev/docs/get-started/install/windows)に大抵書いてある。
- 最新版
  - GitでCloneしてくる
  - インストールしたいフォルダでGitコマンドを実行

```
C:\src>git clone https://github.com/flutter/flutter.git -b stable
※git cloneする場所はどこでもいいので、C:\srcじゃなくてもいい
```

#### 環境変数をPATHに追加する
環境変数のPATHに、flutter\binまでのフルパスを追加する。

1. 適当なExplorerを起動して、PCを右クリックし、プロパティを起動。
2. システムの詳細設定にある、環境変数をクリック。
3. 上段の「ユーザーの環境変数」にある「Path」をクリックしてから、「編集」をクリック。
4. その画面で「参照」をクリックし、Flutterをインストールしたフォルダのbinフォルダを指定してOKをクリック。
5. 一番下にflutter\binまでのフルパスが追加されたら、OKをクリックして、画面を閉じる。

#### Flutterが正しくインストールされたか確認する

1. コマンドプロンプトを起動する
2. Flutter診断コマンドを実行する

```
C:\src\flutter>flutter doctor
※診断コマンドを実行するのはどこでもいいので、C:\src\flutterじゃなくてもいい
```

診断コマンドを実行することで、「何がやってないのか」が表示される。英語だけど。
Google翻訳にコピペするだけでも分かるレベルだと思うので確認してみて。
#### (実機なら)adbがちゃんと機能しているか確認する
Android Debug Bridge(ADB) が使えるか確認する。
Android Studio が起動してれば使えるはず。
だけど、基本的には Visual Studio Code で開発したいので、
PathにAndroid\sdk\platform-toolsを追加する。

1. 適当なExplorerを起動して、PCを右クリックし、プロパティを起動。
2. システムの詳細設定にある、環境変数をクリック。
3. 上段の「ユーザーの環境変数」にある「Path」をクリックしてから、「編集」をクリック。
4. その画面で「新規」をクリックし、一番下に入力できるようにする。
5. Android Studio で、Android SDK Location に選んだ場所に、\platform-tools を追加して入力する。
(なので、 ～\AppData\Local\Android\Sdk\platform-tools を追加する事になるはず)
6. OKをクリックして、画面を閉じる。
7. USBデバッグが有効なAndroid端末を、USB接続して、コマンドプロンプトを起動する。
8. 以下のコマンドを入力すると、Android端末のデバイスの一覧が表示される。

```
C:\src>adb devices
※C:\srcじゃなくてもいい
```

↓こんな感じに表示されるはず。
(device_ip_address:5555 device の部分は、自分の端末の情報が表示される)

```
C:\src>adb devices
List of devices attached
    device_ip_address:5555 device
```

↓USBデバッグが有効なAndroid端末が接続されてなかった場合はこうなる。
（何もリストの内容が表示されないってやつ）

```
C:\src>adb devices
List of devices attached

```

## まずはここまで。
次は Visual Studio Code のインストールとかをしていく。

# 参考
- Flutter公式
  - https://flutter.dev/
  - Windowsインストール手順
     - https://flutter.dev/docs/get-started/install/windows
- Windowsでflutterインストール
  - https://qiita.com/nkmk1215/items/2b741157bc253350ff18
- Windowsで高速AVDを利用するまでの手順をものすごく詳しく解説
  - https://qiita.com/keicha_hrs/items/fd714fe6cf38b5b3fbf8
- ADBコマンド導入の方法
  - https://qiita.com/hikaru__m/items/15baae425b6fad25da05
- Android Debug Bridge(ADB)の確認
  - https://developer.android.com/studio/command-line/adb?hl=ja