絶対にくじけないFlutter開発環境構築(VS Code)

1. はじめに

ごめんなさい。タイトル負けしている内容なので先に謝っておきますm( )m

Flutterも大分成熟したようで正式版リリースが待ち遠しいですね。
日本でも、もう既にプロダクトに採用されている事例もあるようでアーリーアダプターではない私も手を付け始めています。

新しい言語、新しいフレームワークなどに手を付ける場合、一番つまずく可能性が高いのは入り口の部分ですよね。
そこをクリアすれば、その技術のテーストが理解でき、感覚的に前に進めるものです。
ということで、この投稿では「何も入っていない、まっさらな MacBook にFlutter開発環境を構築するまで」の軌跡を たらたら ペタペタ 記述&貼り付けしていきます。

今回使った環境: macOS High Sierra(初期インストール直後)

2. コツ?

Flutterの開発環境構築は 公式サイトの説明 及び 診断コマンド(flutter doctor) が非常に優秀で、指示されるままにコマンドを実行していれば比較的容易に開発環境構築完了まで行きつけるのでは、と思います。
「flutter doctor」コマンドは「叩くべきコマンド」や「ダウンロードすべきインストーラのあるURL」を丁寧に教えてくれます。
とはいえ、やることは段階的にいろいろあるので躓くことはあるかと。。。
基本的には、最終的に以下が抑えられればイケるはず!

  • XCodeiOSアプリがビルド&実行できる状態になっている
  • Android SDKがインストールされandroidアプリがビルド&実行できる状態になっている(簡単に言うとAndroid Studio環境が整っていればOK)
  • その他 Flutter が要求する諸々・・・

3. まっさらなMacにFlutter開発環境を構築するぞ!

皆さんの各環境毎に、各モジュール類がどれだけ既にインストールされているかによってやるべきことは変わってくるのですが、ここではまっさらなMac(High Sierra)に対してFlutterをインスールした作業をペタペタ貼っていきます。(なので、最短距離のインストール手順ではないです。本当に履歴をペタペタという感じ)

3.1. Flutterをダウンロード

公式サイトからzipファイルをダウンロードします。

flutter.io

「Get the Flutter SDK」項目の下の「flutter_macos_v0.7.3-beta.zip 」です。

3.2. Flutterのzipを解凍(配置)

ダウンロードしたzipを任意のディレクトリに解凍します。
Flutterのbin自体が含まれているので、いわゆるインストール先になります。
そういう意味で適切なディレクトリに置いてください。
ここでは公式サイトの例と同じく ~/develop に解凍します。
解凍したファイルは以下のような状態です。

$ cd ~/develop/flutter
$ ls -la

[beta]
total 168
drwxr-xr-x@ 24 daigo  staff    768  9  9 11:49 .
drwxr-xr-x  50 daigo  staff   1600  9  9 09:58 ..
-rw-r--r--@  1 daigo  staff   6148  9  9 11:51 .DS_Store
-rw-r--r--@  1 daigo  staff   6214  9  5 11:47 .cirrus.yml
drwxr-xr-x@ 14 daigo  staff    448  9  8 18:01 .git
-rw-r--r--@  1 daigo  staff    516  9  5 11:47 .gitattributes
drwxr-xr-x@  5 daigo  staff    160  9  5 11:47 .github
-rw-r--r--@  1 daigo  staff   1566  9  5 11:47 .gitignore
drwxr-xr-x@  6 daigo  staff    192  9  5 11:50 .idea
drwxr-xr-x@  4 daigo  staff    128  9  5 11:47 .pub-cache
-rw-r--r--@  1 daigo  staff   1004  9  5 11:47 AUTHORS
-rw-r--r--@  1 daigo  staff  13316  9  5 11:47 CONTRIBUTING.md
-rw-r--r--@  1 daigo  staff   1520  9  5 11:47 LICENSE
-rw-r--r--@  1 daigo  staff   1107  9  5 11:47 PATENTS
-rw-r--r--@  1 daigo  staff   6706  9  5 11:47 README.md
-rw-r--r--@  1 daigo  staff   7046  9  5 11:47 analysis_options.yaml
-rw-r--r--@  1 daigo  staff    350  9  5 11:47 appveyor.yml
drwxr-xr-x@  6 daigo  staff    192  9  5 11:47 bin
drwxr-xr-x@ 14 daigo  staff    448  9  9 11:51 dev
drwxr-xr-x@ 12 daigo  staff    384  9  5 11:47 examples
-rw-r--r--@  1 daigo  staff   1749  9  5 11:47 flutter_console.bat
-rw-r--r--@  1 daigo  staff    296  9  5 11:47 flutter_root.iml
drwxr-xr-x@ 12 daigo  staff    384  9  9 11:50 packages
-rw-r--r--@  1 daigo  staff      5  9  9 19:36 version

