おうち時間にWEBエンジニアがFlutter触ってみた(環境構築)


#はじめに
おはようございます。こんにちは。こんばんは。
今回は **#おうち時間** 家にいても何もすることがないのでFlutterでアプリ作って遊んじゃおう。と思いはじめました。
始める前に環境構築していきましょう。

#Flutterとは
Flutter は、Googleによって開発されたフリーかつオープンソースのモバイルアプリケーションフレームワークである。
FlutterはAndroidやiOS向けのアプリケーションの開発に利用されている。 

#今の環境

- macOS: 10.15.4
- Android studio: 3.6.3
- Xcode: 11.4.1

#環境構築
[https://flutter.dev/](https://flutter.dev/)にアクセスして**Get Started**をクリックして下さい。
<img width="1442" alt="Flutter_-_Beautiful_native_apps_in_record_time.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/22582468-d291-036b-6af9-6d2681a7c890.png">

自分のOSを選択する。
<img width="947" alt="Install_-_Flutter.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/dda7cf7d-136a-d0bf-0252-e37f128c0b96.png">

次に以下のZIPファイルをダウンロードし、解凍して下さい。
<img width="1274" alt="macOS_install_-_Flutter.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/7d5590d8-12bd-7f92-8aaa-031080e4739e.png">

パスを通す。
ターミナルを起動してください。
ターミナルを起動し、以下のコマンドを叩いてください。

```console
$ vi .bash_profile
```
叩いたら文字列が出てくるので、
``i``を押してINSERTモード(入力モード)にし、文字列の最後に以下を貼り付けてください。

```
export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
```
<font color="red">[PATH_TO_FLUTTER_GIT_DIRECTORY]のところは自分のflutterの環境に合わせてください。</font>
因みに自分の場合``/Users/watataku/Documents``にflutterがあるので、``export PATH="PATH:/Users/watataku/Documents/flutter/bin"``となります。
入力完了後``escキー``を押し``:wq!``を叩きます。
ここらへんのviエディタの説明は省きます。

これで、パスが通りflutterコマンドが使えるようになったと思うので、以下を叩いてバージョン情報が出ればクリアです。

```console
$ flutter --version
```

Android Studioをインストールする。
<font color="red">*※インストール済みの方はしなくても大丈夫です。*</font>

flutterSDKをインストールする。
下の画像の``configure``をクリックし、``Plguins``をクリックしてください。
<img width="469" alt="Welcome_to_Android_Studio_と_おうち時間にWEBエンジニアがFlutter触ってみた_環境構築_のコピー.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/a947a15f-ba6b-f94d-f4ce-0cafe08e06d6.png">

次に検索フォームが現れるので、``flutter``と入力しインストール
<img width="798" alt="Preferences_for_New_Projects_と_Welcome_to_Android_Studio_と_ブログ記事.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/264483ee-c12a-29d9-310e-99371bf779fc.png">

インストール後、最初の画面で``Start a Flutter Project``
という項目が追加されているはずです。

<img width="478" alt="Welcome_to_Android_Studio_と_おうち時間にWEBエンジニアがFlutter触ってみた_環境構築_.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/bb0482bd-5856-6a86-8816-2f9e748826ba.png">

#アプリの雛形を作る。
``Start a Flutter Project``をクリックし、アプリ名などを決め完了させるとアプリの雛形ができる。
##ios
iOSの場合は別途**Xcode**を入れる必要があります。
立ち上げ方は``Open ios Simulator``を選択ご②のビルド押すと立ち上がります。
<img width="773" alt="flutter_app_test____AndroidStudioProjects_flutter_app_test__-_____lib_main_dart__flutterapptest_-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/dd89974c-c63c-bb6e-0fda-0ffd88b8de64.png">

ios simuulator⇩
<img width="449" alt="iPhone_SE__2nd_generation___13_4_1_.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/804f1d6a-e7e9-005d-c686-e5f0f0855923.png">


成功です。

##Android
Androidの場合は、①をクリックしエミュレータを選択し、②をクリックしたら立ち上がります。
<img width="811" alt="Banners_and_Alerts_と_flutter_app_test____AndroidStudioProjects_flutter_app_test__-_____lib_main_dart__flutterapptest_.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/da5fcb11-24a2-dd16-6851-cba290070c2e.png">

Android Emulator⇩
<img width="402" alt="Android_Emulator_-_Nexus_6P_API_27_5554.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116696/f71b4561-baad-9301-ddb1-3932d3131201.png">


以上。
#最後に
最後まで読んでいただきありがとうございました。
もし、間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです。

次回以降から本格的に触っていきます。