[Flutter] WSL2 環境で Flutter Web (その1)

2021/05/17

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

の文字列を試しに編集してみる。

うーん、日本語の扱い怪しい気がするけど(句読点の縦位置、なぜど真ん中…?)、ま、ともあれ第一歩を踏み出せました、ということにしておきましょ。

Flutter,Web,環境構築

Posted by S