Flutter環境構築メモ＠WSL

inomoto

モバイル開発やったこと無いので、素直に公式からGetting Startedする。

inomoto

環境が選べるが、WSLなのでLinuxかな。

...というところで、いやでもデバイス関連とかどうなるんだろう、と思い、WSLでやってる人の作業を見てみる。

前半は何故かWSL環境自体を自前で作り直しているのでスルーとして、後半は普通にJDKを入れてADB周りを入れてvscode環境を整えてADBに繋いでいる。
IDEとADB周りがWSLから動くなら特に心配する必要はなかろう。

inomoto

というところで公式のLinuxのGetting Startedを読むと、

FlutterのSDKを入れる（snapd or マニュアルでtarを展開してゴニョる）
Androidのセットアップをする（Android Studioで入れる）
何やらビルド系の追加パッケージを入れる＆desktop supportを有効にする

という流れになっている。Android Studioを一旦無視して次ページにいくと、

Android Studio / vscode / Emacs が公式にサポート（？）されているようだ。え、ここでEmacs？

emacsは置いといてAndroid Studioと並列にvscodeがあるので、おそらくAndroid Studioはスルーで良いのだろう。
Android StudioだとホストOS環境に依存しそうであんまりやりたくない。

ここで前ステップに戻りAndroid Setupのところを見ると

Note: Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step discusses that.

Android SDK周りをゴニョゴニョやるのダルいので、Android Studioのセットアップに丸投げするよ、ということか。つまりSDKを手動で入れれば良いと。

inomoto

Android SDKをどう入れるかは公式のに乗っかれないので、ここは自分で必要な作業を調べるしかない。というわけで調べていく。

inomoto

web環境だけ有効にすることで、とりあえずAndroid SDK環境セットアップをスキップすることができるようだ。first stepとしてそれはアリ。
調べてめんどくさそうなら一旦そっちに逃げる。

inomoto

sdkmanagerという、SDKインストーラみたいなやつ？をとってきて、それを使って入れてるっぽい。

だが個人的に開発環境はコード管理したいので、できればaptとかがいい。そっち方面も調べてみる。

inomoto

apt search android-sdkとすると、なんかこうざっくりと

android-sdk
android-sdk-build-tools
android-sdk-platform-tools

とあり、android-sdkはmetaパッケージらしく下２つを含むもろもろらしい。

なお↑のコメントにある公式のsdkmanagerのページによると

sdkmanager ツールは Android SDK ツールパッケージ（25.2.3 以降）に組み込まれており、android_sdk/tools/bin/ に配置されます。

とあるが、手元のUbuntu 20.04環境では android-sdk は25.0.0だった。ダメそう。
build-toolsとplatform-toolsは27なので大丈夫かもだが、どっちに入ってるかよくわからんのでめんどくさい。

inomoto

またsnapにsdkmanagerがあるっぽい

が、publisherがあんまよくわからんのでちょっと微妙な気持ち。
※FlutterSDKはsnapで入れることになりそうなので、こっちもあわせてsnapにするのはアリ

inomoto

インストールがゴチャいわけでもなし、素直に公式から落としてくることに。

githubとかじゃないのでコードで更新チェックすることはできないが、そもそもTerms and Conditions読んでから落とせってなってるので、むしろ自動化すると微妙な気もする。

inomoto

Linux用のzipを拾って展開すると、binに入ったシェルスクリプトとlibに入った無数のjarがあった。
これはつまり親ディレクトリごとどこかに置き、binのスクリプトにPATHを通すなりsymlinkするなりしろということか。

inomoto

そして実体がjarということはJREなりJDKなりを先にセットアップしておけと。理解。

inomoto

最初から参照していた下記の記事がどうしてこのような手順になってるのか、完全に理解した。納得したので安心して進める。

inomoto

改めて、Android環境をセットアップする。

sdkmanagerをダウンロードして展開するが、その前提としてJDKを入れる。
今回はjavaの開発をしたいわけではないので、jdkはバージョン管理などせずaptで適当に投げ込む。

$ sudo apt install default-jdk

なんかjdk11が入った。よく考えたらjreで良かった説あるが、入れちゃったのでまぁいいや。

inomoto

とりあえず、先程ダウンロードしたsdkmanagerを実行してみる。環境変数などはエラーを見てからやるスタイル。

$ ./bin/sdkmanager
Error: Could not determine SDK root.
Error: Either specify it explicitly with --sdk_root= or move this package into its expected location: <sdk>/cmdline-tools/latest/

sdk_rootとな。今手元にはSDKは無い、というか入れるためにsdkmanagerを取ってきたのであり、明示的に設定するしかない。

inomoto

なんか関連しそうな記事。と公式。

まぁGOROOTみたいなものだと思うので、適当なところにディレクトリを掘って環境変数をセットしてみる。

