Zenn
📌

ScoopでWindows上にFlutter環境を構築する

2021/11/03に公開
Flutter
PowerShell
Android Studio
Windows
scoop
tech

概要

ふと思いついたアプリをクロスプラットフォームに作ってみたくて色々調べた結果、Flutterを選んだので環境構築からプロジェクトの作成、実行までの備忘録を残しておく

環境構築

各種情報

  • 実施日: 2021-11-03
  • Windows: Windows 10 Home, Version 20H2, Build 19042.1288
  • CPU: AMD Ryzen 7 3700X 8-Core Processor 3.60 GHz

Scoopをインストール

まずは公式サイト通りにScoopをインストール
インストールする際はWindows TerminalアプリではなくPowerShellアプリを使うこと（Windows Terminalアプリの中で実行しているシェルがPowerShellでもPowerShellアプリを使う）

PowerShell
$ Set-ExecutionPolicy RemoteSigned -scope CurrentUser
$ Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

ちなみにScoop自体のアンインストールは以下のコマンドで可能
詳細はこちらのページに記載されている

PowerShell
$ scoop uninstall scoop

Gitをインストール

PowerShell
$ scoop install git

Scoopバケットを追加

PowerShell
$ scoop bucket add extras
$ scoop bucket add java

Flutter開発のためのパッケージをインストール

PowerShell
$ scoop install dart
$ scoop install flutter
$ scoop install android-sdk
$ scoop install android-studio

参考にしたサイトの多くはこれに加えて

PowerShell
$ scoop install adb
$ scoop install adopt8-hotspot

の実行も促していたが、adbはandroid-sdkで依存関係としてインストールされ、adopt8-hotspotは2021年10月22日 1:06 JSTにこちらのPRで削除されたため、代わりにtemurin8-jdkがflutterによってインストールされるようになっている。temurin8-jdkについてはこちらのコメントがわかりやすい
ここでインストールしているパッケージを確認してみる

PowerShell
$ scoop list
Installed apps:

  7zip 19.00 [main]
  adb 31.0.3 [main]
  android-sdk 4333796 [extras]
  android-studio 2020.3.1.25 [extras]
  dart 2.14.4 [main]
  flutter 2.5.3 [extras]
  git 2.33.1.windows.1 [main]
  temurin8-jdk 8u312-b07 [java]

また、flutterインストール時のログにはflutter doctor（ツール類のインストール状況を表示するコマンド）の結果が出力されている

PowerShell
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1288], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    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
[!] Android Studio (not installed)
[√] VS Code (version 1.60.0)
[√] Connected device (2 available)

! Doctor found issues in 2 categories.

ChromeとVSCodeは別途インストールしてあったためチェックが付いている
インストールされたAndroid Studioを起動するとセットアップが開始される。Welcome to Android Studioの画面まで来た状態で、flutter doctorを実行するとAndroid Studioにチェックが付いたことを確認できる

PowerShell
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1288], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    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
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.60.0)
[√] Connected device (2 available)

Android toolchainの警告を解消するため、まずはライセンスに同意する

PowerShell
$ flutter doctor --android-licenses

終わったらflutter doctorを実行してみる

PowerShell
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1288], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    X Flutter requires Android SDK 29 and the Android BuildTools 28.0.3
      To update the Android SDK visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed
      instructions.
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.60.0)
[√] Connected device (2 available)

ライセンスの警告はなくなった
次にAndroid StudioのWelcome画面を開き、Customize > All settings...をクリック Appearance & Behavior > System Settings > Android SDKへ移動し、デフォルトで開かれているSDK PlatformsタブのAndroid 10.0にチェックを付けてApplyでインストールする
ここでflutter doctorすると

PowerShell
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1288], locale ja-JP)
[☠] Android toolchain - develop for Android devices (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 Null check operator used on a null value
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.60.0)
[√] Connected device (2 available)

! Doctor found issues in 1 category.

エラーが発生していることがわかる
Android Studioの画面に戻り、SDK Platformsタブの1つ右にあるSDK ToolsタブでAndroid SDK Command-line Tools(latest)にチェックを付けてインストールする
そしてflutter doctorしてみると

PowerShell
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1288], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 32.0.0-rc1)
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.60.0)
[√] Connected device (2 available)

• No issues found!

全ての問題が解消され、Flutterをインストールできた

Flutterプロジェクトの作成と実行

Android StudioにFlutterプラグインを追加

FlutterプロジェクトをAndroid Studioで作成し実行してみる
設定画面のPluginsでMarketplaceタブを開き、flutterと検索してFlutterプラグインをインストールしAndroid Studioを再起動する

再起動後、もう一度設定画面を開いてPluginsのInstalledからFlutterプラグインにチェックが付いていることを確認する

Flutterプロジェクトを作成する

Welcome画面に戻ると再起動時点でNew Flutter Projectというボタンが追加されているはずなので、これを押してセットアップしていく

Flutterという項目に移動するとFlutter SDK pathを指定するフォームがあるので、ここには以下の実行結果を入力する

PowerShell
$ scoop prefix flutter
C:\Users\ユーザー名\scoop\apps\flutter\current

今回はWebビルドも試してみたかったのでチェックしてFinish

Flutterアプリを実行してみる

右上のセレクトボックスから実行するデバイスを選択
なお、Webビルドにチェックを付けていなくてもChromeを選択して実行することは可能

右上の再生ボタンを押すか、Shift + F10で実行することができる

まとめ

今回はWindows上でScoopをベースにFlutterの開発環境を構築してみた
普段はMacで開発をしているためパッケージマネージャーの選定から行ったが、環境構築自体は2時間ほどで終わった
今後も備忘録も兼ねてZennに記事を投稿していきたいと思う

Discussion