0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

FVM で Windows上での Flutter の開発構築のメモ(+ Androidアプリの開発環境も)

Posted at

はじめに

以下の記事で書いていた Flutter・Androidアプリの開発環境に関わる話です。

●Flutter・Androidアプリの開発環境を作った時のメモ(Mac) - Qiita
 https://qiita.com/youtoy/items/434020813fc4dde00131

上記では Mac で環境を作っていましたが、今回は Windows での環境構築です。

FVM のインストール

今回、Flutter のバージョン管理を行える FVM を利用します。

冒頭の記事は Mac での環境構築でしたが、FVM のインストールに Homebrew を使っていました。
今回の Windows上では、以下の記事でも登場しているパッケージ管理システムの「Chocolatey」を利用します。

●Windows 11 の PowerShell で Chocolatey をインストールした際のメモ - Qiita
https://qiita.com/youtoy/items/ef213c7ee6d47f0e304b

コマンドは、以下の公式ドキュメントに書かれているものです。

●Installation – FVM
https://fvm.app/documentation/getting-started/installation

2025-01-25_22-42-30.jpg

FVM をインストールするためのコマンドを実行する際には、ターミナル/PowerShell を管理者権限で起動しておく必要があります。
管理者権限でのターミナル/PowerShell の起動方法は、上でも掲載していた記事の中の「管理者権限で PowerShell を起動する」を参照してください。

インストールコマンドの実行

インストールコマンドとなる choco install fvm を実行します。

2025-01-25_22-16-51.jpg

ターミナル/PowerShell が管理者権限ではない場合、以下のように管理者権限で実施するようにというメッセージがでます。これはとりやめて、あらためて管理者権限で実行してください。

2025-01-25_21-53-40.jpg

上記の処理を管理者権限で実行できていたら、この後に「Do you want to run the script?([Y]es/[A]ll - yes to all/[N]o/[P]rint):」と聞かれます。

そこで「Y」を入力して決定すれば、後は以下のようになってインストール完了です。

2025-01-25_22-29-36.jpg

完了できたかを確認する

確認のため fvm -v を実行して、バージョン番号が表示されるか確かめると良いです。

2025-01-25_22-30-43.jpg

Flutter のインストール

FVM を使って Flutter をインストールしていきます。

インストール可能な Flutter のバージョンや安定版は、以下のように fvm releases コマンドで確認できます。

特定のバージョンを指定してインストール

今回、上記の中の 3.27.3 をインストールしてみます。
コマンドは以下のとおりです。

fvm install 3.27.3

以下のように表示されていればインストール完了です。

2025-01-25_22-48-37.jpg

ひとまず、システム全体で使える(グローバルで使える)バージョンを上記に設定します。
そのために実行するコマンドは、以下のとおりです。

fvm global 3.27.3

fvm global コマンドはシステム全体へ影響するものであるため、管理者権限のターミナル/PowerShell で実行する必要があります。

完了しているかを確認する

以下のコマンドを実行して、Flutter のバージョンを確認できます。

fvm flustter --version

また fvm list を実行すると、以下のように現状の設定状況を確認できます。

2025-01-25_23-07-45.jpg

環境構築の続き

ここで以下のコマンドを実行して、環境構築の状態を確認してみます。

fvm flutter doctor

自分の場合、以下の内容が表示されました。

2025-01-25_23-06-23.jpg

今回、Androidアプリの開発環境を作ろうと思うので、それに該当する部分の対応を行います。

Android Studio のインストール

Android Studio をインストールします。

以下からダウンロードページへと進み、Android Studio をインストールするための EXEファイルをダウンロードします。

●Android Studio とアプリツールのダウンロード - Android デベロッパー | Android Developers
 https://developer.android.com/studio/releases?hl=ja

そして、EXEファイルを実行して Android Studio をインストールし、インストール後は以下のウィザードを進めていきます。
このあたりの話は色々なところで書かれていると思うので、ここでは詳細は省略します。

2025-01-25_23-15-56.jpg

基本的にデフォルト設定で進めていきました。

以下のコンポーネントのダウンロードの完了後、Android Studio を起動できるかとおもいm

2025-01-25_23-18-12.jpg

Android Studio関連の作業の続き

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

Android Studio上で、Flutter用のプラグインをインストールします。

左メニューの「Plugins」を選び、その右で「Flutter」が選択された状態で、一番右の部分にある「Install」を押しましょう

2025-01-25_23-21-38.jpg

インストール後に Android Studio の再起動を求められるので、再起動します。

再起動後は、以下のように Flutter用のプロジェクト作成のアイコンが表示されると思います。

2025-01-25_23-24-22.jpg

コマンドラインツールの追加

ここでトップ画面の「More Actions」から、「SDK Manager」を選びます。

2025-01-25_23-28-59.jpg

そして、SDK Manager の「Android SDK」で以下をインストールしました。

2025-01-25_23-31-05.jpg

ターミナル/PowerShell での設定まわり

ターミナル/PowerShell に戻り、また以下のコマンドを実行してみます。

fvm flutter doctor

そうすると、自分の場合は adb関連のダイアログが表示されたので、これを許可しました。

また、以下を実行してライセンスの承諾を進めていきます。

fvm flutter doctor --android-licenses

「Accept? (y/N):」に対して「y」で承諾を進めていくと、「All SDK package licenses accepted」と表示され、ライセンスの承諾は完了になります。

ここで fvm flutter doctor を実行した際に、以下のようになっていれば OK です。

2025-01-25_23-34-41.jpg

Flutterアプリのビルドなど

それでは Flutterアプリのビルドなどを試していきます。

Flutter の SDK に関する設定

Flutter の新規プロジェクトを作成します。
そして、以下で SDK のパスの入力を求められます。

2025-01-25_23-54-15.jpg

今回、グローバルで設定したものを使う場合は以下を指定します。

C:\Users\【Windowsのユーザー名】\fvm\default\

なお今の設定で、上記の実体は以下となるようです。

C:\Users\【Windowsのユーザー名】\fvm\versions\3.27.3\

プロジェクトの設定

その後の画面では、適当なプロジェクト名で Android のみを対象としたような、以下のプロジェクトを作成しました。

2025-01-25_23-55-44.jpg

以下の表示が右下に出たものは「Automatically」を選びました。

2025-01-25_23-37-05.jpg

その後、Mac でのセットアップを行った記事でも書いていた、プロジェクトでの Android SDK の設定を行いました。

そのために、以下を開きます。

2025-01-26_00-04-54.jpg

以下の「No SDK」となっている部分は、Androio の SDK を選択します。

2025-01-26_00-06-12.jpg

Androidの実機の設定

この後、Androidの実機でビルドしたアプリを動かしていきます。

Android端末へビルドしたアプリをインストールするための準備・設定は、色々な記事で書かれていますので、ここでは省略します。

それが完了している状態で、以下のように実機がインストール先になっているのを確認して、ビルドを行いました。

2025-01-26_00-07-39.jpg

実機でアプリを動かす

ビルドが無事成功し、以下のように実機でアプリを動かすことができ

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?