Zenn
🫠

UIデザイナーがFlutterの環境構築に挑戦🍎

2024/12/29に公開
Flutter
Xcode
Android Studio
開発環境構築
CocoaPods
tech

環境情報

Macbook air M2 (2022)
メモリ 16GB
sonoma 14.6.1

参考にした記事・動画

2022 Latest! Setting Up Flutter Environment on M1 Mac【Beginner's Ultimate Guide】
【2024年最新版】MacでのFlutter環境構築| VSCode、Ruby、Xcode、Android Studioまで
【2024年版】MacでのFlutterの環境構築手順
環境構築(Mac編)
Flutter環境構築の記録（Mac）【画像付き】【エラー解決まで】2024

Android studioのインストール

  • Flutterにアクセス > MacOSをクリック > Androidをクリック
    • Android studioをダウンロード
      • Android studioを開いて手順通り進めていくともう一回ダウンロード画面が出てくる
      • ダウンロードが終わり、Android studioが開いたら「more actions」をクリック
      • SDK managerを選択
      • SDKtoolsタブをクリックし、「Android SDK command-line Tools(latest)」にチェックマークを入れる
      • OKを2回クリックすると「SDK component Installer」の画面でインストールされる
    • 上記全て終わった後、Android studio左にある「Plugin」タグからFlutterとDartをインストール

Xcodeのインストール

  • AppstoreからXcodeダウンロード
    • XcodeをインストールするとGitも一緒にインストールされるらしい
      • 一度起動して利用規約に同意しておかないと、flutter doctorを行ったときにエラーになるらしいのでやる
      • IOSをダウンロード
        （今回は後ほど記載しているRosettaとcocopodsをインストールしてからIOSをダウンロードしたけど、こっち先でも問題ないのかな？）

Flutterのインストール

  • Flutterにアクセスし > MacOSをクリック > IOSをクリック
    • 下の方に「Install the Flutter SDK」のセクションがあるので、そこで「apple silicon」の方のZIPをダウンロード
    • MACの上部バーにある「移動」>「ホーム」をクリック
    • ホーム内にダウンロードして解凍したZipファイルをドラック＆ドロップ
      Warp（ターミナル）でホームにprojectフォルダを作成し、その中に今回作成するAppのフォルダを作成する。→ その中に解凍したFlutterフォルダをドラッグ＆ドロップする
      ↑本来ならホームディレクトリ内にdevelopmentフォルダを作成し、そこにflutterのパスを通すのがいいらしい😭

Flutter SDKのインストール場所についてですが、基本的には、flutter フォルダはどこに置いても問題ありませんが、一般的な推奨としては以下の点が挙げられます。
【プロジェクトとは別にするのが望ましい】
Flutter SDKは、プロジェクトの一部としてではなく、システム全体で利用できるように、Myapp のような特定のプロジェクトフォルダ内に入れず、独立した場所に配置することをお勧めします。例えば、~/development/flutter のような場所に置くと管理がしやすいです。

最終的にこの構成にした

/Users/ユーザー名/
│
├── development/      # Flutter関連などの開発用ツール
│
└── projects/         # 実際のアプリケーションやプロジェクトのフォルダ
    ├── my_flutter_app/  # 新しく作成したFlutterアプリ
    └── another_app/    # もう1つのアプリ

Flutterのパスを通す

Warp(ターミナル)を開いて、
今いる階層のディレクトリ内のファイルを確認するため以下を実行

ls

ホームが表示されているはずなので、
そこにprojectというフォルダを作るため以下を実行
※次からはdevelopmentフォルダを作成し、全てその中でやる！

mkdir project

project内に移動して、

cd project

Myappというフォルダを作るために以下を実行
※次からはdevelopmentフォルダを作成し、全てその中でやる！
※Myappとかここではいらん！

mkdir Myapp

Myapp内に移動

cd Myapp

現在使用しているデフォルトのシェルプログラムのパスを表示するために以下を実行
（最近のMacOSでは「Zsh」がデフォルトのシェルらしい）

echo $SHELL

語尾が「zsh」とでてきた場合、以下を実行

vim .zshrc

「~~~」←するとこんなのが縦でたくさん出てきた...
キーボードで「i」を押すとINSERTモードになる
そのまま1行目に以下を入力し、キーボードのEnterではなくescを押す

export PATH="$PATH:/Users/ユーザー名/project/Myapp/flutter/bin"

※ユーザー名はホームの名前

escを押した後、最後尾にいくので、以下を実行
（ここをずっと「q」なのに「p」でやってて3時間くらい時間溶かした..😇）

:wq

その後、以下を実行

source /Users/ユーザー名/project/Myapp/.zshrc