$ sudo mkdir /opt/android_sdk_root
$ sudo chown user:user /opt/android_sdk_root

で、さっきのsdkmanagerを

$ env ANDROID_SDK_ROOT=/opt/android_sdk_root ./bin/sdkmanager

...ダメだったので、配置ディレクトリを変える。
sdkmanagerの入ったcmdline-toolsディレクトリを例のrootに移動させ

$ env ANDROID_SDK_ROOT=/opt/android_sdk_root /opt/android_sdk_root/cmdline-tools/bin/sdkmanager

...でもダメ。環境変数読まないのかね。都度オプションで渡すの嫌なのだけど、仕方ないので

$ /opt/android_sdk_root/cmdline-tools/bin/sdkmanager --sdk_root=/opt/android_sdk_root
[=======================================] 100% Computing updates...

なんか動いた。何かが。

inomoto

sdkmanagerで--listするとズラっと出ることは確認できたので、一旦次へ。Flutter環境を作った後、hello worldするときになったら必要なのを入れていこう。

inomoto

flutter sdkを入れる。
公式の通りにsnapで

$ sudo snap install flutter --classic
error: cannot communicate with server: Post http://localhost/v2/snaps/flutter: dial unix /run/snapd.socket: connect: no such file or directory

...そういえばsnap使ったことなかった。で、調べると、WSLでsnapdを動かすのはめんどくさそう。
これは手動で入れますか。

inomoto

$ git clone https://github.com/flutter/flutter.git -b stable
$ cd flutter
$ ./bin/flutter precache

Welcome to Flutter! とともに色々落ちてきた。

inomoto

$ ./bin/flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.0, on Ubuntu 20.04.3 LTS 5.10.60.1-microsoft-standard-WSL2, locale
    C.UTF-8)
[✗] Android toolchain - develop for Android devices
    ✗ 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/linux#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 (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

androidは入れてないので当然そう。とはいえヘルプページが提示されてるので見ながらやる。
chromeは...いやWSLだしなぁ。放置しておいて詰まったら考える。

inomoto

とりあえず例のqiitaの記事に従い、system-imageとbuiltとplatformを入れる。とりあえず最新（何も考えてない）。

$ sdkmanager --sdk_root=/opt/android_sdk_root --install "system-images;android-32;google_apis;x86_64" "platforms;android-32" "build-tools;32.0.0"
$ sdkmanager --licenses

からの

$ ./bin/flutter config --android-sdk /opt/android_sdk_root
Setting "android-sdk" value to "/opt/android_sdk_root".

You may need to restart any open editors for them to read new settings.
$
$ ./bin/flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.0, on Ubuntu 20.04.3 LTS 5.10.60.1-microsoft-standard-WSL2, locale
    C.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

ちょっと進んだ。で

$ ./bin/flutter doctor --android-licenses
Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are
installed to resolve this.

えー。少なくともsdkmanagerはPATH通ったところに居るけど。

inomoto

なんか調べてみると、cmdline-tools/latest/bin というディレクトリ構成が重要っぽい。よくわからんけど。というわけで

$ cd /opt/android_sdk_root
$ mkdir latest
$ mv bin lib latest

とするとdoctor --android-licensesが通った。えー。

inomoto

環境は多分出来上がったので、エディタ含めhello worldを試みる。
久しぶりに公式のドキュメントに戻り、vscodeの拡張を入れてdoctorしてみる。

すんなり通る。

inomoto

次のステップを参考にプロジェクトを作る。適当に指定するとなんかできる（）

で、vscodeでrun debugするとサーバが起動してアプリっぽいものが見えるらしい。
デバイスは繋いでないので、ステータスバーのところは Web Server となっているが、一旦それでいいのでそのまま。

...
ブラウザは起動するし、なんかAndroidっぽいロードが画面上に一瞬出るが、その後真っ白になってしまう。

そこでさっきもちょっと参照したサイトを参考に

$ flutter run -d web-server

として、そこに出るURLにアクセスすると、想定通りっぽいアプリが表示された。
多分IDEからデバッグできないのはつらいと思うので、ここはなんらか解消したいところ。でもとりあえず動かすことはできた。

inomoto

ちなみにvscodeからdebugした際、consoleのメッセージの文言に

Please click the Dart Debug extension button in the spawned browser window

と出ているが、どのボタンのことなのかサッパリ。どれのことなんだろう。

inomoto

って、 in the spawned browser windowか。確かにコマンドから起動した際にちゃんと出る画面には右上になんかリボンあるわ。
ってことはvscodeからちゃんと起動できたら、なんかできるんだろうな。起動できたら。

inomoto

vscodeのdebugで起動するやつは、どうもchromeのdartデバッグ拡張と繋がないと始まらないっぽい。拡張を入れる -> vscodeでrun debug -> 拡張をクリックしたら起動した。