Flutter バージョン管理ツール fvm 導入ガイド

初めに

みなさん、Web開発経験はありますでしょうか？
Web開発のフロントエンドといえば、React、Vueを思いつく人もいるかと思います。
今となってはNodeやRubyのバージョン管理を行いながら開発することは
よくあることで、Flutterもまた例外ではありません。
そこで、今回はFlutterでもバージョン管理ができることを知ったので
FVM（Flutter Version Manager）の導入を記事にしました🙌

インストール

Homebrewでインストール for Mac

ターミナルで以下のコマンドを実行します。

ターミナル

% brew tap leoafarias/fvm
% brew install fvm

Powershellでインストール for Windows

Windowsの方は以下のコマンドです！

powershell

choco install fvm

Dartを使ったインストールはWindowsの方も同様なので
↑のやり方じゃない方法がいい方はDartでインストールしましょう！

Dartでインストール

Dartそのもののインストールが必要です

ターミナルで以下のコマンドを実行します。

ターミナル

% dart pub global activate fvm

実行すると以下のような結果が表示されるはずです！

ターミナル

+ args 2.3.1pendencies... (2.1s)
+ charcode 1.3.1
+ cli_notify 0.0.4
+ cli_util 0.3.5
+ collection 1.17.0
+ console 4.1.0
+ date_format 2.0.7
+ fvm 2.4.1
+ io 1.0.3
+ meta 1.8.0
+ path 1.8.2
+ process_run 0.12.3+2
+ pub_semver 2.1.3
+ source_span 1.9.1
+ string_scanner 1.2.0
+ synchronized 3.0.0+3
+ term_glyph 1.2.1
+ tint 2.0.0
+ vector_math 2.1.4
+ yaml 3.1.1
Downloading fvm 2.4.1...
Downloading process_run 0.12.3+2...
Downloading console 4.1.0...
Downloading cli_notify 0.0.4...
Downloading date_format 2.0.7...
Downloading string_scanner 1.2.0...
Downloading charcode 1.3.1...
Downloading synchronized 3.0.0+3...
Downloading vector_math 2.1.4...
Building package executables... 
Built fvm:main.
Installed executable fvm.
Activated fvm 2.4.1.

指定のバージョンのインストール

最後に、使いたいバージョンを指定してインストールします。

ターミナル

% fvm install バージョン

インストールできるバージョンは以下のコマンドで確認できます！

ターミナル

% fvm releases
Feb 26 18  │ v0.1.6           
Mar 12 18  │ v0.2.1           
Mar 13 18  │ v0.1.8           
Mar 13 18  │ v0.1.9           
Mar 13 18  │ v0.2.0           
Mar 15 18  │ v0.1.5           
Mar 16 18  │ v0.2.2           
Mar 20 18  │ v0.2.3           
Mar 26 18  │ v0.2.4           
Mar 30 18  │ v0.2.5           
Mar 30 18  │ v0.2.6           
Apr 2 18   │ v0.2.7           
Apr 2 18   │ v0.2.3           
Apr 3 18   │ v0.2.8           
Apr 5 18   │ v0.2.9           
Apr 9 18   │ v0.2.8           
Apr 9 18   │ v0.2.10          
Apr 12 18  │ v0.2.11   
# ...たくさん表示されます

プロジェクトでの設定

VSCodeを使いたい方

VSCodeを使いたい方は、プロジェクトの直下（ルートディレクトリ）に
.vscode/settings.jsonを作成し、以下の内容をコピペしましょう。
後々にfvmをいい感じに反映させるための設定ファイルになります！
（直接VSCodeの設定ファイルに記入しても良い方はそちらのやり方でも構いません）

settings.json

{
  "dart.flutterSdkPath": ".fvm/flutter_sdk",
  // 検索時にfvmを除外
  "search.exclude": {
    "**/.fvm": true
  },
  // ワークスペースの監視から除外
  "files.watcherExclude": {
    "**/.fvm": true
  }
}

Android Studio ・ IntelliJ IDEAを使いたい方

1. Languages & Frameworks > Flutterに移動するか、Flutterを検索してFlutter SDKのパスを変更
2. プロジェクトのルートディレクトリにあるfvmの絶対パスをコピー
   • 例　root-path/.fvm/flutter_sdk
3. 変更を適用し、再起動！

IntelliJも基本的に構造は同じなので、同様の手順で設定できると思います！

プロジェクトで使用するバージョンの設定

以下のコマンドで、使用するバージョンを指定します。

ターミナル

fvm use バージョン

このコマンドを実行すると、プロジェクトのルートディレクトリで
.fvmというディレクトリが増えているはずです！
この増えたディレクトリをIDEが参照してFlutterのバージョンを特定します〜！

これで異なるバージョンのFlutterが使えるはずです！
試しに、pubspec.yamlのSDKのバージョンを異なるバージョンにしてみたりすると
確認できます！

その他コマンド

ターミナル

# インストールしているバージョンの表示
% fvm list
# インストールしたバージョンのアンインストール
% fvm remove バージョン
# flutter analyzeなどのコマンドをmasterチャンネルで実行する場合
% fvm spawn master analyze

flavorなどを考えたい方は以下のページをみると良いです！

終わりに

今回は、fvmの導入方法をまとめました！
今となっては当たり前になっているバージョン管理ツールが
Flutterにもあるので、バージョンの齟齬が減って開発しやすくなりそうですね！
また、Flutterは2.X.X台〜3.X.X台でウィジェットが入れ替わっているので
古い環境で遊んでみたり、古い記事を参考にしている時に実装を参考にするために
バージョンを敢えて合わせてみたり、とかもできますね🌟

本記事を見ていただき、ありがとうございました！
Flutter開発楽しみましょう✊

参考文献