Flutter環境構築の記録（Mac）【画像付き】【エラー解決まで】

とあるFlutterのアプリ開発の参考書を買って楽しみに読み始めたものの、環境構築のページに書いてある通りに進めても全く環境構築が進みませんでした。

比較的新しいものを買ったのに、、、悲しい、、、

ということでインターネットでエラーの状況など検索しながら自力で環境構築を進めたので記録として残しておこうと思います。（2024年7月1日時点）

PCのスペックはM3チップ搭載のMacBook Airです。新しいMacで、このPCでのプログラミングの環境構築は今回のFlutterが初めてなので、事前にインストールしているアプリ・ツールもなくまっさらな状態からのスタートとなります。（Chromeなどプログラミングと関係ないものはインストール済みです。）

Flutter

Flutter SDKのダウンロード

公式サイトに行き、画面右上の「Get started」を押します。

Current deviceと表示されている「macOS」を選択します。

Recommendedと表示されている「iOS」を選択します。

下にスクロールしていき、Install the Flutter SDKの見出しのところで「Download and install」のタブを選択し、cpuに合わせてzipファイルをダウンロードして解凍します。（M○チップの場合はApple Silicon、Intel社製のCPUの場合はIntel Processor）

ユーザーフォルダ直下に「development」という開発用フォルダを作成し、解凍したflutterフォルダを置きます。

パスを通す

vimというエディターでzshrcという設定ファイルにアクセスします。

vim .zshrc

キーボードの「i」を押して「INSERT」モードに切り替え、パスを入力します。

export PATH=”$PATH:/Users/（ユーザー名）/development/flutter/bin”

「Esc」を押して「INSERT」モードを終了し、「:wq」と入力してEnterで上書き保存します。

設定の有効化を行います。

source ~/.zshrc

次のコマンドでパスが表示されれば成功です。

which flutter

Android Studio

App StoreからAndroid Studioをインストールします。

Android SDK Command-line Toolsのインストール

Android Studioを起動し、「More Actions」から「SDK Manager」を開きます。

「SDK Tools」タブを開き、「Android SDK Command-line Tools(latest)」にチェックを入れOKを押します。

確認画面が出るのでOKを押します。

Xcode

XcodeをインストールするとGitも一緒にインストールされるため、個別にGitをインストールする必要はありません。

Xcodeのインストールを行い、一度起動して利用規約に同意します。（一度起動して利用規約に同意しておかないとflutter doctorを行ったときにエラーになります。）

CocoaPodsのインストール

iOSのプラグインを管理するCocoaPodsをインストールします。（インストールが始まるまでに少し待つのでフリーズしたように見えるかも）

sudo gem install cocoapods

参考書にはこの方法が書いてあり、このコマンドでインストールできれば問題ないですが、私はこの方法ではエラーになりCocoaPodsのインストールを行えませんでした。

エラーと解決方法は後述します。

Rosettaのインストール

Appleシリコン搭載のMac（M〇チップなど）の場合はRosettaをインストールします。

Rosettaとは、Appleシリコンを搭載したMacでも、Intelプロセッサ搭載Mac用に開発されたアプリを使えるようにするツールのことです。

理由はよくわかっていませんが（Flutter SDKの一部で必要な部分がある？）、とにかくFlutterの環境構築を進めていく上でRosettaは必要みたいです。

以下のコマンドでインストールできます。

sudo softwareupdate –install-rosetta –agree-to-license

flutter doctorとエラーの修正

ここまでで下記のコマンドを実行するといくつかのエラーが表示されるのでそれを解決していきます。

flutter doctor

flutter doctorは、flutterと関連ツールのインストール状態やバージョンを確認できるコマンド

私の画面ではAndroid StudioのインストールでCommand-line Toolsを後からインストールしたので、そのエラー（1個目のエラー）も出てしまっていますが、これまでの手順を順に行なってきた場合には3つのエラー（2〜4個目のエラー）が出ているはずです。

AndroidSDKのライセンスのエラーが出る場合（Android license status unknown）

コンソールの指示に従い以下のコマンドを実行します。

flutter doctor –android-licenses

下のように聞かれるのでyを押してEnter。

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

ライセンス本文が表示された後に以下のように聞かれるのでyを押してEnterを未承認分繰り返します。（自分の場合は3回だった）

Accept? (y/N):

Unable to get list of installed Simulator runtimes

XcodeのiOSシミュレータがインストールされていないことによって起こるエラーのようです。

