WindowsにFlutterの環境構築してみた

こんにちは、ゲームソリューション部のsoraです。
今回は、自宅のデスクトップPCでFlutterを使ってみようと思いFlutterの環境構築をしたため、WindowsにFlutterの環境構築してみたことについて書いていきます。

Flutter SDKのインストール

Flutterの公式ページからFlutter SDKをインストールします。
Get Install＞Windows＞Mobileで進むと、Install the Flutter SDKの項目があります。
Android Studioを使用するため、Download and installでzipファイルをダウンロードして解凍します。

Pathの設定

FlutterへのPathを通します。
Windowsの環境変数で、ダウンロードして解凍したフォルダのflutter/binフォルダへのPathを通します。
正常にパスが通っている場合は、以下コマンドでバージョン確認をすることができます。

$ flutter
# 初回のみ以下が表示される
╔════════════════════════════════════════════════════════════════════════════╗
║                 Welcome to Flutter! - https://flutter.dev                  ║
║                                                                            ║
║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
║ statistics and basic crash reports. This data is used to help improve      ║
║ Flutter tools over time.                                                   ║
║                                                                            ║
║ Flutter tool analytics are not sent on the very first run. To disable      ║
║ reporting, type 'flutter config --no-analytics'. To display the current    ║
║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
║ event will be sent, and then no further information will be sent by the    ║
║ Flutter tool.                                                              ║
║                                                                            ║
║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
║ The Google Privacy Policy describes how data is handled in this service.   ║
║                                                                            ║
║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
║ crash reports to Google.                                                   ║
║                                                                            ║
║ Read about data we send with crash reports:                                ║
║ https://flutter.dev/docs/reference/crash-reporting                         ║
║                                                                            ║
║ See Google's privacy policy:                                               ║
║ https://policies.google.com/privacy                                        ║
║                                                                            ║
║ To disable animations in this tool, use 'flutter config --no-animations'.  ║
╚════════════════════════════════════════════════════════════════════════════╝
...
# バージョン確認
$ flutter --version
Flutter 3.16.9 • channel stable • https://github.com/flutter/flutter.git
Tools • Dart 3.2.6 • DevTools 2.28.5

次にFlutterを使用するための確認コマンドを実行してみると、いくつかエラーが出て準備ができていないことがわかります。
エラーに関して、以降の工程で解消していきます。

# Flutterを使うための必要な準備ができているかの確認
$ flutter doctor
# いくつかエラーが出る
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.16.9, on Microsoft Windows [Version 10.0.19045.3930], locale ja-JP)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[X] Android toolchain - develop for Android devices
    X cmdline-tools component is missing
        Run `path/to/sdkmanager --install "cmdline-tools;latest"`
        See https://developer.android.com/studio/command-line for more details.
[√] Chrome - develop for the web
[X] Visual Studio - develop Windows apps
    X 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 (not installed)
[√] VS Code (version 1.85.1)
[√] Connected device (3 available)
[√] Network resources

! Doctor found issues in 3 categories.

Android Studioのインストール

[!] Android Studio (not installed)

flutter doctorで出た上記エラーを解消するために、Android Studioをインストールします。
Android Studio公式ページからAndroid Studioをダウンロードします。

ダウンロードしたexeファイルを実行してインストールしていきます。
インストール時の途中の設定項目はすべてデフォルトのままにしました。
もし過去のAndroid Studioの設定ファイルが残っている場合は、以下のような選択肢が表示されます。
インストール完了時に以下のエラーが表示されましたが、WHPX(Windows Hypervisor Platform)が有効になっている場合に出るエラーのようで、無視しても特に問題なく使用可能です。

Intel® HAXM installation failed. To install Intel® HAXM follow the instructions found at: https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows

インストールが完了した後、flutter doctorを実行してみると該当の箇所のエラーが解消されていることがわかります。

$ flutter doctor
...
[√] Android Studio (version 2023.1)
...

Android Toolchainのインストール

[X] Android toolchain - develop for Android devices
    X cmdline-tools component is missing
        Run `path/to/sdkmanager --install "cmdline-tools;latest"`
        See https://developer.android.com/studio/command-line for more details.

flutter doctorで出た上記エラーを解消するために、Android Toolchainをインストールします。

先ほどインストールしたAndroid Studioを開いて、More ActoinでSDK Manager＞SDK Toolesと進みます。
Android SDK Command-line Tools(Latest)にチェックを入れて、OKをクリックします。


次にライセンスへの同意のため、以下コマンドを実行します。
4,5回程度、同意を求められるため、yで進めます。

$ flutter doctor --android-licenses

ここまで終わった後、flutter doctorを実行してみると該当の箇所のエラーが解消されていることがわかります。

$ flutter doctor
...
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
...

Visual Studioのインストール

[X] Visual Studio - develop Windows apps
    X 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

flutter doctorで出た上記エラーを解消するために、Visual Studioをインストールします。

今回は無料のコミュニティ版を使用するため、Visual Studio Communityのページからダウンロードします。
ダウンロードしてインストールするとき、以下画面ではC++によるデスクトップ開発とモバイル開発を選択しました。（デスクトップ開発のみでも問題ないかもしれません）

インストールが終わった後、flutter doctorを実行してみると全てのエラーが解消されていることがわかります。

$ flutter doctor
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.5)

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.16.9, on Microsoft Windows [Version 10.0.19045.3930], locale ja-JP)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.5)
[√] Android Studio (version 2023.1)
[√] VS Code (version 1.85.1)
[√] Connected device (3 available)
[√] Network resources

• No issues found!

Android StudioのPluginでFlutterの追加

次にAndroid StudioでFlutterプロジェクトの作成をするための準備をします。

Android Studioを開いて、PluginsからFlutterをインストールします。
インストールが終わると、Projectsの画面でNew Flutter Projectが追加されていることがわかります。

新規プロジェクトの作成から実行まで

いよいよAndroid StudioでFlutterを実行していきます。

New Flutter ProjectでFlutter SDK pathにダウンロードしたflutterフォルダのパスを指定します。
Platformsは、今回はモバイルアプリのため、AndroidとiOSのみにチェックを入れます。
プロジェクトが作成できると、main.dartファイルが表示されます。
次に、実行するためのエミュレータを実行するため、右側のデバイスマネージャーからデフォルトで存在するエミュレータを起動します。
起動ができるとスマホのエミュレータの画面が表示されます。
エミュレータも起動できたため、画面上部の緑色の実行ボタンにて、プログラムを実行します。
そうするとエミュレータの画面が変わって実行できたことが確認できました。

最後に

今回は、WindowsにFlutterの環境構築してみたことを記事にしました。
どなたかの参考になると幸いです。