3.3. Flutterにパスを通す

~/.bashrcにFlutterへのパスを追記しておきます(zshの方は ~/.zshrcへ)。

~/.bashrc ファイル

export PATH=~/develop/flutter/bin:$PATH

flutterコマンドの動作確認をします。「source ~/.bashrc」するかターミナル新規オープンして、以下のコマンドを実行します。

$ flutter --version

あと、初期状態のMacだと ~/.bashrc が読み込まれない設定になっているので、その場合は以下を参考に ~/.bash_profile ファイルを記述します。

blog.ruedap.com

3.4. flutter doctorで診断する

flutter doctor コマンドを実行します。
「Flutter / Android toolchain / iOS / Android Studio / Connected devices」という5つのカテゴリー毎に、Flutter開発環境を構築する上で
「何が足りていないのか?」
「どうすれば解決できるのか?」
を事細かに診断してレポートしてくれます。
以下がコマンドの実行結果です。

$ flutter doctor

Building flutter tool...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.7.3, on Mac OS X 10.13.6 17G65, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.io/setup/#android-setup for detailed instructions).
      If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ Brew not installed; use this to install tools for iOS device development.
      Download brew at https://brew.sh/.
[✗] Android Studio (not installed)
[!] Connected devices
    ! No devices available

! Doctor found issues in 4 categories.

よく見ると「具体的に実行すべきコマンド」「ダウンロードすべき物のURL」がすべて出力されています。
ということで指摘された問題点を順番に解決していきます。

3.5. gitも入ってないとこれも言われるかも・・・

gitも入っていないと思うので、たしか以下の画面が出てくるかも(この点、記憶が曖昧・・・)。

f:id:daigo-knowlbo:20180909224115p:plain

↑が出たら、インストールボタンを押してgitをインストールします。

3.6. Android toolchainの問題を解決

Android SDKないよ。Android Studiohttps://developer.android.com/studio/index.html からダウンロードしてインストールして。一回起動すればSDKコンポーネントのインストールをサポートしてくれるよ。」と言っています。
支持に従ってAndroid Studioをダウンロード&インストールします。

f:id:daigo-knowlbo:20180909224241p:plain

支持に従ってインストールして、新規にプロジェクト(MyApplication)を作成すると、以下のような画面になるかと。

f:id:daigo-knowlbo:20180909224323p:plain

右上に「Gradle project sync failed...」と表示され、右下に「Failed to find Tools revisions 27.0.3」と表示されています。
すぐ下の「Install BuildTools 27.0.3 and sync project」(青い文字)をクリックして、不足しているツールをインストールします。

f:id:daigo-knowlbo:20180909224452p:plain

で、実行します(緑の▶ボタン)。

どのデバイスで実行するかの選択画面が表示されます。

f:id:daigo-knowlbo:20180909224652p:plain

物理デバイス繋いでないし、emulatorも作ってないので、左下の「Create New Virtual Device」をクリックします。

適当にNexus6にして

f:id:daigo-knowlbo:20180909224758p:plain

Nougat x86をダウンロードして、、、Finish。

f:id:daigo-knowlbo:20180909224813p:plain f:id:daigo-knowlbo:20180909224905p:plain

出来たっぽい。
f:id:daigo-knowlbo:20180909224837p:plain

作ったemulatorを選択してOK。

f:id:daigo-knowlbo:20180909224924p:plain

「Instant Run」のインストールを促される。要らないと思うけど、ここでは一応入れました。

f:id:daigo-knowlbo:20180909225146p:plain

動いた!

f:id:daigo-knowlbo:20180909225157p:plain

