【IT】FlutterをWindows環境にインストールする

7:18

こんにちは、ともです。

前回LubuntuにFlutterをインストールしたのですが、パフォーマンスが悪かったため、今回はFlutterをWindows環境にインストールします。

Flutterでアプリ作成

Flutterとは

FlutterはGoogleが開発したオープンソースのモバイルアプリケーションフレームワークです。

GITダウンロード

FlutterのインストールにはGITを使うためダウンロードします。

https://git-scm.com/download/win

ダウンロード後にインストールを行い、環境パスを設定します。Windowsの検索バーに「env」と入力し[アカウントの環境変数の編集]を選択します。編集後パスを入力します。「例）D:\Program Files\Git\bin」

Flutterダウンロード

公式ページからFlutterSDKをダウンロードします。ここではWindowsのSDKをダウンロードします。

https://flutter.dev/docs/get-started/install/

Flutterインストール

公式ページの手順に従ってインストールを行います。ダウンロードしたファイルはzip形式です。任意のフォルダーにファイルを展開します。「例）D:\Program Files\flutter」

環境パス設定

環境パスを設定します。Windowsの検索バーに「env」と入力し[アカウントの環境変数の編集]を選択します。編集後パスを入力します。「例）D:\Program Files\flutter\bin」

依存関係確認

Flutterの依存関係を確認します。Windows PowerShellを起動します。起動後以下のコマンドを入力します。

    
# flutter doctor

以下のようなメッセージが表示される場合があります。

    
Downloading Material fonts...                                       0.6s
Downloading Gradle Wrapper...                                       0.0s
Downloading package sky_engine...                                   0.2s
Downloading flutter_patched_sdk tools...                            1.5s
Downloading flutter_patched_sdk_product tools...                    1.7s
Downloading windows-x64 tools...                                    4.0s
Downloading windows-x64/font-subset tools...                        0.5s
Downloading android-arm-profile/windows-x64 tools...                0.2s
Downloading android-arm-release/windows-x64 tools...                0.3s
Downloading android-arm64-profile/windows-x64 tools...              0.3s
Downloading android-arm64-release/windows-x64 tools...              0.3s
Downloading android-x64-profile/windows-x64 tools...                0.3s
Downloading android-x64-release/windows-x64 tools...                0.2s
Doctor summary (to see all details, run flutter doctor -v):
[check] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.19041.685], 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/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[!] Android Studio (not installed)
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

Android Studioのセットアップ

ここではAndroid Studioをインストールします。以下のURLからダウンロードします。

https://developer.android.com/studio

ダウンロードしたzipファイルを解凍します。ウィザード形式でインストールを進めます。

Flutter Plugin設定

Android Studioを起動し右下の[Configration]から[Plugins]を選択します。検索フィールドに「Flutter」と入力しプラグインを選択してインストールします。

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

License

ライセンスを有効にします。

    
# flutter doctor --android-licenses

Flutterプロジェクト作成

Android Studioを起動しFlutterのCreate New Flutter Projectを実行します。

Flutter Applicationを選択します。選択後[Project Name]に「flutter_app」と入力し、[Flutter SDK Path]にFlutterのインストール先「D:\Program Files\flutter」を設定します。設定後[Next]を押下し次の画面で[Finish]を選択します。

エミュレータ起動

Flutterプロジェクト作成後、右上の[AVD Manager]を押下してデバイスを起動します。

Flutter Doctor確認

Flutter Doctorで確認します。

    
# flutter doctor

    
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.19041.685], locale ja-JP)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Android Studio (version 4.1.0)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] Connected device (1 available)

! Doctor found issues in 1 category.

Android Studioのプラグインが有効になっていませんが、これはAndroid Studio4.1のバグのためここでは無視して大丈夫です。