[Flutter] WindowsでのAndroid 開発環境設定

FlutterはGoogleが提供するものでクロスプラットフォーム開発が可能です。Android以外にもiOSアプリやWebアプリ開発もできます。

Flutter

ここではFlutterのAndroid開発環境をWindowsで作ってみたいと思います。iOSアプリではMacが必要になります
　

目次
1. Flutter SDK
　1.1 ダウンロード
　1.2 環境変数PATHの設定: Flutter SDK
2. Android Studio
　2.1 Android Studio インストール
　2.2 環境変数PATHの設定: Android Studio
3. VSCode インストール
4. Flutter doctor
5. テストプロジェクト

Flutter SDK

Flutter SDKを以下よりOSに合わせてダウンロードします。（ここではWindows OSとして進めていきます）
Install Flutter

Windowsを選択

アプリのタイプは
Recommended のAndroidを選択

Windowsのケース：開発環境に必要とされる条件

x86_64 CPU cores: 最小で４個、８個が推奨
RAM: 最小で８GB、16GBが推奨
DisPlay: 最小で1366 x 768、1920ｘ1080が推奨
Disk Space: 最小で11GB、60GBが推奨

ダウンロード

以下は公式の Windows install に沿って進めていきます。

flutter_windows_xxx.zip のzipファイルをダウンロード

VS Codeでのセットアップでも可能ですが、Android Studioを使う場合はこちらを選択

過去の古いSDKはこちら　Flutter SDK releases　にあります。

flutter_windows_xxx.zip のzipファイルを解凍し、例えばC:\Users\{username} 以下にフォルダを作成してコピペします。

C:\Program Files\ やパスに日本語が入っているとうまくいかないので注意しましょう

環境変数PATHの設定: Flutter SDK

このflutter sdkにPATHを通してどこからでも実行させられるように環境変数のPATHに追加します。

Windows 11 のケースです
最終的には環境変数を設定するところまで到達すればいいのですが、よく変わります
また複数のやり方で入っていけたりもします

「スタート」「Windows システムツール」「コントロールパネル」から、

「システムとセキュリティ」

「システム」

ここは「環境変数」で検索して
「システム環境変数の編集」を選択します

as2024.1.adb 02b - [Flutter] WindowsでのAndroid 開発環境設定

「環境変数」

環境変数の「システム環境変数」の「Path」に登録

編集で新規でパスを追加
例えば c\[xxx]\flutter\bin のパスを新規で追加
binまで必要です

尚、この変更にはPC再起動が必要です　

Android Studio

Android Studioを設定します。これを使うとAndroidのエミュレータが使用できます。またDartのエディタとしても使えます

インストール

Android Studio をWindowsにインストールするには以下を参考にしてください。
　

ccf1639bf2a87341a46fd52c9da41b46 s 100x100 - [Flutter] WindowsでのAndroid 開発環境設定

[Android] Android Studio をインストールする手順（Windows）

Androidアプリを作るためには開発環境が必要で、Googleの推奨環境は Android Studio (アンドロイドスタジオ) で...

　
注意点として、flutterとは違ってインストール場所の変更はお勧めできないのでそのまま設定していきます。結果として

C:\Program Files\Android
C:\Users\「ユーザー名」\AppData\Local\Android

以下にファイルが格納されます。（これ以外にもありますが）、また「ユーザー名」を日本語にすると問題が起きますのでアルファベットのユーザー名を作って再インストールしないと後々面倒な事になります。

エミュレータ：
Android Studioがインストールできたなら、以下を参考にエミュレータを設定します。
　

avd a00 100x100 - [Flutter] WindowsでのAndroid 開発環境設定

[Android] エミュレータの作成、設定

アプリが動作するか確認するためには、Android Studio のエミュレータが便利です。エミュレータの設定には Device Manag...

　
USBドライバー：
またUSBドライバーを設定して実機上でテストできるようにもできます。
　

cat27 00b 100x100 - [Flutter] WindowsでのAndroid 開発環境設定

[Android] 実機でのワイヤレスデバッグとUSBデバッグ

Androidの開発環境を設定した後は、実機でデバッグできるように実機とUSBで接続し、ドラドライバーのインストールと設定が必要です。

環境変数PATHの設定: Android Studio

