Programming Self-Study Notebook

勉強したことを忘れないように!　思い出せるように!!

Flutterの開発環境構築（fvmを利用する）

flutter


概要

flutterのバージョン管理ツールをであるfvmを導入することで、複数のプロジェクトでflutterのバージョンの使い分けができるようにしたいと思います。 ここではユーザー環境（アカウント内）共通設定のFlutterをインストールしたうえで、個別プロジェクト用のインストールを実施します。

注意

  • すでにflutterをインストールしている場合は、事前にアンインストールすることをお勧めします。
    • 私は既存のflutterをアンインストールをしない状態で、fvmのインストールを実施したのですが、開発を進める中で「pub getが正しくできずimportエラーが解消されない。」と言う症状が発生するようになってしまいました。（flutterの開発環境を再構築することで問題が解決しましたが、原因はflutterのバッティングだったと予想しています。）

前提

手順説明

手順１：fvmのインストール

手順1-1：githubからfvmをダウンロードする

  • 以下のサイトにアクセスし最新版のfvmを取得します。
  • 私の場合は2.4.1が最新版だったので、2.4.1のページへ移動してfvm-2.4.1-windows-x64.zipをダウンロードしました。

手順1-2：ダウンロードしたファイルを解凍する

  • 私は以下のPathにfvmを配置することにしました

      C:\tools\fvm

手順1-3：Pathを通す

  • ユーザー環境変数のPathに以下を追加します。 C:\tools\fvm
Pathが通ったことを確認する
  • 任意のディレクトリでfvmのバージョン確認ができれば、正しくインストールされています。

手順２：グローバル用のflutterをインストールする

-私はC:\Users\(ユーザー)\fvmにインストールすることにしました。

手順2-1：インストール済みFlutterのバージョンを確認する

  • fvm listでインストール済みのSDKバージョンを確認します。
    • インストール前なので何も表示されません

手順2-2：インストール可能なFlutterバージョンを確認する

  • fvm releasesでインストール可能なSDKバージョンを確認します。
  • 今回はstableである3.16.5をインストールすることにします。

手順2-3：作業用ディレクトリへ移動する

  • （省略します）

手順2-4：インストールコマンドを実行する

  • 以下のコマンドを実行します fvm install 3.16.5

コマンド実行結果

Flutter "3.16.5" is not installed.

Installing version: 3.16.5...
Cloning into 'C:\Users\(ユーザー)\fvm\versions\3.16.5'...
remote: Enumerating objects: 486142, done.
remote: Counting objects: 100% (210/210), done.
remote: Compressing objects: 100% (91/91), done.
remote: Total 486142 (delta 111), reused 162 (delta 100), pack-reused 485932
Receiving objects: 100% (486142/486142), 224.35 MiB | 25.97 MiB/s, done.
Resolving deltas: 100% (376909/376909), done.
Updating files: 100% (7854/7854), done.
HEAD is now at 78666c8dc5 [flutter release] Update Engine revision to 3f3e560236539b7e2702f5ac790b2a4691b32d49 fo… (#140424)
Checking Dart SDK version...
Downloading Dart SDK from Flutter engine ...
Expanding downloaded archive with PowerShell...
Building flutter tool...
Running pub upgrade...
Resolving dependencies...
Got dependencies.
Flutter 3.16.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 78666c8dc5 (9 days ago) • 2023-12-19 16:14:14 -0800
Engine • revision 3f3e560236
Tools • Dart 3.2.3 • DevTools 2.28.4

  • ~fvm/versionの下に3.16.5というフォルダが生成されました。
インストール済みFlutterのバージョンを確認する
  • fvm listでインストール済みのSDKバージョンを確認します。
    • インストール済みの3.16.5が表示されます

手順2-5：インストールしたflutterをグローバルに移動する

  • fvm global 3.16.5でインストール済みのSDKをグローバルに移動します。
    • fvmフォルダにdefaultが追加されます。

コマンド実行結果

C:\Users\(ユーザー)\fvm>fvm global 3.16.5
Flutter "3.16.5" has been set as global
However your "flutter" path current points to:

.
to use global Flutter SDK through FVM you should change it to:

C:\Users\(ユーザー)\fvm\default\bin

注意：一般権限で実施するとエラーが出る
インストール済みFlutterのバージョンを確認する
  • fvm listでインストール済みのSDKバージョンを確認します。
    • 3.16.5の横に（global）が追記されています。

手順2-6：グローバルのflutterにPathを通す

  • 手順2-5で生成されたC:\Users\（ユーザー）\fvm\default\binに対してPathを通します。
Pathが通ったことを確認する

  • 任意のディレクトリでdart及びflutterのバージョンが取得できることを確認します。

      // flutterのバージョンを取得するコマンド
  flutter --version

  // dartのバージョンを取得するコマンド
  dart --version

手順３：ローカルにflutterをインストールする

  • ココからはプロジェクト作成時に実施します。
  • グローバルにインストールした際の流れを途中まで実施します。

  • 主な違いは作業ディレクトリが個別プロジェクト用ディレクトリであることです。

  • まだプロジェクト用のディレクトリを作成していない人は、プロジェクトのルートディレクトリを作成してルートディレクトリに移動してください。

    • 私はtraining_appと言う名称のディレクトリを作成しました。

手順3-1：プロジェクトにflutterをインストールする

  • 以下のコマンドを実行します。今回はわかりやすいように、グローバルに配置した3.16.5より一つ古い3.16.4をインストールすることにしました。 fvm install 3.16.4

コマンド実行結果

Flutter "3.16.4" is not installed.

Installing version: 3.16.4...
Cloning into 'C:\Users\YUTAKA\fvm\versions\3.16.4'...
remote: Enumerating objects: 486147, done.
remote: Counting objects: 100% (215/215), done.
remote: Compressing objects: 100% (113/113), done.
remote: Total 486147 (delta 119), reused 144 (delta 82), pack-reused 485932
Receiving objects: 100% (486147/486147), 224.35 MiB | 25.58 MiB/s, done.
Resolving deltas: 100% (376917/376917), done.
Updating files: 100% (7854/7854), done.
HEAD is now at 2e9cb0aa71 [CP] Catch error for missing directory in `FontConfigManager` (#138496) (#139743)
Checking Dart SDK version...
Downloading Dart SDK from Flutter engine ...
Expanding downloaded archive with PowerShell...
Building flutter tool...
Running pub upgrade...
Resolving dependencies...
Got dependencies.
Flutter 3.16.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 2e9cb0aa71 (3 weeks ago) • 2023-12-11 14:35:13 -0700
Engine • revision 54a7145303
Tools • Dart 3.2.3 • DevTools 2.28.4

  • ~fvm/versionの下に3.16.4というフォルダが生成されました。
インストール済みFlutterのバージョンを確認する
  • fvm listでインストール済みのSDKバージョンを確認します。
    • 3.16.5(global)の下に3.16.4が追記されています。

手順3-2：プロジェクトで使用するflutterのバージョンを指定する

  • まだ、作成中のプロジェクトで使用するflutterのバージョンを指定していない状態ですので、useコマンドでflutterのバージョンを指定します。

      fvm use 3.16.4
  • 管理者権限でコマンドプロンプトを実行していましたが、それでも--forceオプションをつけないと変更することができませんでした。
有効化されているFlutterのバージョンを確認する
  • fvm listでインストール済みのSDKバージョンを確認します。
    • 3.16.4の下に(active)が追記されています。
  • これで一連の流れは終わりです。

手順４：プロジェクトを作成する（おまけ）

  • プロジェクトのルートディレクトリでfvm flutter createを実行するとflutterのサンプルアプリが生成されます。