Flutter開発環境構築(Mac編)

[docomo Developer support](https://dev.smt.docomo.ne.jp/)の[@akatsukaha](https://qiita.com/akatsukaha)です

MacにFlutterの開発環境を構築する方法を記載いたします．
(最終更新日:2018/7/27)

# **手順**

下記が設定手順

- **1. 動作環境の確認**
- **2. Flutter SDKを設定**
    - **2.1. Flutter SDKをダウンロード**
    - **2.2. Flutter SDKをインストール**
        - **2.2.1. トラブルシューティング：XCodeライセンス**
- **4. Android環境を構築**
    - **4.1. Android Studioをインストール**
    - **4.2. Android Studioで適当にプロジェクトを作成**
    - **4.3. Android Emulatorを作成**
    - **4.4. Android Emulatorを起動**
    - **4.5. flutterのサンプルプロジェクトを実行**
- **5. iOS環境を構築**
    - **5.1. Xcodeをインストール**
    - **5.2. Xcode command-line toolsを設定**
    - **5.3. Xcodeのライセンスに同意**
    - **5.4. Xcodeを起動**
    - **5.5. Simulatorを起動**
    - **5.6. flutterのサンプルプロジェクトを実行**

# **1. 動作環境の確認**

|カテゴリ|詳細|
|---|---|
|OS|macOS (64-bit)|
|ディスク容量|700 MB|
|3rd Party Tools|bash, mkdir, rm, git, curl, unzip, which|

# **2. Flutter SDKを設定**

## **2.1. Flutter SDKをダウンロード**
Flutter SDKを[Flutterの公式サイト](https://flutter.io/)から取得

**GET STARTED**を選択
![スクリーンショット 2018-07-22 11.49.33.png](https://qiita-image-store.s3.amazonaws.com/0/262328/dc5c8a1d-9953-23cd-c287-f4c3f7494708.png)

**INSTALL ON MACOS**を選択
![スクリーンショット 2018-07-22 11.50.41.png](https://qiita-image-store.s3.amazonaws.com/0/262328/c112b3a3-15bd-1cd8-b020-8982fd564e10.png)

**Get the Flutter SDK**を選択
![スクリーンショット 2018-07-22 11.50.54.png](https://qiita-image-store.s3.amazonaws.com/0/262328/8a6ee419-dfd3-6acd-c3c1-5f9d51e15f98.png)

**flutter_macos_v0.5.1-beta.zip**をクリックし，SDKをダウンロード開始．サイズが700MB近くあるので時間がかかります．
![スクリーンショット 2018-07-22 11.54.54.png](https://qiita-image-store.s3.amazonaws.com/0/262328/db02aff5-add6-37a2-9a34-47f83079d37b.png)

## **2.2. Flutter SDKをインストール**

作業ディレクトリにダウンロードしたZIPファイルをコピーし，解凍します．解答するとflutterというフォルダができます．

```bash
$ pwd
/Users/akatsuka/Developer/02_library

$ ls
flutter_macos_v0.5.1-beta.zip

$ unzip flutter_macos_v0.5.1-beta.zip

$ ls
flutter				flutter_macos_v0.5.1-beta.zip
```

解答したら`bin`フォルダにパスを通します．通さないと，`flutter`コマンドが実行できません．今回は，`/Users/akatsuka/Developer/02_library/flutter/bin`に対してパスを通します．

```bash
$ vi ~/.bash_profile
```

```bash
# flutter
export PATH="/Users/akatsuka/Developer/02_library/flutter/bin:$PATH"
```


別Terminalを開きflutter sdkのバージョンを確認する`flutter --version`コマンドを実行し，Flutter SDKが設定されていることを確認します．

```dart
$ flutter --version
Flutter 0.5.1 • channel beta • https://github.com/flutter/flutter.git
Framework • revision c7ea3ca377 (8 weeks ago) • 2018-05-29 21:07:33 +0200
Engine • revision 1ed25ca7b7
Tools • Dart 2.0.0-dev.58.0.flutter-f981f09760
```

### **2.2.1 トラブルシューティング：XCodeライセンス**

下記のようなエラーメッセージが出る場合があるが，メッセージ内にある通り，`sudo xcodebuild -license`を実行してライセンスに同意する処理を実行します．

```bash
Agreeing to the Xcode/iOS license requires admin privileges, please run “sudo xcodebuild -license” and then retry this command.
```

Xcode/iOSのライセンスに同意する処理を実行する．

```
$ sudo xcodebuild -license
```

## **3.4. Flutterプロジェクトを作成**

flutterでプロジェクトを作成します．これは後で使用します．

```
$ flutter create helloworld
$ ls
helloworld
```

# **4. Android環境を構築**

## **4.1. Android Studioをインストール**

[Android Studio](https://developer.android.com/studio/)にアクセスし，Android Studioをダウンロードします．Android Studioは900MB近くあるので，ダウンロードするのに時間がかかります．　


![スクリーンショット 2018-07-23 21.55.44.png](https://qiita-image-store.s3.amazonaws.com/0/262328/779b425c-e226-467c-4335-0dea0073eeb6.png)

Android Studioをインストール

![スクリーンショット 2018-07-23 21.59.05.png](https://qiita-image-store.s3.amazonaws.com/0/262328/fc565995-3a0d-61a0-b867-788381444e8a.png)

インストールしたAndroid Studioを開くと初回の設定画面が表示されるので設定を選択していく

![スクリーンショット 2018-07-23 22.01.11.png](https://qiita-image-store.s3.amazonaws.com/0/262328/d030312f-9b27-6dd7-320d-2ac9c38a4630.png)

![スクリーンショット 2018-07-23 22.01.19.png](https://qiita-image-store.s3.amazonaws.com/0/262328/9a814954-76dc-b3fd-c1db-391bb2928366.png)

![スクリーンショット 2018-07-23 22.01.27.png](https://qiita-image-store.s3.amazonaws.com/0/262328/25d487c1-8e4a-4aca-42e3-923d5922f4d2.png)

![スクリーンショット 2018-07-23 22.01.38.png](https://qiita-image-store.s3.amazonaws.com/0/262328/c7605083-4d9e-b3a6-826c-b984172a00a7.png)

ここまでで設定が完了．

## **4.2. Android Studioで適当にプロジェクトを作成**

flutterで作成したプロジェクトをシミュレーターで実行するために，Android Emulatorを実行します．適当にAndroidプロジェクトを作成していきます．

![スクリーンショット 2018-07-23 22.06.04.png](https://qiita-image-store.s3.amazonaws.com/0/262328/d366440b-25fa-ce22-1401-d186178b8c4f.png)

![スクリーンショット 2018-07-23 22.11.03.png](https://qiita-image-store.s3.amazonaws.com/0/262328/c6e4ce51-9734-b0e7-0995-00b1d61bf161.png)

![スクリーンショット 2018-07-23 22.11.17.png](https://qiita-image-store.s3.amazonaws.com/0/262328/5095779e-a76e-1040-611f-4d641a0815de.png)

![スクリーンショット 2018-07-23 22.11.45.png](https://qiita-image-store.s3.amazonaws.com/0/262328/e7f577c4-a611-85f4-4251-0cfb5db07e88.png)

![スクリーンショット 2018-07-23 22.11.53.png](https://qiita-image-store.s3.amazonaws.com/0/262328/a833ec6d-2131-357a-4cdf-451d2af0edb0.png)

![スクリーンショット 2018-07-23 22.12.00.png](https://qiita-image-store.s3.amazonaws.com/0/262328/35d6626a-97f2-a025-b421-2beca4c851e5.png)

Androidプロジェクトを作成しました．`Install Build Tools 27.0.3 and sync project`とエラーメッセージが出ている場合は，クリックして必要なツールをインストールします．

![スクリーンショット 2018-07-23 22.15.08.png](https://qiita-image-store.s3.amazonaws.com/0/262328/7e5e18a9-c00d-6ab6-044d-ca53b2eb972f.png)

![スクリーンショット 2018-07-23 22.17.17.png](https://qiita-image-store.s3.amazonaws.com/0/262328/75f3adb1-34cb-e631-1dac-fcb421a29924.png)

![スクリーンショット 2018-07-23 22.17.26.png](https://qiita-image-store.s3.amazonaws.com/0/262328/43481b64-7cf5-50b8-a741-cd85cc992ad3.png)

## **4.3. Android Emulatorを作成**

準備ができたのでAndroid Emulatorを実行します．
[Tools]->[AVD Manager]を選択

![スクリーンショット 2018-07-23 22.18.28.png](https://qiita-image-store.s3.amazonaws.com/0/262328/d3b0729a-9b0c-2fe8-5e2b-68ec48672d5f.png)

[+Create Virtual Device]をクリック

![スクリーンショット 2018-07-23 22.19.52.png](https://qiita-image-store.s3.amazonaws.com/0/262328/342dec6c-3331-035c-e971-67476a9ba844.png)

ここでは[Nexus 5X]を選択

![スクリーンショット 2018-07-23 22.20.52.png](https://qiita-image-store.s3.amazonaws.com/0/262328/c8b18be3-91bf-6139-ac67-573481d03190.png)

[API 28]を選択．[Download]を実行．ダウンロードが完了したら[Next]をクリック

![スクリーンショット 2018-07-23 22.21.37.png](https://qiita-image-store.s3.amazonaws.com/0/262328/b101bc52-29d4-6c71-f319-9b56726095eb.png)

[Finish]を選択

![スクリーンショット 2018-07-23 22.26.09.png](https://qiita-image-store.s3.amazonaws.com/0/262328/761edd1a-7ba8-e382-aacb-0949b348ce01.png)

Emulator一覧に作成したEmulatorが表示される．

![スクリーンショット 2018-07-23 22.28.25.png](https://qiita-image-store.s3.amazonaws.com/0/262328/7fd27aa9-cd5c-7990-4a93-076df21fe45d.png)

## **4.4. Android Emulatorを起動**

Emulatorを選択肢，右のプレイボタンをクリックしEmulatorを実行します．

![スクリーンショット 2018-07-23 22.28.25.png](https://qiita-image-store.s3.amazonaws.com/0/262328/7fd27aa9-cd5c-7990-4a93-076df21fe45d.png)

Emulatorが起動しました．

![スクリーンショット 2018-07-23 22.29.28.png](https://qiita-image-store.s3.amazonaws.com/0/262328/fb9c2da0-3ecb-c539-362a-ec61341760d1.png)

では，AndroidのEmulatorで,すでに作成してあるflutterプロジェクトを実行します．

その前に，下記を実行し，Androidのライセンスに同意します．

```
$ flutter doctor --android-licenses
```

## **4.5. flutterのサンプルプロジェクトを実行**

作成したFlutterのプロジェクトディレクトリに`cd`します．

```bash
$ cd /Users/akatsuka/Developer/01_work/03_flutter/helloworld
```

そして，`flutter run`を実行し，Androidのエミュレーターで作成してプロジェクトを実行します．

```
$ flutter run
No connected devices.
```

なぜかエミュレーターがないとエラーが表示される．
エミュレーター一覧を出すと，先程作成したemulatorが表示される．

```
$ flutter emulators
1 available emulator:

Nexus_5X_API_28 • Nexus 5X • Google • Nexus 5X API 28

To run an emulator, run 'flutter emulators --launch <emulator id>'.
```

なぜ初回失敗するかわかりませんが，再度**Android Emulatorを作成**し,**Android Emulatorを起動**し，再度`flutter run`を実行するとflutterのプロジェクトがEmulator上で起動します．

```
$ flutter run
Using hardware rendering with device Android SDK built for x86. If you get graphics artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...                                      13.4s
Resolving dependencies...                                   66.0s
Running 'gradlew assembleDebug'...                          14.3s
Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk...                  1.4s
I/FlutterActivityDelegate( 6392): onResume setting current activity to this
D/EGL_emulation( 6392): eglMakeCurrent: 0xde22fd20: ver 3 0 (tinfo 0xcb17f170)
Syncing files to device Android SDK built for x86...
D/        ( 6392): HostConnection::get() New Host Connection established 0xde275980, tid 6420
D/EGL_emulation( 6392): eglMakeCurrent: 0xde22f540: ver 3 0 (tinfo 0xde276e40)

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:8100/
For a more detailed help message, press "h". To quit, press "q".
```
![スクリーンショット 2018-07-23 22.40.53.png](https://qiita-image-store.s3.amazonaws.com/0/262328/29c30d2d-db2c-d22b-2a62-b1ca43aad703.png)

# **5. iOS環境を構築**

## **5.1. Xcodeをインストール**

App StoreからXcodeをインストールします．時間が結構かかります．

![スクリーンショット 2018-07-25 21.24.51.png](https://qiita-image-store.s3.amazonaws.com/0/262328/e4f120c5-00a3-2efb-dcbb-296cbff137d6.png)

## **5.2. Xcode command-line toolsを設定**

Xcode command-line toolsを設定します．

```bash
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer from the command line.
```

## **5.3. Xcodeのライセンスに同意**

Xcodeのライセンスを同意します．

```
$ sudo xcodebuild -license from 
```

## **5.4. Xcodeを起動**


Xcodeを実行すると下記のメッセージが表示されることがあります．．`Install`を選択します．

```
Install Additional required components
```

## **5.5. Simulatorを起動**

Simulatorを起動する方法は２つあります．

- コマンドラインからSimulatorを起動
- GUIからSimulatorを起動

### **5.5.1. コマンドラインからSimulatorを起動**

Simulatorをコマンドラインから実行します．

```
$ open -a Simulator
```

### **5.5.2 GUIからSimulatorを起動**

Xcodeを起動します．

[Xcode]->[Open Developer Tool]->[Simulator]でSimulatorを起動します．

![スクリーンショット 2018-07-25 21.45.20.png](https://qiita-image-store.s3.amazonaws.com/0/262328/68f31c83-8a68-7c96-625e-4a568095479a.png)

Simulatorが起動しました．

![スクリーンショット 2018-07-25 21.46.21.png](https://qiita-image-store.s3.amazonaws.com/0/262328/28c3ed21-d129-4472-fe04-f5c3a64e547f.png)

## **5.6. flutterのサンプルプロジェクトを実行**

作成してあるflutterプロジェクトのディレクトリに移動します．

```bash
$ cd /Users/akatsuka/Developer/01_work/03_flutter/helloworld

$ ls
README.md		android			build			helloworld.iml		helloworld_android.iml	ios			lib			pubspec.lock		pubspec.yaml		test
```

デバイス一覧を確認しiOSシミュレーターが記載されるか確認します．

```bash
$ flutter devices
1 connected device:

iPhone X • 0B75AD0E-E767-421C-82EF-BAA7BE0FF6C3 • ios • iOS 11.4 (simulator)
```


flutterプロジェクトをiOSのシミュレーターで実行します．

```bash
$ flutter run
Launching lib/main.dart on iPhone X in debug mode...
Starting Xcode build...
 ├─Assembling Flutter resources...                    1.1s
 └─Compiling, linking and signing...                  8.7s
Xcode build done.                                           11.5s
Syncing files to device iPhone X...                          3.8s

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:8100/
For a more detailed help message, press "h". To quit, press "q".
```

実行出来ました．

![スクリーンショット 2018-07-25 22.02.48.png](https://qiita-image-store.s3.amazonaws.com/0/262328/daf1d1df-8707-3b45-57da-9eb4e220add5.png)