ScoopでWindows上にFlutter環境を構築する
概要
ふと思いついたアプリをクロスプラットフォームに作ってみたくて色々調べた結果、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アプリを使う）
$ Set-ExecutionPolicy RemoteSigned -scope CurrentUser
$ Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')
ちなみにScoop自体のアンインストールは以下のコマンドで可能
詳細はこちらのページに記載されている
$ scoop uninstall scoop
Gitをインストール
$ scoop install git
Scoopバケットを追加
$ scoop bucket add extras
$ scoop bucket add java
Flutter開発のためのパッケージをインストール
$ scoop install dart
$ scoop install flutter
$ scoop install android-sdk
$ scoop install android-studio
参考にしたサイトの多くはこれに加えて
$ scoop install adb
$ scoop install adopt8-hotspot
の実行も促していたが、adbはandroid-sdkで依存関係としてインストールされ、adopt8-hotspotは2021年10月22日 1:06 JSTにこちらのPRで削除されたため、代わりにtemurin8-jdkがflutterによってインストールされるようになっている。temurin8-jdkについてはこちらのコメントがわかりやすい
ここでインストールしているパッケージを確認してみる
$ 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（ツール類のインストール状況を表示するコマンド）の結果が出力されている
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にチェックが付いたことを確認できる
$ 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の警告を解消するため、まずはライセンスに同意する
$ flutter doctor --android-licenses
終わったらflutter doctorを実行してみる
$ 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すると
$ 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してみると
$ 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を指定するフォームがあるので、ここには以下の実行結果を入力する
$ scoop prefix flutter
C:\Users\ユーザー名\scoop\apps\flutter\current
今回はWebビルドも試してみたかったのでチェックしてFinish
Flutterアプリを実行してみる
右上のセレクトボックスから実行するデバイスを選択
なお、Webビルドにチェックを付けていなくてもChromeを選択して実行することは可能
右上の再生ボタンを押すか、Shift + F10で実行することができる
まとめ
今回はWindows上でScoopをベースにFlutterの開発環境を構築してみた
普段はMacで開発をしているためパッケージマネージャーの選定から行ったが、環境構築自体は2時間ほどで終わった
今後も備忘録も兼ねてZennに記事を投稿していきたいと思う
Discussion