いい感じにAndroid開発環境が出来たっぽいので、もう一回 flutter doctor してみる。

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel beta, v0.7.3, on Mac OS X 10.13.6 17G65, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ Brew not installed; use this to install tools for iOS device development.
      Download brew at https://brew.sh/.
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
    ! No devices available

! Doctor found issues in 3 categories.

Androidは、まだダメ出しされました。→「Some Android licenses not accepted.」
実行すべきコマンドの指示も出ているので、素直に実行。

$ flutter doctor --android-licenses

Warning: File /Users/daigosora/.android/repositories.cfg could not be loaded.

5 of 6 SDK package licenses not accepted. 100% Computing updates...     

Review licenses that have not been accepted (y/N)? y

・・・省略・・・こんな感じで accepted y/N を何回か聞かれるので yエンター、yエンターする(ちゃんと読んで承諾してね)。

しつこいけど、ここで flutter doctor すると以下のようにAndroid toolchainがOKとなります。

$ flutter doctor

[✓] Flutter (Channel beta, v0.7.3, on Mac OS X 10.13.6 17G65, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.2)
[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ Brew not installed; use this to install tools for iOS device development.
      Download brew at https://brew.sh/.
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
    ! No devices available

! Doctor found issues in 2 categories.

3.7. iOS toolchainの問題を解決

次はiOSの問題の解決を。
doctorは、「XCodeをインストールして!ダウンロードするかAppストアからインストールしてね」と言っているので、Appストアを開きXCodeをインストールします。

f:id:daigo-knowlbo:20180909225447p:plain

指示ではインストール後に「sudo xcode-select --switch 」しろと書いてあるけど、ここではXCode起動していOSアプリがSimulatorで動くことを確認します(コマンドじゃなくて、これでもOK)。

XCodeを起動します。
「Create a new Xcode project」をクリックします。

f:id:daigo-knowlbo:20180909225526p:plain

とりあえず「Single View App」を選択。

f:id:daigo-knowlbo:20180909225810p:plain

こんな設定で。

f:id:daigo-knowlbo:20180909225747p:plain

そのまま実行します(▶ボタンクリック)。

f:id:daigo-knowlbo:20180909230012p:plain

OK!!(XCodeのSimple View Appはで生成したアプリはラベルも何もない状態なので分かりにくいけど真っ白な画面が正常状態です)

(1) brewをインストール

そうそう、もう1つ指摘されていました。
Brew not installe」
初期状態Macから始めているのでbrewも入っていません。
指示された「https://brew.sh/」をブラウザで開くと、brewインストールコマンドが表示されるます。
そのコマンドをそのままターミナルにコピー&Enterします。

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

(2) 再度 flutter doctor

再度、flutter doctor してみます。

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.7.3, on Mac OS X 10.13.6 17G65, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.2)
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
    ! No devices available

! Doctor found issues in 2 categories.

iOS toolchain はまだクリアしませんねー。
まあ、実行すべきコマンドは丁寧に指示してくれています。
これらは単純にターミナルにコピーして実行するだけです。

$ brew install --HEAD libimobiledevice
...
$ brew install ideviceinstaller
...
$ brew install ios-deploy
...
$ brew install cocoapods
...
$ pod setup

3.8. 結構いい感じのはず。再度 flutter doctor

しつこいけど 再度 flutter doctor を実行してみます。

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.7.3, on Mac OS X 10.13.6 17G65, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.2)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
    ! No devices available

! Doctor found issues in 1 category.

いい感じですね。
Android Studioに関してはFlutterプラグインが入ってないと言われてますが、私はエディタ(IDE)としてVisual Studio Codeを使うつもりなのでこれは無視して構いません。Android StudioでFlutter開発を行うつもりならプラグインをインストールする必要があります。
「Connected devices」については、この段階では、実機を接続していない+emulator/simulatorも起動していないので、No devices availableと表示されているだけです。
Android Studioセットアップ時にAndroidアプリがemulatorで起動することは確認していますし、iOSについても同様にXCodeで作成したiOSアプリがSimulatorで動作するのを確認済みなのでこの点は問題ありません。

4. Visual Studio Codeをインストール

ここでは、Flutter開発のエディタ(IDE)としてVisual Studio Codeを利用します。
ということでVS Codeをダウンロード&インストール!