Xcodeを起動し、画面右上のSettingsを押します。

Platformsタブを選択すると、iOSシミュレータがインストールされていないことがわかるので、「Get」を押してシミュレータをインストールします。

CocoaPods not installed

以下のコマンドでcocoapodsをインストールしようとするとエラーになります。エラーの内容を見てみると、rubyのバージョンが古いために起こるエラーのようです。

sudo gem install cocoapods

以下のコマンドでrubyのバージョンを確認したところ2.6.10と表示されました。2.7.0未満だとエラーになるみたいです。

ruby -v

解決法としてはrbenvを使ってCocoaPodsをインストールします。

Homebrewのインストール

HomebrewとはMacOS上で動作するパッケージ管理ツールです。

この後でインストールするrbenvなどをインストールするために必要になります。

パッケージ管理ツールとはインストール/アンインストールを管理したり、依存関係を管理したりするツールのこと

/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”

以下のコマンドで正常にインストールできているか確認するとbrewコマンドが見つかりませんとエラーになりました。

brew -v

パスが通っていないために発生するエラーのようなのでパスを通します。

vimというエディターでzshrcという設定ファイルにアクセスします。

vim .zshrc

キーボードの「i」を押して「INSERT」モードに切り替え、パスを入力します。

export PATH=/opt/homebrew/bin:$PATH

「Esc」を押して「INSERT」モードを終了し、「:wq」と入力してEnterで上書き保存します。

設定の有効化を行います。

source ~/.zshrc

改めて以下のコマンドを入力すると「Homebrew 4.3.7」と表示されたので正しくインストールできていることが確認できました。

brew -v

rbenvのインストール

rbenvは複数のrubyのバージョンを管理するためのツールです。

ruby-build は、異なるバージョンのRubyをコンパイルしインストールするための、 rbenv install コマンドを提供するrbenvのプラグインです。

Homebrewを使ってrbenvとruby-buildをインストールします。

brew install ruby-build rbenv

パスを通していきます。

vim ~/.zshrc

キーボードの「i」を押して「INSERT」モードに切り替え、パスを入力します。

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

「Esc」を押して「INSERT」モードを終了し、「:wq」と入力してEnterで上書き保存します。

設定の有効化を行います。

source ~/.zshrc

以下のコマンドでバージョンを確認すると「rbenv 1.2.0」と表示されたので正しくインストールできていることが確認できました。

rbenv –version

Rubyのインストール

インストール可能なRubyの最新安定版を確認します。

rbenv install –list

3.3.3をインストールします。

rbenv install 3.3.3

グローバルなRubyバージョン（何も指定しなかったときにデフォルトで選択されるバージョン）にインストールしたRubyのバージョンを指定します。

rbenv global 3.3.3

設定を反映させます。

rbenv init

以下のコマンドでバージョンを確認すると「3.3.3」と表示されたので正しくインストールできていることが確認できました。

rbenv versions

Cocoa Podsのインストール

最終確認として以下のコマンドを実行すると「/Users/ユーザーネーム/.rbenv/shims/gem」となっていることが確認できました。

which gem

Cocoa Podsをインストールします。

gem install cocoapods

「You don’t have write permissions for the /Library/Ruby/Gems/2.6.0 directory.」というエラーを吐きました。
もう一度「which gem」とするとなぜか「/usr/bin/gem」に戻っていました。なぜなのか、、、

rbenvのインストールでzshrcという設定ファイルに入力したパスに「export PATH=”$HOME/.rbenv/shims:$PATH”」のパスを追加修正します。（以下のようになります。）

export PATH=”$HOME/.rbenv/bin:$PATH”
export PATH=”$HOME/.rbenv/shims:$PATH”
eval “$(rbenv init -)”

すると「which gem」の結果が「/Users/ユーザーネーム/.rbenv/shims/gem」に戻りました。

改めて以下のコマンドを打つとインストールに成功しました。

gem install cocoapods

「flutter doctor」を実行すると、別の新しいエラーが出てきましたがとりあえずCocoa Podsのエラーは解決しました。

Xcode installation is incomplete; a full installation is necessary for iOS
and macOS development.

新しく増えたエラーを解決していきます。

ターミナルに表示された指示通りに以下のコマンドを順に実行します。

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

再び「flutter doctor」を実行するとエラーが消えました。

最後に

めちゃくちゃ長かったですがなんとか環境構築を終えることができました。

将来自分が別のPCでもう一度Flutterの環境構築をすることになったときのためにも記録を残しておきました。