[Flutter] WSL2 環境で Flutter Web （その1）
Flutter SKD インストール
WSL2 上で使いたいので、 Linux 版をインストール。
デフォで snap 入ってた。
$ snap --version snap 2.48.3+20.04 snapd unavailable series -
が、
探しに行こうとするとエラーが。
$ snap search flutter error: cannot list snaps: cannot communicate with server: Get http://localhost/v2/find?q=flutter&scope=wide: dial unix /run/snapd.socket: connect: no such file or directory
localhost ? 設定がおかしいのかな？と思ったら、ローカルに立ち上がっているはずの snapd と通信できないという意味だった。
うーむ、snap 入れなくてもいいやと判断して、マニュアルインストールに切り替え。
git clone して stable を使うようにしてみる。
※Linux 系の OS は、ほぼ初心者なので /opt にインストールすべきかどうか怪しいです。
$ cd /opt /opt $ git clone https://github.com/flutter/flutter.git -b stable Cloning into 'flutter'... remote: Enumerating objects: 314145, done. remote: Counting objects: 100% (484/484), done. remote: Compressing objects: 100% (314/314), done. remote: Total 314145 (delta 247), reused 352 (delta 158), pack-reused 313661 Receiving objects: 100% (314145/314145), 147.96 MiB | 161.00 KiB/s, done. Resolving deltas: 100% (243402/243402), done. /opt $ ll total 12 drwxr-xr-x 3 root root 4096 May 13 11:06 ./ drwxr-xr-x 19 root root 4096 May 12 10:01 ../ drwxr-xr-x 8 root root 4096 May 13 11:22 flutter/
で PATH を追加。
$ vi ~/.bashrc
この1行を追加して保存。
export PATH=$PATH:/opt/flutter/bin
.bashrc 再読み込みして確認。
/opt $ source ~/.bashrc /opt $ which flutter /opt/flutter/bin/flutter
いちおうバージョン確認を。
$ flutter –version
Flutter 2.0.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 1d9032c7e1 (13 days ago) • 2021-04-29 17:37:58 -0700
Engine • revision 05e680e202
Tools • Dart 2.12.3
※このとき、 Version 確認したかっただけなのに、初回に Downloading Dart SDK … とファイルのダウンロードが始まりました。初回起動時には何かしらのダウンロードが動くようです。
Flutter Config 設定
Flutter Webを使うように設定する
$ flutter config --enable-web
※いろいろな記事で ~/.flutter_settings が作成されて…ってあったんですが、自分の環境だと作成されないんですよねー。~/.flutter っていうファイルはあったものの内容的にちょっと違いそう。
※以下、「詳細を表示する」をクリックすると `flutter run -d chrome` で起動させようとして試していた時の経緯が表示されます。（と言っても結局エラーが出てうまくいかず放置…。）
さて、この時点で下記のコマンドを実行すると、こんな感じになっています。
$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.2.0, on Linux, 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 ) ! is not executable. [!] Android Studio (not installed) [!] Connected device ! No devices available ! Doctor found issues in 4 categories.
いろいろとNGなマークがついてますが、ブラウザから開くだけなら問題ないのでこのまま進みます。
ビルトインWebサーバーを起動
んで Webサーバーを起動しまして…
$ flutter run -d web-server Launching lib/main.dart on Web Server in debug mode... Waiting for connection from debug service on Web Server... 15.1s lib/main.dart is being served at http://localhost:40667 The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow. 🔥 To hot restart changes while running, press "r" or "R".
ブラウザで確認
上記のメッセージに出ている
http://localhost:40667
にアクセスすると、初期状態で登録されているアプリが表示されました。
ソースちょっとだけ変えてみる
lib/main.dart
の文字列を試しに編集してみる。
うーん、日本語の扱い怪しい気がするけど（句読点の縦位置、なぜど真ん中…？）、ま、ともあれ第一歩を踏み出せました、ということにしておきましょ。