Flutter開発環境構築メモ

前提

• Flutterの開発環境を構築した際のメモです。（2022/05/21時点）
• 使用しているPCのOSは Windows 10 Home
• PCのプロセッサは AMD Ryzen 7

Flutter のインストール

• Flutter の公式サイトから Windows を選択し、「flutter_windows_3.0.1-stable.zip」を選択してダウンロード
• 「flutter_windows_3.0.1-stable.zip」を解凍し、任意の場所に置いておく（今回は C:\Users\UserName\Flutter\flutter_windows_3.0.1-stable に配置）
• 「環境変数の編集」から、変数：Path、値：C:\Users\UserName\Flutter\flutter_windows_3.0.1-stable\flutter\bin を設定する
• コマンドプロンプトから、Flutterのパスが正しく設定されていることを確認する

>where flutter dart
C:\Users\UserName\Flutter\flutter_windows_3.0.1-stable\flutter\bin\flutter
C:\Users\UserName\Flutter\flutter_windows_3.0.1-stable\flutter\bin\flutter.bat
C:\Users\UserName\Flutter\flutter_windows_3.0.1-stable\flutter\bin\dart
C:\Users\UserName\Flutter\flutter_windows_3.0.1-stable\flutter\bin\dart.bat

• flutter doctor を実行して、必要な依存関係ファイルが揃っているか確認する

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19043.1706], 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, please use
      `flutter config --android-sdk` to update to that location.

[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      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.67.2)
[√] Connected device (3 available)
[√] HTTP Host Availability

! Doctor found issues in 3 categories.

全てが[√]になるまで以下のインストールを行う

Android Studio 関連のインストール

• Android Studio のインストール
• cmdline-tools;latest のインストール
• Android ライセンスの同意

Android Studio のインストール

• Android Studio の公式サイトから 「Download Android Studio」 を選択し、利用規約の同意にチェックして 「Download Android Studio Chipmunk 2021.2.1 for Windows」を選択してダウンロード

• 「android-studio-2021.2.1.14-windows.exe」を選択してインストール

• インストール完了後にAndroid Studio を起動して、画面に従ってAndroid SDK をセットアップする

• 「次へ」を選択する
  

• 「次へ」を選択する
  

• 「次へ」を選択する
  

• 利用規約に同意して「完了」を選択する
  

• 「完了」を選択する
  

• Android Studio のインストール完了
  

• 再度flutter doctor を実行して確認する

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19043.1706], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    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.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.67.2)
[√] Connected device (3 available)
[√] HTTP Host Availability

! Doctor found issues in 2 categories.

cmdline-tools;latest のインストール

• 「cmdline-tools;latest」をインストールする必要があるため、Android Studio のProjects > More Actions > SDK Maneher を選択する
  

• SDK Toolsのタブを選択し、「Android SDK Command-line Tools(latest)」にチェックを入れてOKを選択する
  

• インストールが終わったら、Finishを選択して完了する
  

• 再度flutter doctor を実行して確認する

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19043.1706], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.67.2)
[√] Connected device (3 available)
[√] HTTP Host Availability

! Doctor found issues in 2 categories.

Android ライセンスの同意

Android ライセンスの同意するために以下のコマンドを実行する

flutter doctor --android-licenses

• 再度flutter doctor を実行して確認する

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19043.1706], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[√] Chrome - develop for the web
[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.67.2)
[√] Connected device (3 available)
[√] HTTP Host Availability

! Doctor found issues in 1 category.

Visual Studio のインストール

• Microsoft の公式サイトにアクセスし、コミュニティ > 無料ダウンロード を選択して、インストーラをダウンロード
• 「VisualStudioSetup.exe」を選択して、インストールを行う
• 「C++によるデスクトップ開発」に選択して、インストールを選択する
  
• 完了したらサインインを求めるので、サインインして完了
• 再度flutter doctor を実行して確認する

Due to an error, the doctor check did not complete のエラーメッセージが表示された場合

2022/05/21時点で「flutter doctor」を実行した際に、以下のエラーメッセージが表示される

[☠] Visual Studio - develop for Windows (the doctor check crashed)
    X Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know about this issue at https://github.com/flutter/flutter/issues.
    X Exception: Bad UTF-8 encoding (U+FFFD; REPLACEMENT CHARACTER) found while decoding string: [

Flutter の github リポジトリ によると Visual Studio に含まれる vswhere の問題でエラーが生じるので、github から「vswhere.exe」をダウンロードして「C:\Program Files (x86)\Microsoft Visual Studio\Installer」に上書きコピーすると解消される

flutter doctor を実行して環境構築が完了したか確認する

「flutter doctor」を実行して、すべて[√]が表示したら完了です。

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19043.1706], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.1)
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.67.2)
[√] Connected device (3 available)
[√] HTTP Host Availability

• No issues found!

Flutter と Dart のプラグインを Android Studio にインストール

• Plugins から Marketplace タブから Flutter と検索して Install を選択し、完了したら再起動する
  ※Flutter のプラグインをインストールすると、Dart のプラグインもインストールされます

Android Studioの日本語化