FlutterでHello worldを動かすまでの環境構築手順（iOS, Android）

# FlutterでHello worldを動かす
仕事でFlutterを扱うことになったので、とりあえずHello world動かすところまでの流れをメモ。

「Flutterとは何ぞや？」って人は公式サイトを見てくれ。
[Flutter - Beautiful native apps in record time ](https://flutter.dev/)

## 環境
Flutter SDKは、Windows、macOS、Linux向けに提供されていますが、本記事ではmacOS上での環境構築手順をまとめます。

| OS | バージョン |
|:-:|:-:|
| macOS | Mojave バージョン10.14.6 |

Flutter SDKは「v1.9.1+hotfix.4」を使いました。

必要なコマンドラインツールは以下のとおりです。

- bash
- curl
- git 2.x
- mkdir
- rm
- unzip
- which


※バージョンアップ等で本記事の情報が古くなっている場合は、公式ドキュメントを参照してください
[Install  - Flutter](https://flutter.dev/docs/get-started/install)

## Flutter SDKのインストール
まずはFlutter SDKをインストールします。
[macOS install  - Flutter](https://flutter.dev/docs/get-started/install/macos)

### Flutter SDKのダウンロード
公式サイトから[最新版SDK](https://flutter.dev/docs/get-started/install/macos#get-the-flutter-sdk
)のzipファイルをダウンロードします。
本記事執筆時点のSDKバージョンは、v1.9.1+hotfix.6となっていました。
![スクリーンショット 2019-10-28 14.17.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/7b1c41c4-fd8b-dfb3-c58c-8617a9083526.png)

インストール対象フォルダに移動し、ダウンロードしたzipファイルを解凍します。

```
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.6-stable.zip
```

### パスを通す
SDKを展開しただけではflutterコマンドが使えないので、パスを通します。

```
$ export PATH="$PATH:`pwd`/flutter/bin"
```

`.bash_profile`に直接追記しておけば、セッションを閉じても有効になります。

```
export PATH="/Users/unsoluble_sugar/flutter/bin:$PATH"
```

`source`コマンドで設定反映し、パスが有効になっていることを確認します。

```
$ source ~/.bash_profile
$ echo $PATH
```

### 開発用バイナリをダウンロード

必要に応じてプラットフォーム固有の開発バイナリをダウンロードします。

```
$ flutter precache
```

### flutter doctorを実行する
セットアップ完了のために別途インストールが必要なツールがないか、依存関係をチェックします。

```
$ flutter doctor
```

`flutter doctor`コマンドを実行すると以下のようなログが表示されます。flutterコマンドが使用できない場合は、前述のパスが通っていないケースが多いです。

```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Mac OS X 10.14.6 18G103, locale ja-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 11.1)
    ✗ CocoaPods installed but not initialized.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that
        responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To initialize CocoaPods, run:
        pod setup
      once to finalize CocoaPods' installation.
[✓] Android Studio (version 3.5)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.
```

`[!]` の付いている項目は準備が完了していない項目です。


Android、Xcode関連はのちほど設定するので無視してください。`Connected device` もデバッグ時に使用するものなので、いまは気にせず大丈夫です。

`[✓] Flutter` となっていない場合は、Flutterの設定まわりに何かしら問題が起きている状態です。表示されているメッセージを参照しながら対応しましょう。

基本的には指示通りに不足ツールをインストールしていけば解決します。

### バージョン確認

`flutter doctor`でもflutterのバージョン確認はできますが、`flutter --version`コマンドを打つと、使用されているDartのバージョンなども確認できます。

```
$ flutter --version
```

```
Flutter 1.9.1+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision cc949a8e8b (4 weeks ago) • 2019-09-27 15:04:59 -0700
Engine • revision b863200c37
Tools • Dart 2.5.0
```
これでflutter SDKの設定は完了です。

## iOSのセットアップ
続いてiOSのセットアップを行なっていきます。

### Xcodeをインストールする

Xcodeの最新安定版をインストールします。[公式Weｂサイト](https://developer.apple.com/xcode/)、もしくは[Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835)からダウンロードします。
<img width="752" alt="スクリーンショット 2019-10-28 14.56.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/5e41bd06-a00d-110f-a247-58c9ec1cdff1.png">

### コマンドラインツールの設定
Xcode command-line toolsの設定をします。

```
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
```
一度もXcodeを起動していない場合の初期セットアップや、ライセンスの同意など、必要に応じて進めましょう。

### iOSシミュレーターの実行
以下コマンドでiOSシミュレーターを起動します。

```
$ open -a Simulator
```
<img width="433" alt="スクリーンショット 2019-10-28 15.08.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/eb90b0a9-d418-a4e7-e979-3781020dd906.png">

Xcode上から [Xcode] > [Open Developer Tool] > [Simulator] で起動することもできます。
<img width="488" alt="スクリーンショット 2019-10-28 15.07.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/3e6a190e-c31d-f955-8b78-26cfddc82d56.png">

### サンプルアプリの作成

`flutter create`コマンドで新規プロジェクトを作成します。

```
$ flutter create my_app
```

シミュレーターを起動した状態で`flutter doctor`コマンドを打つと、`Connected device`項目が`[✓]`となっていることがわかります。

`[✓] Connected device (1 available)`

作成したプロジェクトフォルダに移動し、`flutter run`コマンドを実行しましょう。

```
$ cd my_app
$ flutter run
```
起動中のシミュレーター上でアプリが実行されます。

<img width="433" alt="スクリーンショット 2019-10-28 15.11.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/8e8709d6-fdfa-96ae-d56a-d2a490ca5b13.png">

右下の「＋」ボタンをタップすると、画面中央の数字がカウントアップされるHello worldアプリらしい。

起動確認ができたらiOSのセットアップは完了です。

## Androidのセットアップ
iOSの動作確認ができたので、Androidのセットアップも行なっていきます。

### Android Studioのインストール
[Android Studio](https://developer.android.com/studio)をダウンロードしてインストールします。
![スクリーンショット 2019-10-28 15.22.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/f4a19387-33c6-167d-1dbd-de9602e23629.png)

### Android SDK等のインストール
Android Studio Setup Wizardに従って、最新のAndroid SDK、Android SDK Platform-Tools、Android SDK Build-Toolsをインストールします。

### Android Emulatorを作成
Android Studioを起動し、Welcome画面右下にある [Configure] メニューから [AVD Manager]を開きます。
<img width="199" alt="スクリーンショット 2019-10-28 15.24.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/a2e87c76-a2eb-461e-19a1-54db3eee4d4f.png">

適当にEmulatorを作成し、対象EmulatorのPlayボタンを押します。
<img width="889" alt="スクリーンショット 2019-10-28 15.26.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/9702599c-5f75-3b63-44f7-2aee1a1b5851.png">

Emulatorが起動します。
<img width="429" alt="スクリーンショット 2019-10-28 15.28.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/174cb329-ac5b-ea46-bfa7-25cd1c717d4f.png">

Emulatorが起動した状態で`flutter run`コマンドを実行すると、サンプルアプリが起動します。
<img width="429" alt="スクリーンショット 2019-10-28 15.34.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/8ecab06e-3a1b-e1fb-caf1-de123b22d6ad.png">

簡単ですね。

## iOS、Androidで同時に動作確認する
おまけ。

iOS Simulator、およびAndroid Emulatorを同時に起動した状態で以下コマンドを打ってみましょう。

```
$ flutter run -d all
```

複数OSでアプリ挙動を同時確認することが可能です。
<img width="854" alt="スクリーンショット 2019-10-28 15.32.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/caf210ad-f55e-f454-8441-0cc65fa46088.png">

すごい。

# エディタはVSCodeがおすすめ
ちなみにエディタは[VSCode](https://code.visualstudio.com/)を使っています。
![flutter_hot_reload.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/530a7a86-9831-874b-e97a-4dab419d3921.gif)

とりあえずFlutterとDartのプラグイン入れとけば、必要最低限の環境は整います。

- [Flutter - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter)
- [Dart - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code)

VSCode上から新規プロジェクトの作成、エミュレーターの起動、デバッグまでひと通りこなせます。
![スクリーンショット 2019-10-28 15.43.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6380/d06c3449-15bd-be85-c4f9-65a31fd4555d.png)
FlutterにはHot reload機能もあるため、変更の確認が容易で高速開発が可能。
[Hot reload  - Flutter](https://flutter.dev/docs/development/tools/hot-reload)

すごい。