はじめに

Flutter（フラッター）は、Googleによって開発されたフリーかつオープンソースのモバイルアプリケーションフレームワークである。FlutterはAndroidやiOS向けのアプリケーションの開発に利用されています。現在では、Webアプリケーションやデスクトップアプリケーションの開発でも利用できるようにFlutterの開発が進められています。

ここでは、Windows10で、Flutter開発環境をインストールし、Desktop Fultter Exampleの動作確認を行います。

Flutter開発環境の準備

Flutter、Android Studio、Android SDK、Visual Studio、ワークロード（C++によるデスクトップ環境）を順にインストールしていきます。画面キャプチャーを参考に、順に進めてください。

Flutterの取得

Flutterをgitを使ってクローンします。

Clone_with_HTTPS

https://github.com/flutter/flutter.git

環境変数 path の設定

環境変数の path に <取得先フォルダ>/flutte/bin を追加します。

pathに追加するパスの例

C:\workgit\flutter\bin

必要な開発環境の確認

flutter doctor コマンドで、必要な開発環境を確認します。初回のコマンド実行では、各種ツールのダウンロードが行われます。

flutter doctor

コマンド実行後、次のような実行結果と診断結果とが表示されます。いくつかの問題点が検出されていますので、最後の項目から順に解消していきます。

実行結果

Checking Dart SDK version...
Downloading Dart SDK from Flutter engine 4f00cb745c2895feb47985725f8ada94df72ce36...
Unzipping Dart SDK...
Building flutter tool...
Running pub upgrade...
Downloading Material fonts...                                       3.5s
Downloading android-arm-profile/windows-x64 tools...                3.2s
Downloading android-arm-release/windows-x64 tools...                2.9s
Downloading android-arm64-profile/windows-x64 tools...              3.9s
Downloading android-arm64-release/windows-x64 tools...              3.4s
Downloading android-x86 tools...                                   35.5s
Downloading android-x64 tools...                                   36.1s
Downloading android-arm tools...                                   16.5s
Downloading android-arm-profile tools...                            8.6s
Downloading android-arm-release tools...                            6.3s
Downloading android-arm64 tools...                                 19.8s
Downloading android-arm64-profile tools...                          9.3s
Downloading android-arm64-release tools...                          7.0s
Downloading Gradle Wrapper...                                       0.6s
Downloading package sky_engine...                                   1.6s
Downloading common tools...                                        18.0s
Downloading common tools...                                        18.0s
Downloading windows-x64 tools...                                   35.5s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v1.8.5-pre.159, on Microsoft Windows [Version 10.0.18362.267], locale ja-JP)
[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
[!] Android Studio (not installed)
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

Windowsデスクトップ開発の有効化

次のコマンドを実行し、Windowsデスクトップ開発を有効にし、Connected device 警告の解消します。

flutter config --enable-windows-desktop

Android Studio のインストール

Android Studio をダウンロードし、インストールします。
3.4.2 for Windows 64-bit (971 MB)

Android SDK のインストール

Android Studio を起動すると、Android SDK が見つからない旨のダイアログが表示されますので、インストールします。

Plugin のインストール

flutter doctor で、確認すると、Android Studio で、新たな警告が表示されます。

[!] Android Studio (version 3.4)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.

Android Studio を起動し、[Configure]→[Plugins]→[Marketplace]で、Flutterを検索し、FlutterをInstallします。FlutterをインストールするとDartも同時にインストールされます。

インストール後、Android Studio を再起動します。

Visual Studio のインストール

Visual Studio Communityをダウンロードし、インストールします。

ワークロードの追加変更

ここで、再度、flutter doctor を実行すると、Visual Studio で、新たな警告が表示されます。

[!] Visual Studio - develop for Windows (Visual Studio Community 2019 16.2.2)
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop
      development with C++" workload, and include these components:
        MSBuild
        MSVC v142 - VS 2019 C++ x64/x86 build tools (v14.21)
        Windows 10 SDK (10.0.17763.0)

デフォルトでインストールされるバージョンが異なるのでしょうか。Visual Studio インストーラーで、MSVCとWindows 10 SDK を追加変更します。

ANDROID_HOME 環境変数の設定

Android toolchain の警告を解決するため、ANDROID_HOME 環境変数に、Android Studio を起動した際にインストールした Android SDK のインストールフォルダを設定します。

Android ライセンスへの同意

環境変数の設定を有効にする為に別のコマンドプロンプトを起動し、 flutter doctor を実行するとAndroidライセンスへの同意がされていない旨のメッセージが表示されます。

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

指示の通り、次のコマンドを実行し、ライセンス条項に y キーで同意します。

flutter doctor --android-licenses

最終確認

最後に、flutter doctor コマンドを実行し、すべての問題点が解消していることを確認します。

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v1.8.5-pre.159, on Microsoft Windows [Version 10.0.18362.267], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.2.2)
[√] Android Studio (version 3.4)
[√] Connected device (1 available)

• No issues found!

Desktop Embedding for Flutter

Desktop Embedding for Flutter を取得し、exampleを実行します。

Desktop Embedding for Flutter の取得

Desktop Embedding for Flutterをgitを使ってクローンします。