「Flutter Web を試す」
https://qiita.com/nanbuwks/items/074b168ee1666254750c

でUbuntuで動作確認できたので、Raspberry Pi でも試してみました。

環境

RaspberryPi 4 8GB
Raspberry Pi OS (32-bit) Lite 2020-08-20
ssh で操作 (ログイン済)

チェック作業は 2020/10/22-23で行った。

「RaspberryPi4 で flutter と dart を動かす動画の追試」
https://qiita.com/nanbuwks/items/67d2a2fc7c4884ba5848

でインストールした flutter をそのまま使いました。

Flutter Web のインストール


$ flutter channel beta

まずベータチャンネルに切り替えます。


Switching to flutter channel 'beta'...
git: From https://github.com/flutter/flutter
git:    37ebe3d82a..12bea61c29  dev                  -> origin/dev
git:    fa988ba83a..97eb6ca168  dwds-integration     -> origin/dwds-integration
git:  * [new branch]            flutter-1.24-candidate.2 -> origin/flutter-1.24-candidate.2
git:    3393566b56..fe189baf34  master               -> origin/master
git:  * [new branch]            revert-67147-startup -> origin/revert-67147-startup
git:  * [new tag]               1.24.0-1.0.pre       -> 1.24.0-1.0.pre
git: Switched to a new branch 'beta'
git: Branch 'beta' set up to track remote branch 'beta' from 'origin'.
Successfully switched to flutter channel 'beta'.
To ensure that you're on the latest build from this channel, run 'flutter
upgrade'

これはうまくいったかな？

次に


$ flutter upgrade

とするとエラーが出まくります。



Downloading Dart SDK from Flutter engine 1d12d82d9cb54876f58044aa52198d53ec841c3d...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  169M  100  169M    0     0  6165k      0  0:00:28  0:00:28 --:--:-- 7917k
Building flutter tool...
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: cannot execute binary file: Exec format error
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: Success
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (9 tries left)
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: cannot execute binary file: Exec format error
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: Success
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (8 tries left)
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: cannot execute binary file: Exec format error
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: Success
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (7 tries left)
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: cannot execute binary file: Exec format error
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: Success
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (6 tries left)
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: cannot execute binary file: Exec format error
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: Success
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (5 tries left)
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: cannot execute binary file: Exec format error
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: Success
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (4 tries left)
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: cannot execute binary file: Exec format error
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: Success
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (3 tries left)
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: cannot execute binary file: Exec format error
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: Success
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (2 tries left)
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: cannot execute binary file: Exec format error
/home/pi/sdk/flutter/bin/cache/dart-sdk/bin/pub: line 49: /home/pi/sdk/flutter/bin/cache/dart-sdk/bin/dart: Success
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (1 tries left)
Command 'pub upgrade' still failed after 10 tries, giving up.

upgrade 以外の操作をしてもエラーが発生、dart 自体が動かなくなっているみたい。
でもこのエラーってどこかで見たような・・・。

「Flutter Web を試す」
https://qiita.com/nanbuwks/items/074b168ee1666254750c
で flutter/bin/cache/dart-sdk/ を入れ替える前のエラーと同じですね。同様に操作を行う。

~/sdk 内に dartsdk-linux-arm-release.zip が残ったので

$ unzip dartsdk-linux-arm-release.zip
$ rm -rf flutter/bin/cache/dart-sdk/
$ mv dart-sdk/ flutter/bin/cache/

とした (しかし後でエラー発生、この操作に原因があったことがわかる)。


$ flutter upgrade
Flutter is already up to date on channel beta
Flutter 1.23.0-18.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 198df796aa (7 days ago) • 2020-10-15 12:04:33 -0700
Engine • revision 1d12d82d9c
Tools • Dart 2.10.2

クリアしたみたいですね。


$ flutter config --enable-web
Setting "enable-web" value to "true".

You may need to restart any open editors for them to read new settings.

ここで、元ネタの
「Flutter for Webの環境構築手順」
https://qiita.com/kurun_pan/items/6349f6f38c837ee250b3

2.2.1 補足
flutter configコマンドで ~/.flutter_settingsファイルの内容が書き換わります。

とありますが、Ubuntu で検証した時は該当ファイルがありませんでした。今回もこのファイルは見当たりませんでした。

動作確認


$ flutter devices
1 connected device:

Web Server (web) • web-server • web-javascript • Flutter Tools

CUI 環境なので、Chrome デバイスは認識されていません。

サンプルプログラム flutter_gallery を試してみます。


$ cp -rf ~/sdk/flutter/examples/flutter_gallery .
$ cd flutter_gallery/
$ flutter run -d web-server

とすると


Downloading Web SDK...                                              6.0s
Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.

となりました。このエラーはプロジェクトディレクトリではないところで実行するとよく起こるエラーだそうですが、今回はプロジェクトディレクトリ内で実行したのでそれが原因ではありません。
本当に pubspec.yaml がサンプルプログラム内に無いためのエラーぽいです。

pubspec.yaml があるサンプルプログラムとして、hello_world がありましたのでそれを試してみます。


$ cp -rf ~/sdk/flutter/examples/hello_world .
$ cd hello_world/
$ flutter run -d web-server

とすると


Launching lib/main.dart on Web Server in debug mode...
Syncing files to device Web Server...                                  ⣽
Oops; flutter has exited unexpectedly: "FileSystemException: Cannot open file,
path =
'/home/pi/sdk/flutter/bin/cache/dart-sdk/lib/dev_compiler/kernel/amd/require.js'
(OS Error: No such file or directory, errno = 2)".
A crash report has been written to /home/pi/hello_world/flutter_01.log.  
This crash may already be reported. Check GitHub for similar crashes.   
https://github.com/flutter/flutter/issues?q=is%3Aissue+FileSystemException%3A+Cannot+open+file%2C+path+%3D+%27%2Fhome%2Fpi%2Fsdk%2Fflutter%2Fbin%2Fcache%2Fdart-sdk%2Flib%2Fdev_compiler%2Fkernel%2Famd%2Frequire.js%27+%28OS+Error%3A+No+such+file+or+directory%2C+errno+%3D+2%29

