Flutter開発環境構築から、iOS・Androidデモアプリ起動までやってみた。

#Flutter開発環境構築
1.FlutterSDKのダウンロード
2.環境変数Pathの設定
3.Android Studioのダウンロードとインストール
4.Android Studioを起動し、コンポーネントをダウンロード
5.Flutter Pluginのインストール

##FlutterSDKのダウンロード
まずは、Flutterの公式サイト（https://flutter.dev/）
からDocsを開き、Get Started OSの選択画面があるので、ご自身のPC環境に合わせてください。今回はMacを選択し、ダウンロードを開始します。
![スクリーンショット 2020-12-27 15.16.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774875/9585a897-28e5-4709-cac9-0c6f15800e25.png)


##環境変数Pathの設定
>export Path=$"Path:（フォルダへのパス）/flutter/bin"

・zshの場合 → .zshrcに追記
・bashの場合 → .bash_profileに追記
その確かめかたは、ターミナルを開きます。その上でecho $SHELLと入力すると、どちらかが判明します。

```:ターミナル
echo $SHELL
```
vimで該当のファイルを開き、先ほど開いた公式ドキュメントのページを少し下にスクロールすると、Update your Pathの内容をコピーして一番下に追記します。
[]の中身を自分のダウンロードしたフォルダまでのPathに変更します。

ターミナルを再起動し、Flutter doctorと入力します。これで問題なければOKです。

##Android Studioのダウンロードとインストール
公式ドミュメントのページをさらに下にスクロールすると、Android setupというページがあるかと思います。Android Studioのリンクがあるのでクリックしサイトに飛びます。
こちらからも（https://developer.android.com/studio）

ダウンロードをクリック。ダウンロードが終わるとアプリケーションフォルダに移動し、起動させます。
![スクリーンショット 2020-12-28 8.55.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774875/fcacbaf7-a823-13b9-3696-b0c95898f79a.png)


##Android Studioを起動し、コンポーネントをダウンロード
初期設定が少し必要です。以下のように進めてください。

next
Do not import settings -> OK
standard -> next
Darcula or Light どちらか好きなデザインを選択 -> next
Finish

##Flutter Pluginのインストール
ConfigureからPreferencesを選択します。すると設定画面が出てくるので、Pluginsを選択し、Flutterを探しインストールします。Dartもセットでインストールするようになっています。Acceptで応じましょう。

インストールが完了すれば一度Android Studioを再起動します。


開発環境セットアップはこれにて完了です。
続いて、実際にエミュレーター（シミュレーター）を使ってアプリを起動してみようと思います。


#iOS/Androidデバイスでアプリ起動
1.Flutter projectの作成
2.エミュレーターの設定
3.Androidアプリの起動
4.Xcodeのインストール
5.iOSアプリの起動

##Flutter projectの作成
まずは、Android Studioから新規プロジェクトを作成します。
基本的にはデフォルトのままでOKです。Package nameだけお好きな名前に変更してください。Finishを押せば自動的にプロジェクトが作成されます。

##エミュレーターの設定
AVD Managerのアイコンをクリックします。右から４番目にある緑色のAndroidマークです。Create Virtual Devicesをクリックし、お好きなデバイスを選択します。初めての場合はダウンロードする必要があります。

##Androidアプリの起動
元の画面に戻ると、先ほどダウンロードしたデバイス名が表示されているかと思います。三角形のアイコンをクリックして仮想デバイスを起動させます。
Flutter Demo Home Pageというタイトルの青色の初期アプリが起動したはずです。＋ボタンを押してみると数字がどんどん増えていきますね。このようにとてもシンプルなアプリですが、無事に立ち上げることができました。
![スクリーンショット 2020-12-28 9.01.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774875/51aeed9c-97b1-1ee5-2847-3c142a83cc36.png)


##Xcodeのインストール
続いてiOSでも同じようにアプリを起動してみようと思います。App StoreからXcodeをインストールします。評価が低すぎてびっくりしますが、問題ないようです。ただかなり重く容量もあるのでかなり時間がかかります。
![スクリーンショット 2020-12-28 9.06.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774875/1fc0789e-371b-7ee1-c5c5-d26cba861ba3.png)

とりあえずFlutterを触ってみたかっただけという方は、Androidまでで十分かもしれません。
また、XcodeはMacユーザー限定です。Windowsでも何か方法はあるみたいですが、ここでは触れません。

##iOSアプリの起動
インストールが完成すれば一度開いてみてください。少し指示に従って入力する必要がありますが、とても簡単なので安心してください。

Android Studioを再度開き、AOSP on |A Emulator(mobile)をクリックし、Open iOS Simulatorを選択します。iOSの仮想デバイスが立ち上がったかと思います。Androidと同じように実行してみましょう。さっきと同じようなアプリが起動していればOKです。
![スクリーンショット 2020-12-28 9.14.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/774875/739feec3-ae0b-914f-fe32-addfbeed1ef9.png)


ここまでお疲れ様でした。

同じソースコードのままで簡単にAndroid・iOSと立ち上げることができるのです。まさにこれがFlutterの最大の特徴だと思います。

また、Flutterの公式サイトには、Showcaseの中にFlutterで開発された有名アプリサービスが載っています。ぜひ参考にしてみてください。