fvmを使用してFlutterを起動するまでの流れ

はじめに

PCを新しくしたので、fvmを使用してFlutterを導入しました。Flutterを起動するまでに何箇所か詰まったところがあったので自分が見返すためにも記事にしました。
※ MacBook ProでチップはApple M2 Proでの導入になります。環境が違うと参考にならない場合がございますので予めご了承ください。

fvmの導入

fvmとは、Flutter SDKのバージョンを管理するためのCLIになります。まず、brewを使用してfvmを導入します。

$ brew tap leoafarias/fvm
$ brew install fvm

その次にエイリアスを設定します。
※ ここは設定しなくても問題ありません。ただ、これ以降の説明ではエイリアスを設定したと仮定して、fvm flutterのところをflutterとして説明します。

$ echo 'alias flutter="fvm flutter"' >> ~/.zshrc
$ source ~/.zshrc

最後に、グローバルにFlutterをインストールしパスを通します。
※ 今回は3.7.12のバージョンを導入します。

$ fvm global 3.7.12
$ echo 'export PATH="$PATH:$HOME/fvm/default/bin"' >> ~/.zshrc
$ source ~/.zshrc

Android Studioの導入

Android Studioを導入します。ダウンロードが終わったらAndroid Studioを起動し、Settings > Languages & Frameworks > Android SDKのSDK ToolsタブにあるAndroid SDK Command-line Toolsにチェックを入れApplyボタンを押します。
また、以下のコマンドを入力しSDKのライセンスを承認します。

$ flutter doctor --android-licenses

※ もし、Android Studioで開発する場合は、PluginsからDartとFlutterをインストールしてください。また、Settings > Editor > File TypesのIgnored Files and Foldersタブを選択し、flutter_sdkを追加してください。

XcodeとXcodesの導入

Xcodeを導入するために、まずXcodesを導入します。XcodesはXcodeの複数のバージョンをインストールし管理することができるアプリケーション（CLIもあります）になります。

$ brew install --cask xcodes

Xcodesをアプリケーションフォルダから開き、使用するXcodeをインストールします。
※ インストールするには、Apple IDでサインインする必要があります。

次に以下のコマンドでインストールしたXcodeのバージョンを指定します。
※ 以下は14.2.0をインストールした例です。インストールしたバージョンに合わせてアプリ名を変更してください。

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

もし実機デバッグする場合に実機のiOSバージョンにサポートしていないXcodeの場合は、Xcodeのバージョンを上げるか、iOSDeviceSupportから実機のiOSバージョンのzipファイルをダウンロードし、それを/Applications/Xcode-14.2.0.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupportフォルダに追加してください。

CocoaPodsの導入

CocoaPodsを導入します。PCに元々入っていたRubyのバージョンではCocoaPodsをインストールできなかったため、rbenvを使用してバージョンを現在の安定版（3.2.2）にします。

$ brew install rbenv ruby-build
$ rbenv init
$ echo 'eval "$(rbenv init - zsh)"' >> ~/.zshrc
$ source ~/.zshrc
$ rbenv install 3.2.2
$ rbenv global 3.2.2

次にCocoaPodsをインストールします。

$ sudo gem install cocoapods

Visual Studio Codeの導入

Visual Studio Codeを導入します。ダウンロードが終わったらVisual Studio Codeを起動し、settings.jsonに以下を記述し、fvmで指定したバージョンを使用するようにします。

settings.json

{
  "dart.flutterSdkPath": ".fvm/flutter_sdk",
  "search.exclude": {
    "**/.fvm": true
  },
  "files.watcherExclude": {
    "**/.fvm": true
  }
}

※ fvmのバージョン3系を使用する場合は、dart.flutterSdkPathの値を.fvm/versions/3.7.12とします。

Gitのトラッキング対象外にする

Gitのトラッキング対象外にします。

$ echo '.fvm/flutter_sdk' >> ~/.config/git/ignore

もし、全てのリポジトリから除外したくない場合は各リポジトリの.gitignoreに追加してください。

$ echo '.fvm/flutter_sdk' >> .gitignore

※ fvmのバージョン3系を使用する場合は、.fvmrcでFlutterのSDKバージョンを管理するようになったので、.fvmを対象外にします。

$ echo '.fvm' >> ~/.config/git/ignore

Flutterの起動

以下のコマンドでインストールが必要な依存関係があるかどうかを確認します。（これまでの項目を対応していれば「No issues found!」と表示されるはずです。）

$ flutter doctor

「No issues found!」と表示されたら、Flutterプロジェクトを作成し、エミュレーター等で起動します。
※ 今回はsampleという名前のプロジェクトを作成しています。ここは自分の好きなプロジェクト名をつけてください。

$ flutter create sample
$ cd sample
$ fvm use 3.7.12 // グローバルに設定しているので不要ですが、これをすることにより.fvmフォルダを作成している
$ flutter run

さいごに

fvm以外にもPuroというFlutter SDKのバージョン管理を行うものもあるので、試してみたいです。