最後にちゃんとパスを通せたか確認するために、
以下を実行してflutterのバージョンが表示される確認する

flutter --version

私の場合は以下が表示されました〜😌

Flutter 3.27.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 17025dd882 (12 days ago) • 2024-12-17 03:23:09 +0900
Engine • revision cb4b5fff73
Tools • Dart 3.6.0 • DevTools 2.40.2

Androidライセンスを通す

※次からはちゃんとdevelopment内に移動してからやる！
Warp(ターミナル)にて、以下を実行する

flutter doctor --android-licenses

その後「y」を押してEnterを繰り返して終わり

iOSのプラグインを管理するcocoapodsのインストール

※次からはちゃんとdevelopment内に移動してからやる！
（今回はここをホーム内でしちゃったから余計な作業が発生😭）
その前に、AppleシリコンMacを使っているので、
Rosettaをインストールするため以下を実行

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

Rosetta は、Appleが開発した互換性レイヤーで、主に Apple Silicon (M1、M2 チップなど) のMacで、従来の Intelチップ搭載Mac 用に作られたアプリケーションを動作させるために使用されます。

そこからiOSのプラグインを管理するcocoapodsのインストールをするため、
以下を実行したものの、エラーが出た....

sudo gem install cocoapods

chatGPTに聞くと...

エラーメッセージによると、securerandom のバージョンが現在使用しているRubyのバージョン（2.6.10）に対応していないため、インストールが失敗しています。securerandom はRubyバージョン3.1.0以上を必要としており、現在のRubyのバージョンでは古いバージョン（0.3.2）を使うように指示されています。

とのこと。
ここでなんでRuby？と思って調べてみると、以下の回答がきた

Flutterの環境構築時にXcodeやCocoaPodsを使って依存関係をインストールする際に、いくつかのRubyのライブラリが必要になります。securerandom はそのうちの一つです。
CocoaPodsをインストールする際に Ruby が必要 なので、CocoaPods のインストールで Ruby バージョンが影響を及ぼしています。Flutter を使う上で必要な CocoaPods を正常にインストールするために、Ruby バージョンの更新が必須になるケースがあるということです。

そのままchatGPTからの指示にそって以下を実行

まず、エラーメッセージにあるように、securerandom のバージョン0.3.2をインストールしてみてください。

sudo gem install securerandom -v 0.3.2

するとパスワードを求められたので、入力。
そのままさらに指示通り以下を実行

その後、もう一度CocoaPodsをインストールしてみてください。

sudo gem install cocoapods

それでもエラーが...😭

cocoapods のインストール中にエラーが発生しているようですが、このエラーは、必要な依存関係やRubyのバージョンが原因となっている可能性があります

とにかく、現状だとcocoapodsをインストールできないらしい...
Rubyをアップグレードするのか、drbの古いバージョンをインストールするのかの2択とのこと。

今回はRubyをアップグレードする方向で指示を出してもらった
まずはHomebrewのインストールをするため以下を実行してパスワードを入力

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

するとなんか1行だけエラーが出てたから聞くと...

Homebrewが無事にインストールされたようですが、環境変数PATHにHomebrewのパスが追加されていないですね

その後指示通り以下を実行

echo >> /Users/ユーザー名/.zprofile
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/ユーザー名/.zprofile

からの以下を実行

eval "$(/opt/homebrew/bin/brew shellenv)"

そしてHomebrewが正しくインストールされたか確認するために、以下を実行

brew -v

いけてた！！😭

Homebrewを使って最新のRubyをインストールするため以下を実行

brew install ruby

インストールが完了したら、Rubyのバージョンを確認して、
アップグレードが成功したか確認するため以下を実行

ruby -v

↓これが出てきたけど、まだ古いらしい...

Flutter環境に必要なRubyのバージョンは3.1.0以上なので、さらにアップグレードする必要があります。

ruby -v
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin23]

まず、HomebrewでインストールされたRubyを確認するために以下を実行

brew list ruby

...ここでは最新のRubyが表示されてる！意味不明....

おそらく、システムの ruby バージョンが優先されているため、HomebrewでインストールしたRuby 3.4.1が正しく反映されていない状態です

現在使われているRubyのパスを確認するため以下を実行

which ruby

すると以下が出てきた

/usr/bin/ruby

which ruby コマンドで /usr/bin/ruby が表示された場合、システムにインストールされている古いバージョンのRuby（2.6.10）が優先されていることを意味します。これを解決するために、HomebrewでインストールしたRubyを優先的に使うように設定を変更する必要があります

😭
そのままGPTの指示通り進める

PATHの設定を変更して、HomebrewでインストールしたRubyを優先する

echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zprofile

