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

〇Flutterとは

　https://flutter.dev/

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

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

◆特徴

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

〇環境構築

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

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

◆システム要件

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

●構築手順

SDKのダウンロード

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

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

パスの設定

Flutterコンソールからでなく、いつも使っているコンソールから使いたい場合は環境変数の設定を行う

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

↓自分の設定内容

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

「flutter doctor」実行

• コンソールで「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プラグインのインストール

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

Flutter Doctorを実行し、セットアップができているか確認する

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

〇試しに動かしてみる

アプリケーションの作成

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

アプリケーションの実行

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

↓起動した状態

Hot Reloadを試してみる

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

'You have pushedthe button this many times:'

'You have clicked the button this many times:'

↓更新後

デバッグウィンドウに出力される時間を見る限り1secかからないくらい。

〇まとめ

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

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

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

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