WindowsにFlutterの環境構築してみた
2024.01.30こんにちは、ゲームソリューション部の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の環境構築してみたことを記事にしました。
どなたかの参考になると幸いです。