code.visualstudio.com

上記から、zipファイルをダウンロードし、解凍したアプリを「アプリケーション」にヒョイって持っていく感じでインストールします。

4.1. Flutter拡張機能プラグイン)をインストール

VS Codeの左の「拡張機能」アイコンをクリックします。

f:id:daigo-knowlbo:20180909231054p:plain

「Flutter」で検索。そのまま「Flutter」という名前の拡張機能が出てくるので、インストールします。VS Codeは再起動させます。

f:id:daigo-knowlbo:20180909231141p:plain

これで、開発環境構築完了です!!

5. Hello Flutterを作ってみる

では、Hello Flutterプロジェクトを作成して iOS / Android で動作するのか試してみましょう。

ターミナルを開き、プロジェクトを作成したい任意のディレクトリに移動します。
ここでは ~/workspace としました。(go 1.10みたいに環境ディレクトリ縛りは無いのでご自由な場所で)

ディレクトリを作って。

$ cd ~/
$ mkdir workspace
$ cd workspace
$ pwd

/Users/daigo/workspace

「flutter create 【プロジェクト名】」コマンドでFlutterアプリの雛形が作成されます。

$ flutter create helloflutter

Creating project helloflutter...

  helloflutter/ios/Runner.xcworkspace/contents.xcworkspacedata (created)

  helloflutter/ios/Runner/Info.plist (created)

...省略...

Wrote 65 files.

[✓] Flutter is fully installed. (Channel beta, v0.7.3, on Mac OS X 10.13.6 17G65, locale ja-JP)
[✓] Android toolchain - develop for Android devices is fully installed. (Android SDK 28.0.2)
[✓] iOS toolchain - develop for iOS devices is fully installed. (Xcode 9.4.1)
[✓] Android Studio is fully installed. (version 3.1)
[!] Connected devices is partially installed; more components are available.

Run "flutter doctor" for information about installing additional components.

All done! In order to run your application, type:
  $ cd helloflutter
  $ flutter run
Your main program file is lib/main.dart in the helloflutter directory.

5.1. Visual Studio Codeで開く

「ファイル→開く」で「~/workspace/helloflutter」を開きます。
./lib/main.dart ファイルがアプリのメインコード(エントリーポイント)になります。

f:id:daigo-knowlbo:20180909231338p:plain

ステータスバー(下の水色のバー)の右の方に No Devices と表示されているので、クリックします。 すると、上のコマンドパレットに、事前に作成済みの「Nexus 6」と「iOS Simulator」が表示されます。

f:id:daigo-knowlbo:20180909231357p:plain

まず「iOS Simulator」を選択します。するとiOS Simulatorが起動してきます。

f:id:daigo-knowlbo:20180909231410p:plain

続けてVS Codeメニュー「デバッグデバッグの開始」を選択します(もしくはF5クリック)。

f:id:daigo-knowlbo:20180909231429p:plain

サンプルが起動しました。
VS Code上部の、「赤い■ボタン」を押すとデバッグが終了します。

次にステータスバー右の「iPhone X(iosSimulator)」をクリックし、「Nexus 6」を選択します(表示されないときは、一旦 iOS Simulator を終了してみてください。もしくはAndroid Emulatorを事前に起動しておいてください)。
するとAndroid Emulatorが起動してきます。
VS Codeメニュー「デバッグデバッグの開始」を選択します(もしくはF5クリック)。

f:id:daigo-knowlbo:20180909231506p:plain

androidでも無事に実行出来ました!

ブレークポイントもHot Reloadも効くよ

この状態で、
Visual Studio Codeブレークポイントを付ければもちろん止まります。
更にデバッグ実行状態でコードを修正して保存すれば「Hot Reload」も動作します(コード修正が即座に実行中アプリに反映)。

6. まとめ

ということで、必要以上に(?)長々とFlutter開発環境構築手順について書いてきました。
皆さんの環境毎に追加でインストールすべきモジュールは異なります。
それらは親切にFlutter doctorが教えてくれもします。
本投稿では、まっさらなMac環境からFlutter開発環境を構築するまでの手順(というか軌跡というか?)をまとめました。
ここに記述させていただいた内容で、何かに躓いてしまった方の助けになる情報が1つでもあれば幸いです。