Flutterを使ってみよう｜環境構築 #VSCode

MacOSの環境

オペレーティングシステム: macOS (64-bit)
ディスク要領: 2.8 GB (IDEツールなどのサイズは含まない)
ツール: Flutterは下記のコマンドが利用可能であることが必要です
- bash
- curl
- git 2.x
- mkdir
- rm
- unzip
- which

※上記のコマンドは、MacOS標準コマンドです。もしコマンドがない場合はダウンロードしておきましょう。
私はMacbook Pro 16インチにしてbashがインストールされていなかったのでbashをインストールします。

brewコマンドをインストールしていない方はこちらです。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brewを使ってbashをインストールします。

brew install bash

brewでインストールしたbashは /usr/lacal/bin/bash にあるので、これをログインシェルとして変更する。

/etc/shells の中に /usr/local/bin/bashを追記する。

sudo vi /etc/shells

chshコマンドでログインシェルとして変更する。

chsh -s /usr/local/bin/bash

Terminalを再度立ち上げたらbashで起動します。
以上で、bashの設定は完了です。

Flutter SDKのダウンロード

FlutterSDKの安定したリリースバージョンを入手します。
ここでは最新バージョン(2019/12/10現在)を載せておきます。
flutter_macos_v1.9.1 + hotfix.6-stable.zip
過去のバージョンを入手したい場合はこちらをご覧ください。
ダウンロードしたZIPファイルを任意の場所に解凍します。
今回、私は~/developフォルダの中に解凍したflutterフォルダを置きます。
```
cd ~/develop
unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.6-stable.zip
```
Flutterツールのパスを通す
```
export PATH="$PATH:~/develop/flutter/bin"
```
これだと、新しくTerminalを立ち上げた時にパスがまた初期化されてしまうので、パスを永続化します。
```
source $HOME/.bashrc
```
Terminalを再起動し、次のコマンドでパスが通っているか確認します。
```
echo $PATH
```
~/develop/flutter/bin が表示されたら永続化されています。

iOSセットアップ

Xcodeインストール

FlutterでiOSアプリを開発するにはXcodeが必要です。

WebまたはMacAppStoreでXcodeの安定した最新バージョンをインストールします。
Terminalから次を実行して、新しくインストールされたバージョンのXcodeを使用するようにXcodeのコマンドラインツールを設定します。
```
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
```
コマンドでXcodeのライセンスに同意します。
```
sudo xcodebuild -license
```
spaceで下まで読み、agreeと入力しライセンスに同意します。

iOSシミュレーターをセットアップ

Flutterでの開発をiOSシミュレーターで実行、テストする場合は次の手順を実行します。

iOSシミュレーターを起動します。
```
open -a Simulator
```
シミュレーターのメニュー[ Hardware ] > [ Device ]で、シミュレーターが64ビットデバイス（iPhone5s以降）を起動しているか確認し、任意のものを起動します。

Androidセットアップ

Android Studioをインストール

Android Studioをダウンロードし、インストールします。
Android Studioを起動し、「Android Studio Setup Wizard」を実行します。
これにより、最新のAndroid SDK、Android SDK Platform-Tools、およびAndroid SDK Build-Toolsがインストールされます。
これらはFlutterでAndroid開発をする際に必要です。

Android StudioにFlutterプラグインをインストール

Android Studioを起動します。
[ Configure ] > [ Plugins ]
検索バーでflutterを検索します。
Flutterをインストール
インストール後、Android Studioを再起動します。

Androidエミュレーターをセットアップ

Flutterでの開発をAndroidエミュレーターで実行、テストする場合は次の手順を実行します。

Android Studioを起動します。
[ Configure ] > [ AVD Manager ] > [ Create Virtual Device... ]
デバイスを選択し、[ Next ]
私はPixel 3を選択しました。
システムイメージ（x86やx86_64）を選択し、[ Next ]
私はAPIレベル29のx86を選択しました。
Emulated Performanceは[ Hardware - GLES 2.0 ]を選択し、[ Finish ]
作成したデバイスのAction[ ▶︎ ]でAndroidエミュレーターを起動できます。

Visual Studio Codeのセットアップ

Flutterが使えるIDEツールならなんでもいいのですが、今回はVS CodeでFlutterの環境を整えます。
Visual Studio Codeをダウンロードしてください。

Flutterプラグインのインストール

VS Codeを起動します。
サイドメニューのEXTENSIONSでFlutterと検索します。
検索結果のFlutterをインストールします。（Dartプラグインもインストールされます）

Flutter Doctorでセットアップを検証

セットアップの検証がOutputで行われます。
検証結果を見て足りないものは対応しましょう。
足りないものについては、何をすれば良いか親切に教えてくれるので解決できます。

⌘＋Shift＋P でコマンドパレットを開きます。
"doctor"と入力し、Flutter: Run Flutter Doctorを選択してEnterを押します。

Flutterアプリを触ってみる

VS Codeを起動します。
⌘＋Shift＋P でコマンド、Flutter: New Projectを選択します。
今回はテストアプリとして"test_app"(プロジェクト名)を入力し、Enterを押します。
保存場所を指定した後に、自動で新規ウィンドウが開かれます。
プロジェクトが出来上がるまで少し待ちましょう。
main.dartファイルが勝手に開かれ、サンプルコードが記述されています。

シミュレーターにビルド

好きなシミュレーターを起動しましょう。
私はiOSのシミュレーターを起動しました。
シミュレーターが起動できたら、VS Codeの[ デバッグ ] > [ デバッグの開始 ]を選択します。
Xcodeビルドが始まります。
ビルドが終了すると、シミュレーターで「Flutter Demo Home Page」というサンプルアプリが開かれます。

ホットリロードを体験

Flutterにはホットリロード機能が搭載されています。
保存をすると再度ビルドをしなくても、自動で反映される機能です。
またホットリロード時に、状態をそのままで反映することができます。
とりあえず、実際に現在開かれているサンプルアプリで試していきましょう。

main.dartの23行目の以下を書き換えます。
main.dart
```
home: MyHomePage(title: 'Flutter Demo Home Page'),
```
書き換えた後に、保存をしてみましょう。
main.dart
```
home: MyHomePage(title: 'Test App'),
```
シミュレーターのアプリに1秒ほどで即反映されます。
アプリの＋マークを何度か押して、表示されている数字を増やしましょう。

この表示されている数字は、状態を持っています。
状態と言っても、グローバルな数字を持っているだけですが、通常はテスト中に再ビルドすると、この状態は初期化されて、0に戻ります。
ですが、Flutterは状態を保ったまま反映を行えます。
再度、先ほどの場所を書き換えて、保存してみましょう。
main.dart
```
home: MyHomePage(title: 'Test App Ver2'),
```
状態を保ったまま反映ができたと思います。
これがFlutterのホットリロードです。

最後に

今回はFlutterの開発環境構築編を書かせていただきました。
どこかの誰かのお役に立てれば幸いです。ご覧いただきありがとうございました。