Flutter を Install する（macOS）

Flutter を Install する（macOS）

December 31, 2021

公式にわかりやすい手順があります。（以下は macOS のページです。）

https://docs.flutter.dev/get-started/install/macos

ただし、上記手順では直接インストールしているものを、どうせなら Homebrew 経由でインストールしたかったり、あとは個々人の環境によって当然ながらすでにインストールされているものが違ったりしますので、わたしの場合のインストール手順ということでこの記事に記録しておきます。

私の環境 #

これまで Web アプリ開発のみでネイティブアプリの開発経験はありません。そのため、ネイティブアプリ開発に必要なものは一切入っていない状態です。

ハードウェア / OS

  • ハードウェア: Intel Mac
  • OS: macOS Big Sur (Version. 11.5)

インストールされているもの

  • Homebrew
  • Command line tools for Xcode
  • Visual Studio Code

インストールされていないもの（以降でインストールしていくもの）

  • Flutter
  • Xcode
  • CocoaPods
  • Android Studio

1. Flutter をインストール #

Homebrew でインストールします。

https://formulae.brew.sh/cask/flutter

brew install --cask flutter

Flutter インストール後、公式の手順ではパスを通す作業に続きますが、Homebrew でインストールした場合は不要です。

インストール後、flutter doctor を実行します。追加でインストールが必要なものを洗い出してくれます。

flutter doctor

結果

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.5 20G71 darwin-x64, locale en-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.dev/docs/get-started/install/macos#android-setup for
      detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✗] Xcode - develop for iOS and macOS
    ✗ 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
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        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 install see https://guides.cocoapods.org/using/getting-started.html#installation
      for instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.63.2)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

主に以下の３つが不足していると指摘されています。

  • ✗ Unable to locate Android SDK.
  • ✗ Xcode installation is incomplete
  • ✗ CocoaPods not installed.

それぞれインストールしていきます。インストールの順番は任意です。

2. Xcode をインストール #

Xcode をインストールします。Xcode は AppStore からインストールします。

https://apps.apple.com/us/app/xcode/id497799835

インストール完了後、以下を実行します。

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

その後 Xcode を開くと、ライセンスへの同意が求められますので対応します。または以下を実行しても同じです。

sudo xcodebuild -license

ここで改めて flutter doctor してみます。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.5 20G71 darwin-x64, locale en-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.dev/docs/get-started/install/macos#android-setup for detailed
      instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    ✗ CocoaPods not installed.
        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 install see https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.63.2)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

先程まで表示のあった ✗ Xcode installation is incomplete が解消されていることがわかります。

3. CocoaPods をインストール #

CocoaPods は Swift / Objective-C のパッケージマネージャです。

Homebrew でインストールします。

https://formulae.brew.sh/formula/cocoapods

brew install cocoapods

そして改めて flutter doctor してみます。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.5 20G71 darwin-x64, locale en-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.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.63.2)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

先程まで表示のあった ✗ CocoaPods not installed. が解消されました。

4. Android Studio をインストール #

Homebrew でインストールします。

https://formulae.brew.sh/cask/android-studio

brew install --cask android-studio

その後 Android Studio を開いてウィザードに従って操作します。追加で必要なものがインストールされます。

改めて flutter doctor してみます。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.5 20G71 darwin-x64, locale en-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.63.2)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

先程からメッセージが変わり、以下の２点が不足していることが指摘されています。

  • ✗ cmdline-tools component is missing
  • ✗ Android license status unknown.

5. Android SDK Command-line Tools をインストールする #

Android Studio の Preferences を開きます。

System Settings > Android SDK の SDK Tools タブから「Android SDK Command-line Tools (latest)」にチェックを入れ、OK を押下します。

Android Studio

その後ライセンスへの同意などが求められるので従います。これでインストールされます。

再び flutter doctor してみます。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.5 20G71 darwin-x64, locale en-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.63.2)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

✗ cmdline-tools component is missing が解消されました。

6. Android licenses に同意する #

以下を実行します。

flutter doctor --android-licenses

表示された内容に同意します。

また flutter doctor してみます。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.5 20G71 darwin-x64, locale en-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.63.2)
[✓] Connected device (1 available)

• No issues found!

ようやくすべての問題が解消されました。

ここまででインストールは完了です。

エディタをセットアップ #

ついでにエディタをセットアップしておきましょう。

プラグイン追加 #

Android Studio あるいは Visual Studio Code どちらを使う場合も入れるプラグインは変わりません。以下の２つです。（どちらのエディタでもプラグインの名称は同じです。）

  1. Flutter
  2. Dart

というプラグインをインストールしましょう。

Android Studio に Flutter SDK path を追加 #

私の場合だけかもしれませんが、Android Studio に Flutter SDK path が設定されておらず、いざ Flutter の新規プロジェクトを作成しようとしたときに設定するよう求められました。

（Homebrew 経由でインストールするとこうなるのかもしれません。）

Flutter SDK のパスは flutter doctor -v 以下で確認できます。

% flutter doctor -v
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.5 20G71 darwin-x64, locale en-JP)
    • Flutter version 2.8.1 at /usr/local/Caskroom/flutter/2.8.1/flutter
    • Upstream repository https://github.com/flutter/flutter.git