これで、HomebrewでインストールされたRubyがシステムのRubyより優先されるようになります。

上記の変更を反映させるために、以下を実行

source ~/.zprofile

その後Warp(ターミナル)を再起動させて、
再度、Rubyのバージョンを確認してみる...

ruby -v

↓よっしゃあああああ😭これが表示された

ruby 3.4.1 (2024-12-25 revision 48d4efcb85) +PRISM [arm64-darwin23]

やっとcocopodsを再インストールしてみる...

sudo gem install cocoapods

いけました〜〜〜〜〜😭 長かった....

flutter doctorで確認

Myapp内に移動して、以下を実行

flutter doctor

すると、なぜかcocoapodsがインストールできてないとか出てきた...
さっきできてたやん...why...

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.27.1, on macOS 14.6.1 23G93 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 16.2)
    ✗ CocoaPods not installed.
        CocoaPods is a package manager for iOS or macOS platform code.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/to/platform-plugins
      For installation instructions, see https://guides.cocoapods.org/using/getting-started.html#installation
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] VS Code (version 1.94.2)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 1 category.

再度cocoapodsをインストールするため、以下を実行
（Myapp内でやったけどどこでもいいっぽい...?）

sudo gem install cocoapods

それでも無理....GPTのいうとおりに進んでみる

CocoaPodsのインストール先を確認

gem which cocoapods

CocoaPodsがインストールされているパスは /opt/homebrew/lib/ruby/gems/3.4.0/gems/cocoapods-1.16.2/lib/cocoapods.rb ですが、which podでpod not foundが表示されるということは、CocoaPodsの実行ファイルがPATHに追加されていない可能性があります。

以下の手順を試して、CocoaPodsのパスをシステムのPATHに追加し、podコマンドが認識されるようにします。

CocoaPodsの実行ファイルのパスを確認
gem which cocoapodsコマンドで表示されたパスはCocoaPodsのライブラリの場所です。ただし、実行可能なpodコマンドは別の場所にある可能性が高いです。
podコマンドのパスを見つけるために、以下のコマンドを試してみてください。

sudo gem environment

sudo gem environmentの結果から、CocoaPodsの実行ファイルが/opt/homebrew/lib/ruby/gems/3.4.0/binにインストールされていることがわかります。このディレクトリが現在のPATHに含まれていないため、podコマンドが見つからない状態です。

解決方法
PATHにCocoaPodsのディレクトリを追加する
/opt/homebrew/lib/ruby/gems/3.4.0/binをPATHに追加する必要があります。以下の手順で追加します。

※この時も全てMyapp内でやった

~/.zshrcを編集

nano ~/.zshrc

ファイルの最後に以下の行を追加

export PATH="/opt/homebrew/lib/ruby/gems/3.4.0/bin:$PATH"

編集が完了したら、保存して終了（Ctrl + o → Enter → Ctrl + X）

設定を反映

source ~/.zshrc

podコマンドが正しく動作するか確認

which pod

いけた........！！！！

これで、podコマンドが認識されるようになるはずです。再度、flutter doctorを実行して、CocoaPodsの状態が解消されているか確認してください。

flutter doctor

全部にチェックマーク入った〜〜〜〜〜！やっと...いけた...泣

Flutterのパスを通す場所を変更...！！

初め、project > Myapp作ってそこにしてたけど、以下とのことなので
再度ホームディレクトリ内に「development」フォルダを作成し、
そこにパスを通す！！

Flutter SDKのインストール場所についてですが、基本的には、flutter フォルダはどこに置いても問題ありませんが、一般的な推奨としては以下の点が挙げられます。
【プロジェクトとは別にするのが望ましい】
Flutter SDKは、プロジェクトの一部としてではなく、システム全体で利用できるように、Myapp のような特定のプロジェクトフォルダ内に入れず、独立した場所に配置することをお勧めします。例えば、~/development/flutter のような場所に置くと管理がしやすいです。

まず、ホームディレクトリに行き、developmentフォルダを作成する

mkdir ~/development

次に、現在のFlutter SDK（Myapp内）をdevelopmentフォルダに移動

mv ~/project/Myapp/flutter ~/development/flutter

次に、flutter コマンドをどのディレクトリからでも使えるように、
~/.zshrcにFlutter SDKのパスを追加

echo 'export PATH="$PATH:~/development/flutter/bin"' >> ~/.zshrc

これで、flutter/bin フォルダをパスに追加できます。

~/.zshrcを再読み込みして、パスの変更を反映させる

source ~/.zshrc

最後に、flutter が正しく動作するか確認する

flutter --version

無理だった...
~/.zshrc ファイルが正しく編集されているか確認してみる

cat ~/.zshrc

こう出た↓

