Flutter環境構築 - 3（Android Studio・Androidエミュレータセットアップ編）

#はじめに
今回はFlutter環境構築第3弾 「**Android Studio・Androidエミュレータセットアップ編**」です！
Flutter SDKのインストール・Flutterコマンドのセットアップがお済みでない方は、
先に「Flutter SDKインストール編」をご覧ください。

**Flutter環境構築シリーズ**
・[Flutter環境構築 - 1（Flutter SDKインストール編）](https://qiita.com/naru_chan__/items/359fcdfb8aa092e9a44e)
・[Flutter環境構築 - 2（Xcode・iOSシミュレーターセットアップ編）](https://qiita.com/naru_chan__/items/d64455cb7d0e7dd223a5)
・[Flutter環境構築 - 4（VSCodeセットアップ編）](https://qiita.com/naru_chan__/items/1cf6f3d43beb97698592)


#「Android Studio・Androidエミュレータセットアップ編」でやること
本編では以下の項目を行います。

- Android Studioのインストール
- Android Studioのセットアップ
- サンプルのFlutterアプリを実行
- Androidエミュレータのセットアップ

#Android Studioのインストール
#### 1.Android Studioをダウンロード
[こちら](https://developer.android.com/studio)のAndroidの公式サイトの「DOWNLOAD ANDROID STUDIO」をクリックする。
![スクリーンショット 2020-04-16 18.17.45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/0d7dbe01-8a25-e970-9215-7e0bf8263638.jpeg)

すると規約と条件が表示されるので、
「I have read and agree with the above terms and conditions」の欄にチェックを入れて規約に承諾し、
「DOWNLOAD ANDROID STUDIO FOR MAC」をクリックしてダウンロードします。
※「I have read and agree with the above terms and conditions」のチェックを入れないとダウンロード出来ません。
![スクリーンショット 2020-04-16 18.23.39.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/f1845f63-5f7b-82a7-bf64-e2cfc89e2e53.jpeg)

#### 2.Android Studio DMGファイルを起動
ダウンロードしたAndroid Studio DMGファイルをダブルクリックして起動し、
ApplicationフォルダにAndroid Studioをドラッグ＆ドロップします。
![スクリーンショット 2020-04-16 19.10.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/911f77b7-ac40-2938-630b-95f6dad3647a.png)

これでAndroid Studioのインストールは完了です。

#Android Studioのセットアップ
#### 1.Android Studioを起動
Android Studioをダブルクリックで起動します。
するとセットアップ画面が表示されるので**Next**をクリックして進んでいきます。

- 「Install Type」 は**Standard**のままで**Next**をクリック。
- 「Select UI Theme」は**Darcula**か**Light**、お好みで選択し**Next**をクリック。
- 「Verify Setting」では設定内容を確認し**Finish**をクリック。するとComponentsのインストールが始まり、パスワードを求められたら入力します。
- インストールが完了したらログが表示されますので、確認したら**Finish**をクリック。

すると以下のような画面が表示されます。
<img width="474" alt="スクリーンショット 2020-04-16 19.51.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/287c5214-96c9-76c9-6694-b114ad6c9f39.png">

#### 2.Flutterプラグインのインストール
先程の画面右下の**Configure**をクリックし、**Preferences**をクリック。
![スクリーンショット 2020-04-16 19.52.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/988ec628-b376-4949-4e15-c035064fec0b.png)

すると以下の画面が表示されます。
![スクリーンショット 2020-04-16 20.25.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/04d7fc89-b799-c708-8292-603c0f733597.png)

左側のタブの**Plugins**をクリックし、検索欄に**Flutter**と入力し検索をかけます。
検索結果で出てくる、「**Flutter**」と「**Flutter i18n**」のinstallをクリックしインストールします。

- 「Third-party Plugins Privacy Note」が表示されるので、**Accept**をクリック。
- 「Plugin Dependencies Detected」が表示されるので、**Yes**をクリックしDartプラグインも同時にインストールします。

インストールが完了すると「**Restart IDE**」のボタンが表示されるのでクリックし、Android Studioを再起動します。
![スクリーンショット 2020-04-16 20.26.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/338211e1-832b-da66-87a9-0d7d30bd52e1.png)

するとAndroid Studio起動後の画面に「Start a new Flutter project」という欄が追加されます。
![スクリーンショット 2020-04-16 19.51.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/f19db546-92e6-da8b-b53d-42deaf6ad158.jpeg)

これでAndroid Studioのセットアップは完了です。

#サンプルのFlutterアプリを実行

#### 1.Flutterプロジェクトを開く
前編の「Xcode・iOSシミュレーターセットアップ編」で作成した**my_app**ファイルを開いていきます。
まずはAndroid Studioを起動した画面で、**Open an existing Android Studio project**をクリックします。
![スクリーンショット 2020-04-16 19.51.56 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/f6c76975-297e-a164-3573-49efe5c17d02.png)

するとファルダ一覧が表示されるので前編で作成したmy_appファイルを選択し、**Open**をクリックします。
するとプロジェクトが展開されます。

#### 2.Flutterアプリを実行
プロジェクトが展開されたら、画面上方の**<no device selected>**と書かれたセレクトボックスをクリックし、**Open iOS Simulator**を選択します。
![スクリーンショット 2020-04-18 18.34.08 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/817109d4-6b7d-482b-c8cb-8b928a42b6ba.png)

するとiOSシミュレーターが起動します。
![スクリーンショット 2020-04-18 18.42.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/32000930-5f34-f1d5-27c4-ad8f057ec4ea.png)

起動が完了したら、Android Studio画面上方の**Run**をクリックし、Flutterアプリを起動します。
![スクリーンショット 2020-04-18 18.45.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/4820c3be-df45-85ed-1f42-e9e465de2917.jpeg)

起動完了すると、iOSシミュレーターに反映されます。
![スクリーンショット 2020-04-18 18.44.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/f584a527-bd64-f6b6-e81a-21fb15b6c5c2.png)

これでサンプルのFlutterアプリの実行が完了しました。

#Androidエミュレータのセットアップ
#### 1.仮装デバイスを作成する
Android Studio画面の上タブの**Tools**をクリックし、**AVD Manager**を選択します。
![スクリーンショット 2020-04-18 19.19.12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/60f652ed-327e-3fe7-fda7-20a741848cbd.jpeg)

Your Virtual Devicesの画面が表示されるので、画面中央の**Create Virtual Devices**をクリックして仮装デバイスを作成します。
![p7-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/d53269e6-8400-12ae-03ce-6ce2ae539880.jpeg)

お好みで仮装デバイスを設定して**Next**をクリックしていき、最後**Finish**をクリックすると仮装デバイスの作成ができます。
<img width="997" alt="スクリーンショット 2020-04-18 19.52.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/b7311a50-0899-3647-19db-a814a33f2a7b.png">

作成が完了すると、Your Virtual Devices画面に先程作成した仮装デバイスが表示されます。
<img width="1235" alt="スクリーンショット 2020-04-18 20.00.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/a4d73baf-bbc3-d589-0b5b-a6581d430bce.png">

#### 2.Android Studioのセットアップ
Androidエミュレータを実行するために、Android Studio側でも設定を行います。
Android Studio画面の上タブの**Tools**をクリックし、**SDK Manager**を選択します。
![スクリーンショット 2020-04-18 20.33.43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/cdfa8308-afcd-65c6-2a78-dbc0b500a68f.jpeg)

Preferences for ProjectsのAndroid SDK画面が表示されます。
Android SDK画面の**SDK Platforms**タブにて、**先程作成した仮装デバイスのAndroidバージョンと同じバージョン**のチェックボックスをクリックしてチェックを入れておきます。
![スクリーンショット 2020-04-18 20.38.53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/3b48d003-13fe-09f1-0ef2-8ce8fbc9c744.jpeg)

次にタブのSDK Platform右横の**SDK Tools**をクリックします。
画面右下の**Hide Obsolete Packages**のチェックボックスを外し、**Android SDK Tools(Obsolete)**にチェックを入れます。
最後に画面右下の**OK**をクリックすることで先程チェックを入れた、AndroidのバージョンとAndroid SDK Toolsがインストールされます。
![スクリーンショット 2020-04-18 20.48.30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/2d5dbf0e-19d5-e7b9-2e6a-f6fa9a60607f.jpeg)

これでAndroidエミュレータを起動する準備が整いました。

#### 3.AndroidエミュレータでFlutterアプリを起動
Your Virtual Devices画面に表示された仮装デバイスの**Actions**欄の**Launch this AVD in the emulator**ボタンをクリックして起動します。
![スクリーンショット 2020-04-18 20.00.29 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/2814e8c3-7268-558a-1857-4f7fc2446f6c.png)

以下Androidエミュレータ起動後画面。
![スクリーンショット 2020-04-18 20.29.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/5533b495-48ac-c15e-2dc8-3548e27e449d.png)

起動ができたら、iOSシミュレーターの時と同様にAndroid Studio画面の**Run**ボタンをクリックすることで、現在展開中のFlutterプロジェクトを実行することができます。
![スクリーンショット 2020-04-18 21.03.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/eccfc361-2621-c205-4c39-e9a7248e19ec.png)

これでAndroidエミュレータにてFlutterアプリを実行できるようになりました。

#最後に
以上で「Android Studio・Androidエミュレータセットアップ編」は終了となります。お疲れ様でした。
Androidの実機にてアプリの確認をしたい場合は[Flutter公式サイト](https://flutter.dev/docs/get-started/install/macos#set-up-your-android-device)の
「Set up your Android device」欄を参考にしてみてください。

最後までご覧くださりありがとうございました。


**Flutter環境構築シリーズ**
・[Flutter環境構築 - 1（Flutter SDKインストール編）](https://qiita.com/naru_chan__/items/359fcdfb8aa092e9a44e)
・[Flutter環境構築 - 2（Xcode・iOSシミュレーターセットアップ編）](https://qiita.com/naru_chan__/items/d64455cb7d0e7dd223a5)
・[Flutter環境構築 - 4（VSCodeセットアップ編）](https://qiita.com/naru_chan__/items/1cf6f3d43beb97698592)

参考サイト[[Flutter公式サイト](https://flutter.dev/)]