flutterと同じようにAndroid StudioのPATHを設定します。
PATHは先ほどのAndroidフォルダ以下にあるSdkです。
C:\Users\「ユーザー名」\AppData\Local\Android\Sdk

環境変数のPathに設定します。

Android Studio を起動します
「Plugins」タグから、「flutter」を検索してインストール

インストールが終わると「Restart IDE」と表示されるのでクリックしてAndroid Studioを再起動させます

VSCode インストール

Flutterのエディターとして推奨されているのが VSCode (Visual Studio Code) です

Android Studio でもできないことはないのですがこちらの方が軽いです

まずはダウンロードです。
Visual Studio Code　Windows版をダウンロードします。

VSCodeUserSetup-x64-x.x.x.exe ファイルがダウンロードされます

exeファイルを実行、仕様許諾契約書に同意してインストールを始めます

VS-Codeがインストールされました。

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

左のアイコン拡張機能(Extensions) をクリック
「検索窓」に fultter を入力すると
いくつか候補が出くるので、まずはFlutterをインストールします

とりあえず、主要なツールは入れて設定しました

Flutter doctor

flutter doctorを使って環境がセットアップされているか確認します。
コマンドプロンプトを起動して以下コマンドを入力します

コマンドプロンプトはWindowsのアプリではターミナルでも探せます

あるいはPowerShellを使うこともできます

最初はversionを確認してみます

C:\Users\hoge>flutter --version
Flutter 3.22.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b0850beeb2 (12 days ago) • 2024-07-16 21:43:41 -0700
Engine • revision 235db911ba
Tools • Dart 3.4.4 • DevTools 2.34.3

C:\Users\hoge>flutter --version

Flutter 3.22.3 • channel stable • https://github.com/flutter/flutter.git

Framework • revision b0850beeb2 (12 days ago) • 2024-07-16 21:43:41 -0700

Engine • revision 235db911ba

Tools • Dart 3.4.4 • DevTools 2.34.3

次に、doctorで環境の診断

C:\Users\hoge>flutter doctor

1	C:\Users\hoge>flutter doctor

診断結果が表示されるのでそれぞれ対処していきます。

C:\Users\hoge>flutter doctor
...
Welcome to Flutter! - https://flutter.dev 
...

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.3, on Microsoft Windows [Version 10.0.22631.3958], locale ja-JP)
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[!] Android toolchain - develop for Android devices (Android SDK version 35.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/docs/get-started/install/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.1)
[✓] VS Code (version 1.89.1)
[✓] Connected device (3 available)
[✓] Network resources


C:\Users\hoge>

C:\Users\hoge>flutter doctor

...

Welcome to Flutter! - https://flutter.dev

...

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, 3.22.3, on Microsoft Windows [Version 10.0.22631.3958], locale ja-JP)

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[!] Android toolchain - develop for Android devices (Android SDK version 35.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/docs/get-started/install/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.1)

[✓] VS Code (version 1.89.1)

[✓] Connected device (3 available)

[✓] Network resources

C:\Users\hoge>

[x] の問題を解決します

1. cmdline-tools component is missing
2. Android license status unknown
3. Visual Studio – develop Windows apps

Visual Studio がインストールされていないのは
Windowsアプリを作る場合なので今回はパス

cmdline-tools component is missingは
Windows のケースでは、Android Studio のSDKmanager を開き

「SDK Tools」のタブから
コマンドラインツールをインストールします

Android Licensesが許可されていない問題の対処方法は

以下コマンドを入力して規約に了承する意味の y を入力

C:\Users\hoge>flutter doctor --android-licenses
...                                                                               
Accept? (y/N): y
...
Accept? (y/N): y
...

C:\Users\hoge>flutter doctor --android-licenses

...

Accept? (y/N): y

...

Accept? (y/N): y

...

再度doctorを走らせてみるとパスしていると分かります

テストプロジェクト

これで環境設定がある程度できました
次は実際のアプリを作っていきましょう

コマンドプロンプトで以下のコードを実行します

flutter create [プロジェクト名]

例えば testapp001 で作成してみます

C:\Users\hoge>flutter create testapp001
Creating project testapp001...
Resolving dependencies in `testapp001`... (1.2s)
Downloading packages...
Got dependencies in `testapp001`.
Wrote 129 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd testapp001
  $ flutter run

