この記事の概要
公式サイトを参考に、Mac上にFlutter開発環境を構築します。
＜環境＞
・MacBook Air（15インチ、M2、2023）
・Sonoma 14.6.1
事前準備
公式サイトの手順を参考にインストールしますが、以下を事前にインストールしておきます。
- Rosetta 2
- Xcode
- Android Studio
- Git
- VScode
Rosetta 2
ターミナルを開いて以下コマンドを叩く。
$ sudo softwareupdate --install-rosetta --agree-to-license
Xcode
App Storeを開いて検索ボックスに「Xcode」を入力する。
ダウンロードするだけでも約3GBあるためしばし待つ。
インストール＆起動まで行っておき、設定は後で実施する。
Android Studio
こちらも公式サイトを参考にインストールします。
-
「ダウンロード」タブあるいは、以下リンクからダウンロード画面を開く。
「Android Studio XXXXXX をダウンロード」をクリックする。
https://developer.android.com/studio?hl=ja
-
利用規約の同意にチェックを入れ、「Apple chip」側のボタンをクリックしてダウンロード開始する。
1.2GBあるため、こちらもしばし待つ。
-
ダウンロードしたdmgファイルをダブルクリックで起動する。
-
表示されている「Android Studio」アイコンをApplicationフォルダにドラッグ＆ドロップする。
Git
- brewでインストールする。
brew install git
brewが未インストールの場合は以下のコマンドでインストールできます。
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
詳細は公式サイトを参照。
VScode
- 公式サイトからダウンロードする。
- ダウンロードしたzipファイルを解凍する。
- 出てきた「Visual Studio Code」をアプリケーションフォルダに移動する。
- ダブルクリックで起動確認まで行っておく。
Flutterインストール
公式サイトのインストール手順に従って実施します。
-
VScodeを起動し、
Shit+Command+Pでコマンドパレットにflutterを入力する。
「New Project」を選択すると、右下に「Download SDK」が表示されるためクリックする。
手順には「Consider ~/development/」の記載があるが、ホームディレクトリ直下にdevelopmentディレクトリを作成するなど考慮せよってことだと思われる。
それに従い、developmentディレクトリを作成してその直下にダウンロードした。 -
自動的にインストールが行われ、完了するとこれまた自動的に
flutter doctor -vの結果が表示される。
-
SDKのパスをターミナルに設定するため、「Copy SDK path to Clipboard」をクリックし、SDKのパスをコピーする。
-
ホームディレクトリの
.zshenvファイル があれば追記、なければ新規作成する。
（例）
export PATH=$HOME/development/flutter/bin:$PATH
Xcodeの設定
Flutterの手順でいうところの「Configure iOS development」のセクションです。
Xcodeはインストール済みのため、以下コマンドを叩く。
$ sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'
実行結果は何も表示されず、プロンプトが戻ってくるのみ。
つづいて、Xcodeライセンスに同意する。
$ sudo xcodebuild -license
ずらっと英文が表示されるため、最後にagreeを入力して同意する。
iOSシミュレーターの設定
iOSシミュレーターをインストールするため以下コマンドを叩く。
事前インストールで入っている場合は文言が表示されるのみ。
$ xcodebuild -downloadPlatform iOS
Finding content...All available platforms are downloaded
続いてシミュレーターを起動する。
$ open -a Simulator
起動中はアップルロゴの表示。
起動完了するとホーム画面が表示される。
別のバージョンがよければ変更可能。
実機を使う場合は別の手順が必要なため別途追記します。
CocoaPodsをインストールする
https://cocoapods.org/
※Google翻訳した結果↓
CocoaPods は、Swift および Objective-C Cocoa プロジェクト用の依存関係マネージャーです。102,000 を超えるライブラリがあり、300 万を超えるアプリで使用されています。CocoaPods は、プロジェクトをエレガントに拡張するのに役立ちます。
インストールするため、以下コマンドを叩く。
$ sudo gem install cocoapods
インストール最中にエラー出た。
ERROR: Error installing cocoapods:
The last version of securerandom (>= 0.3) to support your Ruby & RubyGems was 0.3.2. Try installing it with `gem install securerandom -v 0.3.2` and then running the current command again
securerandom requires Ruby version >= 3.1.0. The current ruby version is 2.6.10.210.
rubyのバージョンが古いことが原因のため、最新バージョンをインストールします。
こちらの記事を参考にさせていただきました。
インストール後、もう一度cocoapodsのインストールを試みる。
cocoapodsのインストール後、~/.zshenvにPATHを追加する。
export PATH=$HOME/.gem/bin:$PATH
flutter doctorを実行する
$ flutter doctor
Xcodeの手順が足りなかったのか！がついているため、記載されているコマンドを2つ実行する。
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
再度fullter doctorを実行するとAndroid以外はOKになった。
Androidシミュレーターの設定
Android SDKが正しくインストールされていないとこの先に進めないため、インストールがされていなかったらこちらの記事を参考にしてください。
Android Studioを起動し、「Virtual Device Manager」をクリック。
「Create virtual device」をクリック。
適当に選ぶ。
デバイスイメージが、本当はここで一覧が表示されるはずが表示されない。
エラーメッセージの通り、ネットワークに問題がある（私の環境ではMcAfeeのファイヤーウォールが影響していた）ため、ファイヤーウォールを無効化して更新ボタンをクリック。
一覧が表示された。
適用したいイメージがダウンロードされていない場合は、ダウンロードボタンをクリックしてダウンロードさせる。
ダウンロードが完了すると、「Next」ボタンがクリックできるようになる。
再生ボタンをクリックすると起動する。
flutter doctorで確認する。
Android SDKのインストール先をデフォルトから変えているため、それを指定せよと出ている。
以下のコマンドで指定してあげる。
$ flutter config --android-sdk /Users/hogehoge/development/Android/sdk
再度flutter doctorで確認すると、今度はcommand-line toolsが足りないため、Settingsからインストールする。
再度flutter doctorで確認すると、ライセンスに同意せよと出ているため、表示されているコマンドを叩く。
$ flutter doctor --android-licenses
途中聞かれるが、全てyを入力すると「All SDK package licenses accepted」になる。
再度flutter doctorで確認すると、オールクリアになりました。
以上。
長かった。。