MacOSにflutterの環境を構築する

最近ちょっと話題に上がったので、Flutterの環境をMacOSに入れてみた。その際のメモ。

環境か下記の通り、

• MacOS High Sierra(10.13.4)
• flutter MacOS v0.4.4 beta

Flutterのインストール

基本的には、公式Get Started: Install on macOSの手順を踏んでいく。

1. flutter_macos_v0.4.4-beta.zip のダウンロードとzip展開を行う。

2. 展開したフォルダを好きな場所に配置。ここではホームディレクトリ配下に配置。

   ~
   └── flutter
   ├── AUTHORS
   ├── CONTRIBUTING.md
   ├── LICENSE
   ├── PATENTS
   ├── README.md
   ├── analysis_options.yaml
   ├── analysis_options_repo.yaml
   ├── appveyor.yml
   ├── bin
   ├── dev
   ├── examples
   ├── flutter_console.bat
   ├── packages
   └── version
   

3. ~/flutte/binにパスを通す。zshを使っているので、.zshrcにパスを記載。

   export PATH=$PATH:$HOME/flutter/bin
   

4. flutterの環境を確認

   $ flutter doctor
   Doctor summary (to see all details, run flutter doctor -v):
   [✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E202, 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 9.3.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 (not installed)
   [!] VS Code (version 1.23.1)
   [!] Connected devices
   ! No devices available
   ! Doctor found issues in 5 categories.
   

ここは、　各々の環境によって違うと思うけど、基本的に、✗が付いているところは対応が必要。
自分は、アプリを作る環境を全く作ってないので、道が遠い。。。

Android Studioのインストール

1. doctorで記載されている https://developer.android.com/studio/index.html からAndroid Studioをダウンロードしてインストール。

2. 再度、下記コマンドでflutterからライセンスの同意を行う。何回か、(y/n)を聞かれるので、yを返す。

   flutter doctor --android-licenses
   

3. flutter doctorで確認すると、Android Studioにpluginを入れろと言われているので、flutterとdartのpluginを入れる。flutterのpluginを入れようとすると、dartのpluginを入れるか聞かれるので、[Yes]で入れる。

   [✓] Android Studio (version 3.1)
   ✗ Flutter plugin not installed; this adds Flutter specific functionality.
   ✗ Dart plugin not installed; this adds Dart specific functionality.
   

iOS周りのインストール

1. 表示に記載がある通り、brewでコマンドを実行していく

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

   $ pip install six
   zsh: command not found: pip
   

   むぅ・・・

   sudo easy_install pip
   

   $ pip install six
   Requirement already satisfied: six in /System/Library/Frameworks/Python.framework/Versions/2.7/Extras/lib/python (1.4.1)
   matplotlib 1.3.1 requires nose, which is not installed.
   matplotlib 1.3.1 requires tornado, which is not installed.
   

   むぅ・・・
   色々と試しながらだったので正確なコマンドを拾えなかったのですが、

   brew reinstall python@2
   pip install six
   

   でインストールできた。

Visual Studio CodeにPluginを追加

1. Android Studioと同様に、VS Codeにflutterの拡張機能を追加。これも、flutterの拡張をインストールするとdartの拡張機能も入る

確認

携帯端末をPCと接続した状態か、open -a Simulatorでシミュレータを起動した状態で確認すると、

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E202, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4)
[✓] Android Studio (version 3.1)
[✓] VS Code (version 1.23.1)
[✓] Connected devices (1 available)

携帯端末未接続だと、

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E202, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4)
[✓] Android Studio (version 3.1)
[✓] VS Code (version 1.23.1)
[!] Connected devices
    ! No devices available

とりあえず、全部クリア。

Android Studio立ち上げ

1. Start a new Flutter Projectを選択し、右上の<no devices>からOpen iOS Simulatorを選択すると、iOSのデバイスが立ち上がる。
2. シミュレーターの起動が終わったら、実行ボタンで実行すると、シミュレーターでアプリが実行される。

---

参考サイト

• Get Started: Install on macOS