Flutterインストール(for macOS)

アップデートの方法はこちら

2019/11/01 更新
macos10.15(Catalina) + flutter_macos_v1.9.1+hotfix.6-stable.zip のファイルで再確認

Flutterインストール方法

https://flutter.dev/docs/get-started/install/macos
を参考に。

flutterパッケージをDLしてパスを通す。

ポイント

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

サイトに説明がある方法だと、ウィンドウを閉じると設定が消えてしまうので
$HOME/.bash_profile
に対して設定をする。

$ vi ~/.bash_profile

でファイル追加、更新する。

export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

を追加して
[PATH_TO_FLUTTER_GIT_DIRECTORY]→flutterフォルダをおいているフルパス

$ source ~/.bash_profile

設定を保存すれば、flutterコマンドが使える。

echoコマンドで設定されたことが確認できる

$ echo $PATH

設定後、以下コマンドで確認

$ flutter precache

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝

と出れば成功。

flutter doctor

flutter doctorを実行し、足りない設定を追加していく

$ flutter doctor
! Doctor found issues in 5 categories.
shinyanoMacBook-Pro:~ kogame$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E226, locale
    ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! 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
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
[!] Android Studio (version 3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.33.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

brew install --HEAD libimobiledevice　でエラーが出たけどググって解決

問題が全部クリアされるとこんな感じになります。(AndroidとかXcodeとかOKになっているのは全部設定してからdoctorコマンドを実行したため)

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.15 19A602, locale
    ja-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.0)
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.39.2)
[✓] Connected device (1 available)

動作確認

flutterDirectoryの下にdevとexamples配下にサンプルがいくつかある。
Directory移動して、flutter runをすればiOSシミュレーターが起動して確認できた。

Xcode / iOSsimulatorで動かす

flutterだけではiOSはビルド、リリースはできないのでXcodeは必要です。
インストールしてください。

基本は公式サイト通り
https://flutter.dev/docs/get-started/install/macos#ios-setup

• AppStoreからXcodeをインストール
• Xcodeの設定のコマンド実行

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

• iOS simulatorを起動

$ open -a Simulator

• 動作確認のため、ダミープロジェクトを作成（後で削除してもOK）

$ cd '任意のフォルダ'
$ flutter create my_app

プロジェクトを実行しシミュレーターでアプリ起動

$ cd my_app
$ flutter run

シミュレーターにてアプリが起動できたら成功！

あと、サードパーティーのライブラリをインストールできるcocoapodsも入れておくほうがいい。
Xcodeでcocoapodsをすでに使っているならば設定は不要。

$ sudo gem install cocoapods
$ pod setup

公式ではprovisionの設定までそれとなく記載しているので必要であればXcode上で設定しておく。

Android Studioで動かす

こちらは特に設定はいらない。

AndoridStudioの最新をインストールする

FlutterとDartのプラグインをインストールする

1. Android Studioを起動
2. Toolbarにある Android Studioをクリック
3. Preferences画面表示される
4. Pluginsをクリック
5. MarketPlaceタブにてFlutterで検索してインストールする
6. 同様にDartで検索してインストールする

AndroidStudioで先程iOSで作ったプロジェクトを開く

シミュレーターかAndroidデバイスを接続して実行してアプリが起動できたら成功！