To report your crash to the Flutter team, first read the guide to filing a bug.
https://flutter.dev/docs/resources/bug-reports                          

Create a new GitHub issue by pasting this link into your browser and completing
the issue template. Thank you!
Syncing files to device Web Server...                                   
https://git.io/JTzAk                                            

Syncing files to device Web Server...                                           (This is taking an unexpectedly long time.)       ⣾

flutter/bin/cache/dart-sdk/lib/dev_compiler/kernel/amd/require.js

というのが無いそうです。

Javascript は知識がないので、 amd という文字列から AMD64 のアーキテクチャかなと思ったのですが

Asynchronous Module Definition (AMD) API for JavaScript modules

ということらしいです。

改めて Dart SDK を見てみます。

Dart SDK は先にRelease をダウンロードしていたのを使ったのですが、まずは Beta channel のを使わないとダメかな？

Dart の公式ページを見てみると現在の Beta は 2.11.0-213.1.beta となっていて、

OS:

Linux
Version OS Architecture Downloads
2.11.0-213.1.beta (ref 7cdfa7b) Linux ia32 Dart SDK (SHA-256)
2.11.0-213.1.beta (ref 7cdfa7b) Linux x64 Dart SDK (SHA-256)
Debian package
2.11.0-213.1.beta (ref 7cdfa7b) Linux ARMv7 Dart SDK (SHA-256)
2.11.0-213.1.beta (ref 7cdfa7b) Linux ARMv8 (ARM64) Dart SDK (SHA-256)
2.11.0-213.1.beta (ref 7cdfa7b) --- --- API docs

となっていました。これの x64 版を dartsdk-linux-arm-release.zip として、 ARMv7 を dartsdk-linux-x64-release.zip として
それぞれダウンロードしてみました。


-rw-rw-r-- 1 nanbuwks nanbuwks  47M 10月 22 23:33 dartsdk-linux-arm-release.zip
-rw-rw-r-- 1 nanbuwks nanbuwks 155M 10月 22 23:33 dartsdk-linux-x64-release.zip

全然違いますね。調べてみると x64 版にはlib/dev_compiler/kernel/amd/require.js が含まれてますが ARMv7 版には lib/dev_compiler 自体が含まれてませんでした。

まずは x64 版を dart-sdk-linux-x64 ディレクトリに解凍し、


$ cp -a dart-sdk-linux-x64/lib/dev_compiler sdk/flutter/bin/cache/dart-sdk/lib

としてみました。


$ cd ../../hello_world/
$ flutter run -d web-server
Launching lib/main.dart on Web Server in debug mode...
Wrong full snapshot version, expected '8ee4ef7a67df9845fba331734198a953' found
'953aa80d78c4d8886e3e4d784fd9d95f'
the Dart compiler exited unexpectedly.                                  
Syncing files to device Web Server...                              552ms
Failed to compile application.

にゃるほろ。snapshot version とは? 多分、dart-sdk が beta を使わないといけないのを master のままになっているために整合性が取れていないのでしょう。


$ cd ../sdk/flutter/bin
$ ls
cache  dart  dart.bat  flutter  flutter.bat  internal
$ mv cache cachebak
$ cd ../../..

としたうえで先程ダウンロードした beta の dart-sdk をコピーしてきます。


$ cp -a dart-sdk-linux-arm/* sdk/flutter/bin/cache/dart-sdk

として


$ cd hello_world
$ flutter clean
$ flutter run -d web-server

今度はどうかな・・


Downloading Web SDK...                                             10.2s
Running "flutter pub get" in hello_world...                         3.3s
Launching lib/main.dart on Web Server in debug mode...
Snapshot not compatible with the current VM configuration: the snapshot requires 'release
no-dwarf_stack_traces_mode causal_async_stacks no-lazy_async_stacks lazy_dispatchers
use_bare_instructions no-dedup_instructions no-"asserts" "use_field_guards" "use_osr" no-code-comments
x64-sysv no-null-safety' but the VM has 'release no-dwarf_stack_traces_mode causal_async_stacks
no-lazy_async_stacks lazy_dispatchers use_bare_instructions no-dedup_instructions no-"asserts"
"use_field_guards" "use_osr" no-code-comments arm-eabi hardfp no-null-safety'
the Dart compiler exited unexpectedly.                                  
Syncing files to device Web Server...                              663ms
Failed to compile application.

すなわちSnapshot が x64-sysv なのに VM は arm-eabi
となって不整合で実行できない感じです。リリースではどうでしょう？


$ flutter build web
Target dart2js failed: Exception: Snapshot not compatible with the current VM configuration: the
snapshot requires 'release no-dwarf_stack_traces_mode causal_async_stacks no-lazy_async_stacks
lazy_dispatchers use_bare_instructions no-dedup_instructions no-"asserts" "use_field_guards" "use_osr"
no-code-comments x64-sysv no-null-safety' but the VM has 'release no-dwarf_stack_traces_mode
causal_async_stacks no-lazy_async_stacks lazy_dispatchers use_bare_instructions no-dedup_instructions
no-"asserts" "use_field_guards" "use_osr" no-code-comments arm-eabi hardfp no-null-safety'


Compiling lib/main.dart for the Web...                              1.0s
Exception: Failed to compile application for the Web.

こちらも同様です。

今回の検証はここまで。また時間があるときに調べてみます。