Flutter環境を作ってみた（Windows）

最近、仕事でスマホアプリの開発を行っていて、いろいろと調べる中でFlutterなるものがあることを知った。
環境構築してみたので、その時の手順を残しておく。

# 〇Flutterとは
　https://flutter.dev/

　Googleが開発したモバイルアプリ開発向けのプラットフォーム。
　言語はDart。

　2018年末にバージョン1.0がリリースされたばかりの割と新しめ。

### ◆特徴
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/32d9dcfb-c0b6-fc88-aa60-a97b1ac3610b.png)

- 素早い開発
- 表現力豊かで柔軟なUI
- ネイティブパフォーマンス

# 〇環境構築
公式ガイドに沿って環境構築を行っていく。
https://flutter.dev/docs/get-started/install/windows

なお、Android StudioおよびAndroid SDKのインストールは完了している前提で記載する。


### ◆システム要件
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/411c1b86-520b-b7bc-a25d-cd6dd23f0284.png)

- OSはWindows7 SP1以降
- ディスクスペースは400MByte
- PCで以下のツールが 使えること
    - Windows PowerShell5.0以降（Windows10にはプリインストールされている）
    - Git（gitコマンドがコマンドプロンプトから使える状態）

## ●構築手順
### SDKのダウンロード
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/8b89d3b2-65ce-95fd-d357-cc94f1148854.png)

1. 「flutter_windows_vxxx.zip」よりSDKをダウンロード
2. 任意の場所に解凍する（ただし、C:\Program Filesのような高い権限が必要な場所以外）
3. 解凍したフォルダ内の「flutter_console.bat」をダブルクリックで起動

Flutterコンソールが立ち上がれば準備完了！


### パスの設定
Flutterコンソールからでなく、いつも使っているコンソールから使いたい場合は環境変数の設定を行う
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/91882d22-7c57-ed84-67a5-4bd57dba8ba1.png)

- システムから環境変数の編集を行う
- 「PATH」に「{Flutter CDK解凍フォルダパス}\bin」を追加

↓自分の設定内容
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/e9c93e92-dd79-bd45-07aa-e86fdaa9594f.png)

※モザイクはユーザー名です。

### 「flutter doctor」実行
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/f8f5e840-8444-f2a4-c1ea-b9b1c9030746.png)

- コンソールで「flutter doctor」を実行する
- 初期状態ではAndroid ADKがないため、エラーが出る
 
  
  

↓重要なところだけメモ
### Android環境の構築
今回はAndroid環境構築済みのPCにてFlutter環境を作っているため、省略
Android環境構築が出来ていない場合は、↓に書いてある手順に沿って構築。
https://flutter.dev/docs/get-started/install/windows#android-setup
#### Android StudioとAndroid SDKのインストール
省略（ここで重要なのはANDROID_HOMEが正しく設定されていること）
#### AVD（Android Virtual Device作成）
省略（実機で動かすならいらない（と思う））


# 〇エディタの設定
今回はVS Codeを使う
また、VS Codeはインストール済みの状態から始める

### FlutterおよびDartプラグインのインストール
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/3d318737-0db1-2ce7-29df-33159f9112bf.png)

1. 拡張機能を開く
2. Flutterを検索し、インストール

![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/cd58dc49-6fb8-8d0f-fc3b-5afd51938ae1.png)


### Flutter Doctorを実行し、セットアップができているか確認する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/ef1120e3-e865-8dd1-1d56-54840967ff66.png)

1. 「表示 → コマンドパレット」からコマンドパレットを開く
2.  doctorと入力し、「Flutter:Run Flutter Doctor」を実行
3.  出力窓に結果が出力されればOK


# 〇試しに動かしてみる
### アプリケーションの作成
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/1b2ac6cc-76d5-6165-b5ba-032acf883218.png)

1. コマンドパレットを開く
2. flutterと入力し、「Flutter: New Project」を選択
3. プロジェクト名を入力し、Enter
4. プロジェクトの親ディレクトリを選択もしくは作成する
5. プロジェクトが作成され、main.dartファイルが表示されるまで待つ

### アプリケーションの実行
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/56994ac2-94c9-ba91-c6f3-cd38695a5697.png)

1. VS Codeのステータスバー（ウィンドウ下部にある青いバー）
2. DeviceSelectorエリアをクリック
    3. シミュレータが動いてない場合は「No Device」と表示されるため、シミュレータを起動する
        4.  画面上部に端末選択窓が表示されるため、端末（AVD）を選択すると起動する
    4. 実機で動かす場合はデバイスごとの設定が必要。
5. 「デバッグ → デバッグ開始」もしくはF5押下
6. アプリの起動を待つ（デバッグコンソールで状況確認できる）

↓起動した状態
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/0f7250a3-516f-b166-6c91-2eebca3b3e45.png)


# Hot Reloadを試してみる
デバッグ状態でmain.dartの内容を変更し、保存すると即座にデバイスに反映されるよーという機能です。

``` main.dart(変更前)
'You have pushedthe button this many times:'
```

``` main.dart(変更後)
'You have clicked the button this many times:'
```

↓更新後
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/e140d8fa-0966-34cf-63fb-b624ea7a5c56.png)



デバッグウィンドウに出力される時間を見る限り1secかからないくらい。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/cb0a9901-a894-9af2-f0c6-3fb8a9aa5e08.png)


# 〇まとめ
まだ環境構築しただけなので何とも言えないが、ホットリロードは良さそう。
スマホアプリはビルドに時間がかかるイメージが強いので、修正→すぐ確認ができるのはとても良い！

UIに関してはWidget単位で配置していく形式らしい。
CordovaみたいにHTML/CSSでUI作れる～みたいなのに慣れていると、勉強コストが高そうな気がする。。
（Dart自体も触ったことがない。。）

一応、Flutter Studioっていう、UIをGUIで構築してコードを生成できるツールはあるらしい。
https://flutterstudio.app/
（Widgetの概念を理解しないと、使い方わからないかも。。）


今後はUI周りについても勉強していく。（余裕があれば記事も書く）
以上。