Zenn
📝

Mac への Flutter インストール作業の覚書(2024年2月)

2024/02/28に公開
Flutter
VS Code
macOS
tech

この記事について

内容

MacBook Pro に Flutter をインストールした作業の覚書

特徴

作業時点(2024年2月)で、Flutter の公式に記載されている、VS Code 1.77 以降で Flutter Extension を利用する方法でインストールしてみた。
https://docs.flutter.dev/get-started/install/macos/desktop?tab=vscode#software-requirements


※作業時点でのスクリーンショット

ただし、最終的には Android Studio もインストール。

引っかかった点

大きく２点

  • Cocoapods のインストールでのエラーの発生
    -> こちらの記事を参考にRuby のバージョンを上げることで解消(詳細後記)
  • Android-SDK の導入方法
    -> こちらの記事を参考に解消(詳細後記)

他にも

  • Flutter Extension 導入時にパスを通す設定を選ばなかった？
  • Android Studio をインストールしない方法はあったのか？

などなど、細かいところはあり。

作業時期と環境(開始時点で導入済みのソフトウェア等)

  • 作業時期: 2024年2月27日、28日
  • ハードウェア: MacBook Pro (Apple M3 Pro)
  • システムのバージョン: macOS 14.3.1（23D60）
  • Visual Studio Code のバージョン: バージョン: 1.86.2
  • Homebrew: 4.2.10

参考記事

インストール作業の覚書

最初はこちらの公式ドキュメントhttps://docs.flutter.dev/get-started/install/macos/desktop?tab=vscode#software-requirements に沿って作業を開始

Rosseta 2 のインストール

% sudo softwareupdate --install-rosetta --agree-to-license
Password:

Flutter Extension からの Flutter のインストール

VS Code の拡張機能で Flutter Extension をインストール

VS Code を再起動後、コマンドパレット([ Command(⌘) ] + [ Shift(⌃)] + [ P ]) から flutter とタイプして出てくる候補の中から Flutter: New Project を選択

右下に出てきたメニューから Download SDK をクリック

Home ディレクトリに development フォルダを作成して、その下に Clone Flutter

インストールが実行される

Flutter SDK のパスに関する項目が表示される。
ここで Open instruction を選んでしまったが、パスをクリップボードのコピーして .zshrc に追加する方が良かったと思われる。(後の作業でリカバリーする)

コマンドパレット([ Command(⌘) ] + [ Shift(⌃)] + [ P ]) から flutter: New Project を選択すると

サンプルのコードが入ったプロジェクトが作成される。

以上で、VSCode の Flutter Extension からの Flutter のインストールが完了。

XCode の設定

公式ドキュメントに従って Xcode 関連の設定を実施

% sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

% sudo xcodebuild -license

Cocoapods のインストールとエラー対応

続けて、Cocoapods のインストールをしたところエラーが出る

% sudo gem install cocoapods
・・・(中略)・・・
ERROR:  Error installing cocoapods:
	The last version of drb (>= 0) to support your Ruby & RubyGems was 2.0.6. Try installing it with `gem install drb -v 2.0.6` and then running the current command again
	drb requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

Mac に最初から入っている Ruby のバージョンが古いことが問題のようだったので、こちらの rbenvによるRubyのインストール手順まとめ を参考に、Ruby をバージョンアップ

Homebrew で rvenv をインストール

% brew install rbenv

.zshrc に以下を追加

export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

rbenv でインストール可能なバージョンを確認し

% rbenv install -l
3.0.6
3.1.4
3.2.3
3.3.0
jruby-9.4.6.0
・・・(以下省略)・・・

最新の安定版をインストール

% rbenv install 3.3.0

インストールされていることを確認して

% rbenv versions
* system
  3.3.0

シェルを再起動して、使用するバージョンを変更

% exec $SHELL -l
% rbenv global 3.3.0
% rbenv versions    
  system
* 3.3.0 (set by /Users/roka/.rbenv/version)

以上を実施した上で、再度 Cocoapods をインストールすると、インストールに成功

% sudo gem install cocoapods
Password:

インストールされていることを確認

% pod --version
1.15.2

現時点での状態確認

VSCode 上では flutter doctor が動作するが

[flutter] flutter doctor -v
[!] Flutter (Channel stable, 3.19.1, on macOS 14.3.1 23D60 darwin-arm64, locale ja-JP)
    • Flutter version 3.19.1 on channel stable at /Users/roka/development/flutter
・・・(中略)・・・
! Doctor found issues in 3 categories.
exit code 0

ターミナル上では Flutter が見つからず、動作せず。
前述の通りで、VSCode 以外の環境では、パスが通っていない。.zshrc に以下を追加。

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

ターミナルでも flutter doctor が動作するようになる

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.1, on macOS 14.3.1 23D60 darwin-arm64, locale
・・・(中略)・・・
! Doctor found issues in 2 categories.

この時点で未完了となっているのは

  • Android toolchain
  • Android Studio
    の２つ。

Android Studio の導入と起動(省略)

VSCode メインで作業をするつもりだが、必要になるかもしれないので、Homebrew から Android Studio をインストール。
その後起動して画面に沿って初回起動、動作確認。
特別なことがないのでこの部分は画面等省略。

Android toolchain (Android SDK)の導入

こちらの記事 【Mac M1】「flutter doctor」実行時の「cmdline-tools component is missing」の解決法 を参考に Android Studio で [Android Studio] - [Settings] で [Languages & Flameworks] - [Android SDK] に進み、[SDK Tools] のタブで SDK Command-line Tools Tools をインストール

最後に以下を実行

% flutter doctor --android-licenses

Flutter doctor での完了確認

以下のようにすべてOKになったことを確認

% flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.1, on macOS 14.3.1 23D60 darwin-arm64, locale
    ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.86.2)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

Discussion