【Flutter】FVMで複数のSDKバージョンを簡単に切り替える

こんにちはyu_to(@yu_to_python)です。

突然ですがもしあなたが同時に複数のFlutterプロジェクトに参画した際にこんな事を言われたらどうしますか?

現場A プロマネ猫
現場A プロマネ猫

うちのFlutterバージョンは1.20.1使ってるから合わせておいてねー

現場B プロマネ猫
現場B プロマネ猫

うちのプロジェクトは最新の3.0.5を使ってるよ!

現場C プロマネ猫
現場C プロマネ猫

この現場では実験的に開発版のの3.1.0-9.0.preを使ってるのよね。

こんな時に毎回毎回、現場が変わる毎に今使ってるバージョンをアンインストールして新しいバージョンをインストールし直すのはしんどいですよね?

こんな時に大活躍するのが今回紹介するFVMなのです。

FVMは一言で表すとFlutterのバージョン管理ツールです。

FVMを使って複数のバージョンを一括管理する事で、簡単かつ気軽に使用するFlutterのバージョンを切り替える事が出来るようになります。

是非この記事を最後まで読んで使い方やコマンドを覚えてみてください。

FVMのインストール方法

FVMをまだインストールしていない人はDartかHomebrewを使ってインストールしましょう。

Homebrewでインストール

bash
$ brew tap leoafarias/fvm
$ brew install fvm

$ fvm --version # バージョンが表示されればok

Dartでインストール

bash
$ dart pub global activate fvm

$ fvm --version # バージョンが表示されればok

デフォルトで使うFlutterのパスを通す

fvmでインストールしたFlutterをデフォルトで使用するために.bash_profile等にパスを記載しておきます。

使用しているシェルがzsh等の人は各々の設定ファイルに記載してください。

.bash_profile
export PATH="$PATH":"$HOME/fvm/default/bin"

エディタ毎の設定

VScode

VScodeをお使いの場合はsettings.jsonでもデフォルトで使用するFlutter SDKをFVM経由のSDKに変更しておきます。

補足:settings.jsonの開き方

macの場合「comannd」+「Shift」+「p」でコマンドパレットを開いて「Preferences Open Settings(JSON)」を選択

.vscode/settings.json
{
  "dart.flutterSdkPath": ".fvm/flutter_sdk"
}

Android Studio

Android Studioをお使いの方は「Preferences > Language & Frameworks > Flutter」 の 「SDK」内 「Flutter SDK path」に以下のパスを入力してVScodeと同様の設定をします。

Flutter SDK path
{
  "dart.flutterSdkPath": ".fvm/flutter_sdk"
}

FVMの基本的な使い方

インストール可能なFlutterバージョン一覧を確認する

bash
$ fvm releases
...
Jun 10 22  │ 3.0.2            
Jun 15 22  │ 3.1.0-9.0.pre    
--------------------------------------
Jun 15 22  │ 3.1.0-9.0.pre     beta
--------------------------------------
Jun 22 22  │ 3.0.3            
Jun 22 22  │ 3.0.3            
Jul 1 22   │ 3.0.4            
Jul 1 22   │ 3.0.4            
Jul 13 22  │ 3.0.5            
--------------------------------------
Jul 13 22  │ 3.0.5             stable
--------------------------------------

指定したFlutterバージョンをインストール

bash
$ fvm install <バージョン>

※不要なFlutterバージョンをアンインストールする時

bash
$ fvm remove <バージョン>

インストール済みのFlutterバージョンを確認

今いるプロジェクトで設定されているバージョンにはactive、グローバルに設定されているバージョンにはglobalと記載されます。

bash
$ fvm list
stable
3.0.1
2.8.1 (active) (global)
2.5.3

プロジェクトで使用するFlutterバージョンを指定する

bash
$ fvm use <バージョン>

# 全てのプロジェクトに適用させたい時
$ fvm global <バージョン>

バージョンを指定した際に「.fvm/flutter_sdk」というファイルがプロジェクト内に作成されますが、こちらはgitでバージョン管理不要ですので、.gitignoreに記載しておきます。

~/.gitignore
.fvm/flutter_sdk

指定した後は設定を反映させるためにエディタを再起動します。

「flutter –version」でバージョンを確認して指定したバージョンに切り替わっていればokです。

FVMのバージョンでFlutterプロジェクトを作成する

さっき紹介したfvm useでのバージョン指定はFlutterプロジェクト内でしか叩く事ができません。

なのでまだFlutterプロジェクトを作成しておらず、これから新規に作成する場合は–forceオプションを付与します。

–forceオプションを付与したfvm useコマンドを叩く事によって、現在いるディレクトリ内で適用されるFlutterバージョンを指定できます。

fvmで指定したバージョンでFlutterプロジェクトを作成する場合はfvm flutter createコマンドを使用します。

flutter createをする時のTips

新規にflutter createコマンドを使用する時は下記のオプションも一緒に入れてあげると便利です。

.

fvm flutter createの後に「.」(ドット)を追加すると新しくプロジェクトファイルを作らずに、今いるディレクトリにそのままファイル群を作成してくれます。

–project-name {app_name}

プロジェクトの名前を設定できます。

–platforms android, ios

アプリに対応するプラットフォームを指定します。指定しないとwebやmacos、linuxも対象になってしまうので不要なファイルが自動生成されてしまいます。

–org com.appname

アプリのドメインを指定することができます。ドメインはアプリをリリースする際に必要な情報で、後から変更するのは少し面倒なので予め指定しておくのがいいです。

-e

デフォルトで自動生成されるサンプルの実装やコメントを予め削除された上でプロジェクトを作成できます。

例えばデフォルトだとmain.dartにはカウントアップのサンプル実装がされた上でプロジェクトが作成されます。大量の不要なコードを自力で消していく作業が無くなるので便利です。

bash
$ mkdir myapp
$ cd myapp

$ fvm use 3.0.5 --force
Project now uses Flutter [3.0.5]

(サンプルなのでオプションなどは各自お好きに変えてください)
$ fvm flutter create . --project-name app_name --platforms android,ios --org com.appname -e

※途中から既にあるプロジェクトにFVMを導入してバージョンを管理する方法

単純にターミナル画面でfvm use <バージョン>と叩けばok。

叩くとルートに.fvmディレクトリが生成されます。

bash
$ fvm use <バージョン>

まとめ

FVMを使えば複数のFlutterプロジェクトに参画しても気軽に使用するバージョンを切り替える事ができて大変便利になります。

この機会にFVMでのバージョン管理を導入してみて快適なFlutterライフを送ってみてください。

Flutterについて学習したい人におすすめな技術書は「【2022年最新】現役エンジニアがFlutter初学者向けおすすめ技術書3選を紹介!」で解説しているので良ければ参考にしてみてください。

【2022年最新】現役エンジニアがFlutter初学者向けおすすめ技術書3選を紹介!

 

ご指摘、質問等もお待ちしてますー

 

【Flutter】Widgetのサイズを変更できるSizedBoxの使い方【サンプルコードあり】

【Flutter】FutureBuilderで非同期にWidgetを出し分ける方法を解説!

【Flutter】アプリ内でGoogleフォントを適用させる方法を徹底解説!【サンプルコードあり】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です