电子发烧友App
By Toradex胡珊逢
在嵌入式设备上开发图形用户界面通常会选择?Qt。这是一种经验证的方案，我们可以在多个领域看到用?Qt?开发的?UI。但随着移动端和?web?端界面更为广泛地使用，源自于这两个领域的技术也开始向嵌入式设备渗透。Flutter?就是一个例子。本文将介绍如何在?Torizon?平台上如何使用?Flutter?来开发用户界面。
Google?面向?Android, iOS?推出的跨平台移动应?开发框架?Flutter?可以构建高质量的原??户界?，并可以扩展支持?Web?和桌面应用。Flutter?尚未官方支持嵌入式系统，但目前?Sony?和?Ubuntu?正在致力于该工作。例如来自?Sony?的?elinux?可以在嵌入式平台上使用?Flutter。我们也将以此为基础，在?Verdin iMX8M Plus?的?Torizon?上运行?Flutter?应用。
我们来看看?Flutter?的构架。如下图所示，其由三个部分构成，User app, Framework?和?Engine。flutter-elinux-linux?属于为嵌入式提供支持的?embbedder。它可以运行在?wayland?显示后台，这也是?Torizon?提供的显示框架。flutter-elinux-linux?将提供?flutter-client?，libflutter_elinux_wayland.so?和?libflutter_engine.so。这些软件的功能参考该网页描述。
https://github.com/sony/flutter-embedded-linux/wiki/Features-of-Embedded-Linux-embedding-for-Flutter
flutter-elinux?是?Flutter SDK?的一个非官方插件，用于为嵌入式设备创建、编译和调试?Flutter?应用，并使用?flutter-elinux-linux?在设备上显示。
为了减少对编译电脑的软件环境影响，我们将使用?docker?容器进行编译。使用下面命令获取?ubuntu:20.04?容器并进入其中。由于后面需要向容器内提供文件，这里将?/home/user/flutter?映射到容器内的?/opt/flutter。
-----------------------------------------------
~$ docker pull ubuntu:20.04
~$ docker run -it -v /home/user/flutter:/opt/flutter --name flutter_build ubuntu:20.04 /bin/bash
-----------------------------------------------
如果后续进入该容器重新编译，可以使用下面命令：
-----------------------------------------------
~$ docker container start flutter_build
~$ docker exec -it flutter_build bash
-----------------------------------------------
在容器中安装所需的软件。
-----------------------------------------------
# apt update
# apt upgrade
# apt install clang cmake build-essential pkg-config libegl1-mesa-dev libxkbcommon-dev libgles2-mesa-dev
# apt install libwayland-dev wayland-protocols git curl wget unzip git
# apt install python2
# apt install virtualenv
-----------------------------------------------
下载编译工具。
-----------------------------------------------
# mkdir -p /opt/flutter
# cd /opt/flutter
# git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
# export PATH=$PATH:$(pwd)/depot_tools
-----------------------------------------------
默认的?ubuntu:20.04?使用?Python3，在容器里使用?virtualenv?创建?Python2?环境。
-----------------------------------------------
# virtualenv .env -p python2
# source .env/bin/activate
-----------------------------------------------
创建?.gclient?文件并指定版本。
-----------------------------------------------
# cat .gclient
solutions = [
{
"managed": False,
"name": "src/flutter",
"url": "https://github.com/flutter/engine.git@bd539267b42051b0da3d16ffa8f48949dce8aa8f",
"custom_deps": {},
"deps_file": "DEPS",
"safesync_url": "",
"custom_vars" : {
"download_android_deps" : False,
"download_windows_deps" : False,
},
},
]
-----------------------------------------------
上面的?bd539267b42051b0da3d16ffa8f48949dce8aa8f?对应?${path_to_flutter_sdk_install}/flutter/bin/internal/engine.version，两者需要一致。如果不指定的话，会下载最新的版本。除非确实需要编译最新版本的?Engine，否则并不推荐。
获取代码。
-----------------------------------------------
# gclient sync
-----------------------------------------------
编译?embbedder。这里编译为?arm64?目标?release?模式的?embedder。
-----------------------------------------------
# cd src
# ./flutter/tools/gn --target-os linux --linux-cpu arm64 --runtime-mode release --embedder-for-target --disable-desktop-embeddings --no-build-embedder-examples
# ninja -C out/linux_release_arm64
-----------------------------------------------
编译成功后在?out/linux_release_arm64?目录中可以看到?libflutter_engine.so?文件。
接下来将编译?Embedded Linux embedding for Flutter，这里会生成?flutter-client?和?libflutter_elinux_wayland.so。如果在?X86?电脑上交叉编译需要使用?Yocoto Project?生成包含?clang?在内的?SDK，这会涉及大量的工作内容。在?Torizon?中我们可以直接使用?debian?容器并通过?apt?命令安装相应的软件，在?Verdin iMX8M Plus?本地编译。这通常适用于代码量不是很多的项目。在?Verdin iMX8M Plus?上运行下面命令启动?debian?容器。
-----------------------------------------------
~$ docker run -it ?-v /home/torizon/workspace:/opt/workspace torizon/debian:$CT_TAG_DEBIAN /bin/bash
-----------------------------------------------
在容器中安装所需的软件。
-----------------------------------------------
# apt update
# apt install clang cmake build-essential pkg-config libegl1-mesa-dev libxkbcommon-dev libgles2-mesa-dev
# apt install unzip git
# apt install curl wget
# apt install libwayland-dev wayland-protocols
# apt install libdrm-dev libgbm-dev libinput-dev libudev-dev libsystemd-dev
# cd /opt/workspace
-----------------------------------------------
下载?flutter-embedded-linux?代码。
-----------------------------------------------
# git clone https://github.com/sony/flutter-embedded-linux.git
# cd flutter-embedded-linux/
# mkdir build
-----------------------------------------------
此时将刚才编译的?libflutter_engine.so?复制到?build?目录。然后分别执行下面两个命令。
-----------------------------------------------
# cmake -DUSER_PROJECT_PATH=examples/flutter-wayland-client -DCMAKE_BUILD_TYPE=Release ..
# cmake -DUSER_PROJECT_PATH=examples/flutter-wayland-client -DCMAKE_BUILD_TYPE=Release?-DBUILD_ELINUX_SO=ON -DBACKEND_TYPE=WAYLAND -DENABLE_ELINUX_EMBEDDER_LOG=OFF -DFLUTTER_RELEASE=ON ..
-----------------------------------------------
编译完成后在?build?目录下可以看到生成的?flutter-client?和?libflutter_elinux_wayland.so?两个文件。上面使用的编译选项含义请参考该网页说明。
接下来重新回到?X86?编译电脑开始?Flutter?应用的编译。用下面命令重新进入使之前的?ubuntu:20.04?容器。
-----------------------------------------------
~$ docker exec -it flutter_build bash
-----------------------------------------------
下载?flutter-elinux。这个是?Flutter SDK。
-----------------------------------------------
# cd /opt/flutter/
# git clone https://github.com/sony/flutter-elinux
# export PATH=$PATH:/opt/flutter/flutter-elinux/bin
-----------------------------------------------
运行下面命令查看安装情况。
-----------------------------------------------
# flutter-elinux doctor
# flutter-elinux devices
-----------------------------------------------
创建一个示例工程。
-----------------------------------------------
# flutter-elinux create demo1
# cd demo1
-----------------------------------------------
按照这里的说明交叉编译创建的工程。但在这之前需要准备?Verdin iMX8M Plus?的?arm64?格式文件系统。该文件系统可以是来自刚才在?Verdin iMX8M Plus?上编译?Embedded Linux embedding for Flutter?的容器。
在?Verdin iMX8M Plus?运行下面命令，查看容器?ID。
-----------------------------------------------
$ docker ps -a
CONTAINER ID ???????IMAGE ??????????????????????COMMAND ????????????CREATED ????????????STATUS ????????????????????PORTS ??????????????NAMES
3dea07245b24 ???????torizon/debian:2-bullseye ??"/bin/bash" ????????2 days ago ?????????Exited (137) 2 hours ago ??????????????????????hardcore_nightingale
-----------------------------------------------
将容器的文件系统复制出来并打包。
-----------------------------------------------
$ sudo docker cp 3dea07245b24:/ arm64-sysroot
$ sudo tar cvf arm64-sysroot.tar arm64-sysroot
-----------------------------------------------
然后将?arm64-sysroot.tar?复制到?X86?编译电脑的?flutter_build?容器中，位于?/opt/flutter?目录。回到?flutter_build?容器，解压?arm64-sysroot.tar。
-----------------------------------------------
# cd /opt/flutter/
# tar vxf arm64-sysroot.tar
-----------------------------------------------
进入刚才创建的?demo1?目录，运行下面命令编译。
-----------------------------------------------
# cd demo1
# flutter-elinux build elinux --target-arch=arm64 --target-sysroot=/opt/flutter/arm64-sysroot
-----------------------------------------------
待编译结束后，查看?build/elinux/arm64/release/bundle，这里是?Flutter app?运行所需的所以文件。
-----------------------------------------------
# tree build/elinux/arm64/release/bundle -L 2
.
|-- data
| ??|-- flutter_assets
| ??`-- icudtl.dat
|-- demo1
`-- lib
|-- libapp.so
|-- libflutter_elinux_wayland.so
`-- libflutter_engine.so
-----------------------------------------------
libflutter_elinux_wayland.so?和?libflutter_engine.so?是?Fltter SDK?预编译的库文件，需要将其替换为之前编译的库文件。
将?flutter-client?和?bundle?文件夹复制到?Verdin iMX8M Plus?的?/home/torizon/flutter_demo?目录。然后先启动?weston?容器。
-----------------------------------------------
$ docker run -e ACCEPT_FSL_EULA=1 -d --rm --name=weston --net=host --cap-add CAP_SYS_TTY_CONFIG \
-v /dev:/dev -v /tmp:/tmp -v /run/udev/:/run/udev/ \
--device-cgroup-rule='c 4:* rmw' --device-cgroup-rule='c 13:* rmw' \
--device-cgroup-rule='c 199:* rmw' --device-cgroup-rule='c 226:* rmw' \
torizon/weston-vivante:$CT_TAG_WESTON_VIVANTE --developer weston-launch \
--tty=/dev/tty7 --user=torizon
-----------------------------------------------
再启动另外一个?torizon/weston-vivante?容器，在里面我们将用命令行的方式启动编译好的?demo1。
-----------------------------------------------
$ docker run -e ACCEPT_FSL_EULA=1 -it --rm --name=wayland-app --user=torizon \
-v /dev/dri:/dev/dri -v /dev/galcore:/dev/galcore -v /tmp:/tmp -v /home/torizon/flutter_demo:/opt/flutter \
--device-cgroup-rule='c 199:* rmw' --device-cgroup-rule='c 226:* rmw' \
torizon/weston-vivante:$CT_TAG_WESTON_VIVANTE bash
-----------------------------------------------
在启动的容器内运行下面命令。
-----------------------------------------------
# cd /opt/flutter
# LD_LIBRARY_PATH=/opt/flutter/bundle/lib/ ./flutter-client -b /opt/flutter/bundle
-----------------------------------------------
最后，我们将介绍如何导入一个现成的?Flutter?项目并打包为一个容器，用?docker-compose?文件启动。这里以?covid19_mobile_app?为例进行说明。
在?flutter_build?容器中，下载?covid19_mobile_app?代码，将之前?demo1?目录中的?elinux?文件夹复制到?covid19_mobile_app?后再编译。同样，libflutter_elinux_wayland.so?和?libflutter_engine.so?也需要替换为之前编译的库文件。
-----------------------------------------------
# cp -r ../demo1/elinux covid19_mobile_app
# flutter-elinux pub get
# flutter-elinux build elinux --target-arch=arm64 --target-sysroot=/opt/flutter/arm64-sysroot
-----------------------------------------------
编译结束后，将?covid19_mobile_app?的?bundle?目录连同?flutter-client，以及下面的?startup.sh，Dockerfile?放到任一目录中。
startup.sh
-----------------------------------------------
#!/bin/bash
LD_LIBRARY_PATH=/home/torizon/bundle/lib/ /usr/sbin/flutter-client -b /home/torizon/bundle
-----------------------------------------------
Dockerfile
-----------------------------------------------
FROM --platform=linux/arm64 torizon/weston-vivante:2
ADD bundle /home/torizon/bundle
COPY flutter-client /usr/sbin
COPY startup.sh /home/torizon
CMD [ "/home/torizon/startup.sh" ]
-----------------------------------------------
运行下面命令生成一个?flutter app?容器。
-----------------------------------------------
$ docker build -t flutter_demo:1 .
-----------------------------------------------
将?flutter_demo:1?容器和?docker-compose.yml?文件复制到?Verdin iMX8M Plus?上。
docker-compose.yml
-----------------------------------------------
services:
flutter_demo_covid19:
depends_on:
- weston
devices: []
image: flutter_demo:1
ports: []
device_cgroup_rules:
- c 199:* rmw
- c 226:* rmw
volumes:
- /tmp:/tmp:rw
- /dev/dri:/dev/dri:rw
- /dev/galcore:/dev/galcore:rw
weston:
cap_add:
- CAP_SYS_TTY_CONFIG
device_cgroup_rules:
- c 4:0 rmw
- c 4:7 rmw
- c 13:* rmw
- c 199:* rmw
- c 226:* rmw
environment:
- ACCEPT_FSL_EULA=1
image: torizon/weston-vivante:2
network_mode: host
volumes:
- source: /tmp
target: /tmp
type: bind
- source: /dev
target: /dev
type: bind
- source: /run/udev
target: /run/udev
type: bind
version: '2.4'
-----------------------------------------------
运行?docker-compose up -d?即可启动?weston?和?flutter app?容器。
总结
Flutter?框架为图形界面开发提供一个非常灵活的方案，使得嵌入式开发也可以从中受益。于此同时，嵌入式?Linux?对?Flutter?的支持也处于早期阶段，项目开发需要充分验证。
审核编辑：黄飞
工商网监
评论