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