【2020年版】FlutterのHelloWorldをAndroidでやってみる

先日iOSシミュレータでFlutterアプリのHelloWorldをしたので、今回はAndroid StudioでHelloWorldしてみます。

## Android Studioのアップデート

僕のAndroid Studioがばーバージョン3.3と古かったので最新にアップデートします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/fed3e38a-bcb6-db93-7106-a50820f98f94.png" width=450 />

Eventsをクリック。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/51cb7019-4fdb-6ce7-c841-d87ee4dc32fd.png" width=250 />

`update`をクリック。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/c41a7237-82c7-f215-ddae-b57bc6eaccee.png" width=450 />
`Update and Restart`をクリックしてしばらく待つ。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/debc9230-6629-179f-b503-0856144576bd.png" width=450 />
スプラッシュ画面がモダン風にデザインが変わっていました。

## Flutterプラグインのインストール

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/6bf09cad-fa5b-37e4-b787-18bfb5588db2.png" width=450 /> 


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/c27c7317-a953-9850-fa24-1f325b8568ee.png" width=450 /> 


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/e6ae2548-1882-74ee-07c0-79d333263902.png" width=450 /> 


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/5d15dd70-9baf-9d09-8ca4-eed6df2c1db8.png" width=450 /> 


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/13186015-6332-1417-72df-c18ebf1db58a.png" width=450 /> 

## Flutterプロジェクトの作成

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/ed293cb8-b387-dc88-fd78-f3ec40171cab.png" width=450 /> 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/ddde8fed-ec4a-4dbf-d98a-2e1f55e5c39e.png" width=450 /> 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/858ace77-7a74-2153-e8a1-74002085f25a.png" width=450 /> 
僕は事前にFlutter SDKをインストールしていたので、すんなり通過しましたが、そうではない人は事前にFlutterSDKをインストールしておき、`Flutter SDK path`でパスを通しておく必要があります。

参考 : [【2020年版】3ステップでFlutterのHelloWorldをiOSでやってみる - Qiita](https://qiita.com/ohbashunsuke/items/73e5e150aa9b57d4efe4#%E3%82%B9%E3%83%86%E3%83%83%E3%83%971flutter-sdk%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/054f62f8-63dd-6777-341f-92f186ac96c5.png" width=450 /> 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/3df79cd4-5d3b-c9ed-2527-6e0434928d67.png" width=450 /> 
このようにmain.dartが表示されたら成功です。

## シミュレータの設定

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/c15c1593-f371-17cc-1d6e-cf47e1d16d6b.png" width=250 /> 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/eadff2f6-ef83-64d2-c165-a06cf7096617.png" width=450 /> 

## 実行

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/aa036d86-029d-8d7b-59a3-2d591d873452.png" width=450 /> 

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/28ba0130-1152-5ddd-f6a0-546bbc40feb8.png" width=250 />
AndroidシミュレータでHelloWorld!

## iOSでもシミュレーション可能

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/0b64ad03-97a7-76b3-c456-3667381d57b5.png" width=450 /> 


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/08602e7d-4fd9-dc97-34a0-65e3285eef9a.png" width=250 /> 

Android StudioからiOSシミュレータのHelloWorld!

以上です。


## 環境

- Android Studio 4.1.1
- macOS Catalina 10.15.7