Your application code is in testapp001\lib\main.dart.

C:\Users\hoge>flutter create testapp001

Creating project testapp001...

Resolving dependencies in `testapp001`... (1.2s)

Downloading packages...

Got dependencies in `testapp001`.

Wrote 129 files.

All done!

You can find general documentation for Flutter at: https://docs.flutter.dev/

Detailed API documentation is available at: https://api.flutter.dev/

If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

$ cd testapp001

$ flutter run

Your application code is in testapp001\lib\main.dart.

この場合、
C:\Users\hoge\
以下に testapp001 フォルダが展開されています

プロジェクトの中に入り
cd testapp001
flutter run

でアプリを起動します

C:\Users\hoge>cd testapp001

C:\Users\hoge\testapp001>flutter run
Connected devices:
Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.3958]
Chrome (web)      • chrome  • web-javascript • Google Chrome 127.0.6533.88
Edge (web)        • edge    • web-javascript • Microsoft Edge 126.0.2592.87
[1]: Windows (windows)
[2]: Chrome (chrome)
[3]: Edge (edge)
Please choose one (or "q" to quit):

C:\Users\hoge>cd testapp001

C:\Users\hoge\testapp001>flutter run

Connected devices:

Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22631.3958]

Chrome (web) • chrome • web-javascript • Google Chrome 127.0.6533.88

Edge (web) • edge • web-javascript • Microsoft Edge 126.0.2592.87

[1]: Windows (windows)

[2]: Chrome (chrome)

[3]: Edge (edge)

Please choose one (or "q" to quit):

とりあえず。Chromeを選択すると

Please choose one (or "q" to quit): 2
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             20.8s
This app is linked to the debug service: ws://127.0.0.1:65027/CDA6gBsiaw0=/ws
Debug service listening on ws://127.0.0.1:65027/CDA6gBsiaw0=/ws

  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

A Dart VM Service on Chrome is available at: http://127.0.0.1:65027/CDA6gBsiaw0=
The Flutter DevTools debugger and profiler on Chrome is available at:
<div class="blog-card external-blog-card blog-card-thumbnail-left cf"><div class="blog-card-thumbnail"><a href="http://127.0.0.1:9101?uri=http://127.0.0.1:65027/CDA6gBsiaw0=" class="blog-card-thumbnail-link" rel="nofollow"><img src="https://s0.wordpress.com/mshots/v1/http%3A%2F%2F127.0.0.1%3A9101%3Furi%3Dhttp%3A%2F%2F127.0.0.1%3A65027%2FCDA6gBsiaw0%3D?w=100&h=100" alt="" class="blog-card-thumb-image" height="100" width="100" /></a></div><div class="blog-card-content"><div class="blog-card-title"><a href="http://127.0.0.1:9101?uri=http://127.0.0.1:65027/CDA6gBsiaw0=" class="blog-card-title-link" rel="nofollow">http://127.0.0.1:9101?uri=http://127.0.0.1:65027/CDA6gBsiaw0=</a></div><div class="blog-card-excerpt"></div></div><div class="blog-card-footer"><div class="blog-card-site"><span class="blog-card-favicon"><img src="//www.google.com/s2/favicons?domain=127.0.0.1" class="blog-card-favicon-img" alt="" width="16" height="16" /></span>127.0.0.1</div></div></div>

Please choose one (or "q" to quit): 2

Launching lib\main.dart on Chrome in debug mode...

Waiting for connection from debug service on Chrome... 20.8s

This app is linked to the debug service: ws://127.0.0.1:65027/CDA6gBsiaw0=/ws

Debug service listening on ws://127.0.0.1:65027/CDA6gBsiaw0=/ws

To hot restart changes while running, press "r" or "R".

For a more detailed help message, press "h". To quit, press "q".

A Dart VM Service on Chrome is available at: http://127.0.0.1:65027/CDA6gBsiaw0=

The Flutter DevTools debugger and profiler on Chrome is available at:

http://127.0.0.1:9101?uri=http://127.0.0.1:65027/CDA6gBsiaw0=

Chromeが立ち上がり
アプリが起動します

「＋」ボタンをクリックすると数字が増加します

Flutter環境構築はできているようです

References:
Flutter
Flutter architectural overview
Flutter Install
Set up an editor – Flutter