Flutterを学ぼうpart2(動作確認編)

Flutterに触りながらFlutter関連のことを学んでいく記事です。
前回環境構築まで完了させたので、今回はAndroid StudioでFlutterのサンプルアプリの動作確認を実施していきます。

#### ■前回記事はこちら↓
https://qiita.com/hiropin_hirotan/items/66f9d4ef7b3a5bd6ca90
## 動作確認
Android Studioの動作確認を行っていきます。
仮想デバイスを起動して、Flutterのサンプルアプリを動かしていきます！

**①プロジェクト作成**
インストール直後はまっさらな状態なので新しいプロジェクトを作成していきましょう。
初期画面のCreate New Flutter Projectからプロジェクトを作成します。
(FlutterプラグインをインストールしていないとCreate New Flutter Projectは表示されないので注意)
![プロジェクト作成1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/19e5658f-d361-58ec-67e7-4e6bdbc6c3bd.png)
Flutter SDKのパスを設定してください。
※自身がFlutterをインストールしたディレクトリを選択
![プロジェクト作成2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/8fdbfba2-42cd-d11d-6995-81e8ac033317.png)
プロジェクト名やその他設定を行っていきます。
今回は特に細かい設定は行わずデフォルトの設定で進めていきます。
プロジェクト名はとりあえずsampleとかでいいかな。

ちなみにProject nameに```Flutter```や```_```(アンスコ)などの文字は使用できませんでした。
Flutter自体やFlutterで使用されるdart言語において```_```(アンスコ)が特別な意味を持っているようで、そのへんが関係しているみたいです。
![プロジェクト作成3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/225e5be1-0bef-162c-078f-4da2655a6ae0.png)
Finishボタンを押下してプロジェクト作成完了！

**②仮想デバイス起動**
前回インストールしたAndroid Studioを起動します。

画面右上にスマホマークを押下。
![デバイス作成0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/5d44c85e-96bf-12a3-fdeb-52d215b0c585.png)
初期状態だと仮想デバイスが一つもないはずなので、Create Virtual Devideから新しいデバイスを作成します。
![デバイス作成1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/170117d3-512f-2a52-4c44-d030b7f434ca.png)
使用する画面サイズ、機種などを自由に選択できるようですね。
今回は特にこだわりなどはないのでPixel5を選択していきます。
![デバイス作成2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/2a860c74-42a7-a28c-0aa9-3f5adbbe0c38.png)
次の画面でAndroidのバージョンを選択します。
こちらも特にこだわりはないので、最新のAndroidバージョンを選択してダウンロードします。
![デバイス作成3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/a721b795-f45b-65d1-7c52-5326b625cb0f.png)
インストール完了！
![デバイス作成5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/f16d2016-8cb5-ce0e-1b27-114adcaf02b0.png)
インストールが完了したらNextボタンから次の画面へ。
![デバイス作成6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/01881f89-fd14-51ac-6445-3c6d3ebe3fc0.png)
名前や起動時の画面の向きなどを設定できるようです。
例のごとく何もせずデフォルト設定のままFinishボタンで完了です。
![デバイス作成7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/9824b80f-5e45-4350-255d-b2612486b6ed.png)
仮想デバイス起動画面に先ほど追加したデバイスが追加されているかと思います。
Actionsの起動ボタンを押下して起動しましょう。
![デバイス作成8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/106eff52-de2a-0b25-2f92-7ba253064dbc.png)
無事仮想デバイスが起動されました！
![デバイス作成9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/7e1159ce-92aa-3b20-09f8-ecbe6c1b0ab7.png)
---
**③サンプルアプリの起動**
画面右上の△ボタンを押下してサンプルアプリを起動します。
ちなみに今回起動するサンプルアプリは、Flutterインストール時に初期から入っているものです。
```sample\lib\main.dart```
Flutterのフォルダ構成なども次回あたりで学んでいきたいと思います。
![デバイス作成10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/fc5a8803-c329-5bc5-ad7c-b477ad3cd8da.png)
起動情報などはコンソールで確認できます。
問題なく起動できたみたいですね。
![デバイス作成12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/7fcea189-1235-5f55-15f6-9b1fbc85f287.png)

今回のサンプルアプリは+ボタンを押下すると、真ん中に出力されている数字が1つずつ増加するわかりやすいものですね。
![デバイス作成13.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/8d13a244-3ff6-a2fd-1054-48643c5c8e6e.png)
↓
![デバイス作成14.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1941107/475bb25f-6361-43ce-ae9e-bc8e4b1af40c.png)
環境構築後、仮想デバイスを起動してサンプルのFlutterアプリケーションを動作させることができました。
今回はここまでにします。


## まとめ
Webアプリケーションなどは今まで携わってきたことはありますが、
モバイルのネイティブアプリに関しては全く素人なので簡単なアプリケーションが動作しただけでも楽しいですね！
次回以降はFlutterのフォルダ構成や、Flutterで使用されるdart言語について学んでいきたいと思います。

#### ■次回
https://qiita.com/hiropin_hirotan/items/ef4687a5427cfffe81da