訳あってプライベートで Flutter アプリを開発をすることになりそうなので MacBook Air (M1)で開発環境を構築してみました。IDE は VSCode を使用します。基本的に公式ドキュメント　をベース作業しますが、それでも上手くいかない場合は先人の知恵を借りにいきます。それでは始めましょ〜。

✏️ プラグインのインストール

まずは VSCode に Flutter プラグインをインストールしましょう。ただプラグインをインストールするだけなので特に追記することはありません。

✏️ プロジェクトの作成

次は Flutter プロジェクトの作成。先ほどインストールしたプラグインの機能を使って新規プロジェクトを作成します。が、Flutter SDK がインストールされていない場合は画面右下にダイアログが出てくるので「Download SDK」を選択。(スクショを撮り忘れました...) 選択後に飛ばされるリンク先で SDK をダウンロードして端末にインストールしましょう。インストール後は「Locate SDK」を選択するとプロジェクトが作成されます。

✏️ Xcode のインストール

今回は公式推奨の iOS アプリを開発します。そのためには Xcode をインストールしてネイティブバイトコードにコンパイルする必要があるらしいので、公式ドキュメントに従って Xcode のインストールを行います。まずはこちらのコードを実行。

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

すると、エラーが発生しました。

xcode-select: error: invalid developer directory '/Applications/Xcode.app/Contents/Developer'

結論から言うと端末に Xcode が入っていなかったのが原因でした。 App Store から Xcode をインストールしましょう。実はこのエラーを解決するのに 2 時間ほどかかりました...。

✏️ iOS シミュレーターのインストール

端末に iOS シミュレーターをインストールします。

$ xcodebuild -downloadPlatform iOS

シミュレーターの起動はこちらのコマンドを実行します。

$ open -a Simulator

起動しました！

✏️ シミュレータの設定(今回は無視)

公式ドキュメンには、64 ビットデバイスを使用するようにシミュレーターを設定してくださいと記述されているのですが、Window に「Devices and Simulators」という項目がありません。もしかしたら MacBook Air だからかな？まぁ 64 ビットでなくても動くと思いますので今回は無視します。

✏️ 画面サイズの調整の確認

画面密度の高い iOS デバイスをシミュレートすると画面からはみ出すことがあるらしく、その都度下のショートカットで画面サイズの調整が必要とのこと。ふむふむ。

Small 	Window	> Physical Size	Cmd + 1
Moderate	Window > Point Accurate	Cmd + 2
HD accurate	Window > Pixel Accurate	Cmd + 3
Fit to screen	Window > Fit Screen	Cmd + 4

✏️ CocoaPods のインストール

CocoaPods と言う見慣れないワードが出てきましたが、こちらは Node で言う npm 的なものらしく、要するにライブラリ(パッケージ)を効率的に管理してくれるツールのようです。インストールしましょう。

$ sudo gem install cocoapods

コマンドを実行するとエラーになりました(下のログ)。どうやら RubyGems のバージョンが低い模様。親切なことにログにバージョンアップ用コマンドが記載されていたので実行しましょう。(sudo を付けないとパーミッションエラーが発生しました。)その後 CocoaPods を再インストールしてみます。

A new major version is available for Algolia! Please now use the https://rubygems.org/gems/algolia gem to get the latest features.
Successfully installed algoliasearch-1.27.5
Successfully installed fuzzy_match-2.0.4
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.

またもエラーが発生(下のログ)。。他にもバージョンアップが必要なライブラリがあるらしいです。こちらのログにもバージョンアップ用コマンドが記載されていたので実行します。その後 CocoaPods を再再インストールしてみます。

Successfully installed connection_pool-2.4.1
Successfully installed tzinfo-2.0.6
Successfully installed i18n-1.14.5
ERROR:  Error installing cocoapods:
        The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.7. Try installing it with `gem install activesupport -v 6.1.7.7` and then running the current command again
        activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

次はうまくいきました！

Successfully installed cocoapods-core-1.15.2
Successfully installed cocoapods-1.15.2
Parsing documentation for cocoapods-core-1.15.2
Installing ri documentation for cocoapods-core-1.15.2
Parsing documentation for cocoapods-1.15.2
Installing ri documentation for cocoapods-1.15.2
Done installing documentation for cocoapods-core, cocoapods after 1 seconds
2 gems installed

✏️ .zshenv の編集(今回は必要なかった)

自分の端末には ~/.zshenv ファイルがなかったので新規に作成した後パスの設定を行いました。

$ touch ~/.zshenv

$ vi ~/.zshenv
// ~/.zshenv に追加
export PATH=$HOME/.gem/bin:$PATH

設定後ターミナルを再起動します。

...。

実はここから小一時間ほど沼ることになりました。いくらパスの設定をしても標準ターミナルから Flutter コマンドが使えない。試しに .zshrc ファイルでパスを通してみてもダメ。なぜだ...。

こちらも結論から言いますが、 VSCode のプラグインを使って Flutter をインストールしたのが原因でした。VSCode のプラグインを使って Flutter をインストールすると標準のターミナルからは Flutter コマンドが使えないっぽいです(パスが通っていない)。ですが VSCode のターミナルからは問題なく Flutter コマンドを使用することができました。試していませんが、標準のターミナルからも Flutter コマンドを使用したい場合は端末自身に Flutter のインストールが必要だと思われます。(手順は公式ドキュメントに載っています)

✏️ flutter doctor の実施

標準ターミナルからでは Flutter コマンドが使用できないことが分かったので VSCode のターミナルから flutter doctor コマンドを実行してみます。こちらのコマンドは Flutter に関するエラーの有無を確認するコマンドでした。

$ flutter doctor

ちゃんと動きました！今回 Android は入れていないのでエラーでも構わないはずです。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.6, on macOS 14.1.2 23B92 darwin-arm64, locale
    ja-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 15.3)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.89.0)
[✓] VS Code (version 1.88.1)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 2 categories.

とりあえずこれにて Flutter の開発環境の構築は完了なはずです。何か漏れていた場合は追記していきます。

次は Flutter アプリ実行編で会いましょう！