export PATH="$PATH:/Users/ユーザー名/project/Myapp/flutter/bin"
export PATH="/opt/homebrew/lib/ruby/gems/3.4.0/bin:$PATH"
export PATH="$PATH:~/development/flutter/bin"

~/.zshrc に設定されているパスに少し重複があるようです。また、~/development/flutter/bin のパスが最後に設定されているため、flutter が正しく認識されていない可能性があります。
以下の手順で修正を行います

nano ~/.zshrc でファイルを開いたら、

nano ~/.zshrc

/Users/ユーザー名/project/Myapp/flutter/bin ではなく、
~/development/flutter/bin のパスを優先させる
（「/Users/ユーザー名/project/Myapp/flutter/bin」を消す）
↓一回全部消して、以下を貼り付ける（developmentを一番上に持ってきたいから）

export PATH="$PATH:~/development/flutter/bin"
export PATH="/opt/homebrew/lib/ruby/gems/3.4.0/bin:$PATH"

設定を保存する
（Ctrl + O で保存、Enter を押して確定、Ctrl + X で終了。）

設定を反映させるために、再度ターミナルで以下を実行

source ~/.zshrc

設定が反映されたか確認するため、以下を実行します。

echo $PATH

この時、~/development/flutter/binが最初に表示されていることを確認してください。

その後、再度 flutter --version を実行して、Flutterが正しく動作しているか確認

flutter --version

無理だった〜〜〜〜
~/.zshrc内を見てみると、以下が表示された

nano ~/.zshrc

以下が表示された

export PATH="$PATH:~/development/flutter/bin"
export PATH="/opt/homebrew/lib/ruby/gems/3.4.0/bin:$PATH"

現在の .zshrc に設定されている内容だと、~/development/flutter/bin が $PATH の後ろに追加されています。flutter コマンドが正しく動作するためには、~/development/flutter/bin を $PATH の最初に追加する必要があります。

↑これの他に、ユーザー名とかが正しく表示されていない！！

とのことなので、以下に書き換え。

export PATH="/Users/ユーザー名/development/flutter/bin:$PATH"
export PATH="/opt/homebrew/lib/ruby/gems/3.4.0/bin:$PATH"

変更を反映

source ~/.zshrc

その後、再度 flutter --version を実行して、Flutterが正しく動作しているか確認

flutter --version

やっと行けた〜〜〜😭

シミュレーターを起動

ここから、以下の構成で進めることに！

/Users/ユーザー名/
│
├── development/      # Flutter関連などの開発用ツール
│
└── projects/         # 実際のアプリケーションやプロジェクトのフォルダ
    ├── my_flutter_app/  # 新しく作成したFlutterアプリ
    └── another_app/    # もう1つのアプリ

まず、ホームディレクトリ内でprojectsフォルダを作成

mkdir ~/projects

projectsフォルダに移動して、
新しいFlutterアプリを作成

flutter create infertility_community_app

新しく作成したアプリフォルダに移動

cd infertility_community_app

cursorでinfertility_community_appのフォルダを開いておく
↓
次にAndroid studioを起動し、
Openをクリック >
infertility_community_app内の「android」フォルダを開く >
trustをクリック
↓
Android studioの上のツールバーにある「Tools」をクリック >
Device Managerをクリックし、新しいデバイスを作成する
もしくはすでにあるデバイスでOKなら特に何もしなくてOK
↓
Cursorを立ち上げて、右下にある「macOS(darwin)」をクリックすると以下が出てくる

IOSを起動する場合は、「start IOS simulator」をクリック
Androidを起動する場合は、Android studioで作成した端末をクリック
↓
cuosor内にターミナルが出てない場合は、
上のツールバーにあるターミナルをクリック > 新しいターミナルをクリック
↓
ターミナルに以下を実行すると、カウンターアプリが立ち上がる

flutter run

IOS

Android

最後に

環境構築自体が初めてだったので、合計で10時間くらい溶かしました😇
エンジニアの夫にお願いすればもう少し早く終わったかもですが
なんとか自分でやり切りたい...！と粘りに粘り、
やっっっとシミュレータが立ち上がった時は感動でしたw

そもそもターミナル自体、昔progateでちょこっと触った程度だったので
これを機に再度ちゃんと勉強したいと思えました。

現在はUIデザイナーですが、
自分の市場価値を上げたい！個人アプリ開発にも挑戦してみたい！
あわよくば個人開発したアプリで収益を得たい！（夢のまた夢）
という思いでFlutterに挑戦することを決意したものの...

これからどれくらいのスピードでどれだけ成長できるのか?!?!

コツコツ地道に頑張りたいと思います🍎

たくさん記事も書いていくぞ〜〜💪

Discussion