WindowsにFlutterをインストールして開発環境を構築する方法を解説します。
【0】はじめに
WindowsにFlutterをインストールして開発環境を構築する方法を解説します。
なお、本ページの内容は以下動画でも解説しています。
【1】Flutter SDKのインストール
① 公式HP（https://flutter.dev//）を開きます。
② 「Get Install」 ＞ 「Windows」 ＞ 「Android」をクリックし、開いたページの「Install the Flutter SDK」という見出しの少し下にある「Download and install」タブをクリックすると、ZIPファイルのダウンロードボタンが表示されるのでクリックします。
③ ダウンロードしたzipファイルを解凍し、flutterフォルダを好きな場所に配置します。
(例:Dドライブ直下なら「D:\flutter」)
④ 検索欄で「環境変数」と入力し、「システムの環境変数の設定」をクリックします。
⑤「システムのプロパティ」が開くので、「環境変数」をクリックします。
⑥「〇〇のユーザー環境変数」という表の「Path」を選択し、「編集」をクリックします。
⑦ 「新規」をクリックし、flutterフォルダ内にあるbinフォルダのパスを入力し、OKをクリックします。
(例:Cドライブ直下なら変数値は「D:\flutter\bin」)
⑧コマンドプロンプトで以下のコマンドを実行し、ヘルプが表示されたらFlutterインストール成功です。
flutter
⑩ ただし、実際にアプリケーションを作成するには、他のソフトウェアのインストール作業や設定作業が必要となります。
以下のコマンドを実行して確認します。
flutter doctor
実行結果の例
「flutter doctor」を実行した結果、すべての項目に✔チェックがはいっていると、アプリケーション作成に必要な環境構築が全て完了していることになります。
✘が入っている項目は、未完了ということになります。
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.27.1, on Microsoft Windows [Version 10.0.22635.4655], locale ja-JP)
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/to/windows-android-setup for more details.
[✓] Chrome - develop for the web
[✗] Visual Studio - develop Windows apps
✗ Visual Studio not installed; this is necessary to develop Windows apps.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[✘] Android Studio (version 2024.2)
[✓] VS Code (version 1.96.2)
[✓] Connected device (3 available)
[✓] Network resources
! Doctor found issues in 2 categories.
【2】Android Studioのインストール
Android Studioをまだ入れていない場合、以下の手順でインストールしましょう。
(「flutter doctor」を実行し、「[✘] Android Studio」と✘が付いていたらインストールが必要です)
① 公式ページhttps://developer.android.com/studio?hl=jaを開きます。
① [Android Studio 〇〇をダウンロード]をクリックします。
③ 利用規約画面が出てくるので、下にある「上記の利用規約を読んだうえで利用規約に同意します。」にチェックを入れ、その下にある[ダウンロード]ボタンをクリックすると、インストーラー(exeファイル)がダウンロード開始されます。
※サイズが大きいので時間がかかります。
④ exeファイルのダウンロードが完了したら、ダブルクリックして起動します。
④ 「Next」を選択します。
⑤ 「Next」を選択します。
⑥ 「I Agree」を選択します。
⑦ 「Next」を選択します。
⑧ 「Install」を選択します。
⑨ インストールが完了したら「Next」→「Finish」を選択します。
⑩ インストール作業は以上です。
【3】Android toolchain関連の設定作業
「flutter doctor」を実行し、以下のようにAndroid toolchain関連の設定が!や✗となっている場合の設定作業を解説します。
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/to/windows-android-setup for more details.
① Android Studioを起動します。
② 「More Actions」→ 「SDK Manager」をクリックします。
③ 左サイドメニューから「Languages & Frameworks」→「Android SDK」をクリックします。そして、「SDK Tools」タブをクリックし、「Android SDK Command-line Tools」にチェックを入れて「Apply」をクリックします。
④ 「Android SDK Command-line Tools」のダウンロードが開始されますので、完了したら「OK」をクリックして閉じます。
⑤ コマンドプロンプト(ターミナル)を開き、以下のコマンドを実行します。
flutter doctor --android-licenses
⑥ 何度か質問されるので全て「y」を押して同意していき、完了します。
⑦ 「flutter doctor」を実行し、Android toolchain関連の設定が完了状態になっているか確認します。
【4】Android StudioでFlutterプラグインをインストール
Android StudioでFlutterを用いてアプリを開発する場合、Flutterプラグインをインストールする必要があります。
インストール手順は以下のとおりです。
① Android Studioを起動します。
② 左メニューの「Plugins」を選択します。
③ 検索欄で「Flutter」と検索し、「Flutter」というプラグインの横にある「Install」ボタンをクリックします。
④ インストールが終わったらAndroid Studioを再起動します。
【5】Android StudioでFlutterプロジェクトを作成
準備が整ったら、以下の手順でFlutterプロジェクトを作成し、デモアプリを実行してみましょう。
① Android Studioを起動します。
② Android Studio のメニューから 「New Flutter Project…」をクリックします。
③ 「Flutter」を選択します。
④ 「Flutter SDK path」にFlutter SDKのパス(環境変数のパスより1つ上)を入力します。
(例:「D:\flutter」)
④ 「Next」をクリックします。
⑤ 作成するプロジェクトの各種設定を入力し、「Finish」をクリックします。
| 設定項目 | 内容 |
|---|---|
| Project name | Flutter プロジェクト名 |
| Project location | Flutter プロジェクトの保存場所 |
| Description | Flutter プロジェクトの説明文 |
| Project type | Flutter プロジェクトの種類 |
| Organization | プロジェクト作成者のドメイン |
| Android language iOS language |
AndroidおよびiOS使用する言語 |
| Platforms | アプリ開発したいプラットフォームを指定 |
⑥ これで新規プロジェクトが作成されました。
作成されたプロジェクト内のソースコードは、デフォルトでデモアプリが記述されていますので、試しにシミュレータで動かしてみましょう。
⑦ Android Studio 画面右上の実行デバイスを指定するところから、「Open Android Emulator」をクリックします。
⑧ シミュレータが起動したら、Android Studio 画面右上の「▶︎」を押して実行します。
⑨ デモアプリが起動すれば、動作確認は完了です。
【6】Androidエミュレータを入手してデバック
Android StudioでFlutterプロジェクトをデバックする際、Androidエミュレータ上で動作確認したい場合、以下の設定作業が必要となります。
① Android Studioを起動します。
② Android Studio のメニューから 「More Actions」 > 「Virtual Device Mangager」をクリックします。
③ 「Create virutal device」をクリックします。
④ 好きなデバイスを選択して「Next」をクリックします。
⑤ 好きなsystem imageの横にあるダウンロードアイコン(⇓)をクリックしてダウンロードし、「Next」→「Finish」をクリックしま
⑥ あとは、Flutterプロジェクトを開き、画面右上の実行デバイスを指定するところから、作成したデバイスを選択します。
⑦ シミュレータが起動したら、Android Studio 画面右上の「▶︎」を押して実行します。
Launching lib\main.dart on sdk gphone64 x86 64 in debug mode... Running Gradle task 'assembleDebug'...
The IDE has detected Microsoft Defender with Real-Time Protection enabled. It might severely degrade IDE performance. It is recommended to make sure the following paths are added to the Defender folder exclusion list: C:\Users\XXX\AppData\Local\Android\Sdk C:\Users\XXX\AppData\Local\Google\AndroidStudio2024.2 D:\sample1 If you previously excluded them either automatically or manually, please select "Ignore for this project". Note: running "Automatically" will ask for administrative privileges
関連ページ
コメント