标签: Flutter

B y Toradex 胡珊逢 简介 在嵌入式Linux设备上常使用Qt作为开发图形界面应用的框架，随着web和移动端图形框架技术快速发展，嵌入式Linux也可以从这些技术中受益。由Google开发的Flutter最初用于Android和iOS应用开发，后期加入web、Windwos桌面和Linux桌面的支持。配合适当的渲染引擎，Flutter也可以运行在嵌入式Linux设备上。文章将介绍如何在使用Linux BSP的Verdin iMX8M Plus上运行Flutter应用。 硬件介绍 本次演示使用基于NXP iMX8M Plus SoC 的计算机模块 Verdin iMX8M Plus 。底板为 Dahlia ，该底板可以直接使用Verdin iMX8M Plus 的 HDMI 显示输出。屏幕则使用支持电容屏的 HDMI 显示器，用于测试 Flutter 应用的交互性。 Flutter介绍 Flutter使用Dart语言开发，可以跨平台运行，支持AOT（Ahead of time）预编译，使应用在设备上更高效地运行。对于Flutter应用，用户通常只需要开发apps代码，Framework、Engine和Embedder都油Flutter SDK提供。使用不同的embedder，Flutter app可以运行在不同的平台上。目前官方支持embedder包括Android，iOS，MacOS、Windwos桌面、Linux桌面、Web浏览器 Linux桌面需要依赖GTK和X11，现在的嵌入式Linux系统已经普遍使用Wayland，例如NXP的iMX处理器在新的BSP已经不再支持X11。对于嵌入式Linux系统，可以使用下面两个非官方的embedder。 Flutter-elinux ，这是由Sony 维护的项目，支持 Arm64 和 X64 处理器。可以使用 Wayland 或者 X11 后台，或者直接基于 DRM。 Flutter-pi 是针对树莓派开发和优化的embbeder，其不依赖于 X11 和 GTK 的任何组件。支持 KMS 和 DRI，3D 硬件加速。可以运行在 ARMv7、ARMv8、x86 处理器上。Flutter-pi 拥有更活跃的社区和开发者。结合 flutterpi_tool 工具可以非常容易地开发flutter 应用。 Verdin iMX8M Plus 的 Linux BSP 支持 KMS，其 CPU 也是 Armv8 架构。因此，我们本次选用 Flutter-pi 作为 embedder。关于 Flutter-elinux 在 Toradex 模块上的应用，可以参考 该文章 。 添加meta-flutter meta-flutter 提供了编译flutter-pi 以及 flutter demo 的文件。meta-flutter 依赖 meta-clang layer。Toradex Linux BSP v6 基于 Yocto Project 的 kirkstone 分支。首先，参考 这里 创建Yocto Project 编译环境。然后进入 layers 文件夹，下载 meta-flutter 和 meta-clang。 $ git clone --branch kirkstone https://github.com/meta-flutter/meta-flutter.git $ git clone --branch kirkstone https://github.com/kraj/meta-clang.git 然后在build/conf/bblayers.conf 文件的 BBLAYERS 中添加 meta-flutter 和 meta-clang 的路径。 BBLAYERS ?= " \ ${BBLAYERS_NXP} \ ... ${TOPDIR}/../layers/meta-clang \ ${TOPDIR}/../layerss/meta-flutter \ " 在build/conf/local.conf 文件的结尾添加以下内容。 DEFAULT_TIMEZONE = "Asia/Shanghai" ENABLE_BINARY_LOCALE_GENERATION = "1" IMAGE_LINGUAS:append = " en-us en-gb es-us zh-cn" GLIBC_GENERATE_LOCALES:append = " en_US.UTF-8 es_US.UTF-8 en_GB.UTF-8 zh_CN.UTF-8" IMAGE_INSTALL:append = " tzdata-core tzdata-asia" DISTRO_FEATURES:append = " opengl wayland pam" PACKAGECONFIG:append:pn-weston = " remoting" PACKAGECONFIG:append:pn-flutter-engine = " profile debug" IMAGE_INSTALL:append = " flutter-auto packagegroup-flutter-test-apps \ flutter-pi flutter-gallery" IMAGE_INSTALL:remove = " packagegroup-tdx-qt5" 删除meta-flutter/recipes-platform/packagegroups/ packagegroup-flutter-test-apps.bb 中的 flutter-test-texture-egl。最后编译 tdx-reference-multimedia-image 镜像文件。 $ bitbake tdx-reference-multimedia-image 测试Flutter 应用 禁用自启动的weston 服务。 root@verdin-imx8mp:~# systemctl stop weston.service root@verdin-imx8mp:~# systemctl disable weston.service 镜像中的/usr/share/flutter/gallery/3.16.5/release 中已经包含一个 flutter gallery 应用，现在可以使用 flutter-pi 直接运行。 root@verdin-imx8mp:# cd /usr/share/flutter/gallery/3.16.5/release root@verdin-imx8mp:# flutter-pi --release ./ 在HDMI 显示器上可以看到 gallery 应用的界面。 安装Flutter SDK 和 flutterpi_tool 在Linux 电脑(例如 Ubuntu 23.04)上，首先安装 Flutter SDK。由于 Flutter 和 flutter-pi 两个项目更新都比较活跃，在安装前需求确认 Flutter 版本。在 这里 查看flutter-pi 目前使用的 Flutter 版本。例如撰写文章时其为 3.16.7。在 Flutter SDK 手动安装页面 选择对应的版本进行安装，如flutter_linux_3.16.7-stable.tar.xz。 $ sudo apt-get install clang cmake git ninja-build \ pkg-config libgtk-3-dev liblzma-dev libstdc++-12-dev $ cd FLUTTER_SDK_INSTALL_PATH $ tar vxf flutter_linux_3.16.7-stable.tar.xz $ export PATH="$PATH:`pwd`/flutter/bin" $ flutter doctor -v 上面的flutter 环境诊断工具如果提示缺少 chrome 浏览器，可以安装后再运行。 $ sudo dpkg -i google-chrome-stable_current_amd64.deb $ flutter doctor -v 检查flutter 和 dart 命令是否都来自同一个的 SDK 安装目录。 $ which flutter dart /home/ben/flutter-sdk/flutter/bin/flutter /home/ben/flutter-sdk/flutter/bin/dart 安装完Flutter SDK 后使用下面命令安装 flutterpi_tool $ flutter pub global activate flutterpi_tool $ export PATH="$PATH":"$HOME/.pub-cache/bin" 使用下面命令测试 $ flutterpi_tool --help 如果已经安装好Flutter SDK 和 flutterpi_tool，需要编译其他 flutter 应用时，只需要进入之前 Flutter SDK 的安装目录后执行下面命令，重新配置编译环境即可。 $ cd FLUTTER_SDK_INSTALL_PATH $ export PATH="$PATH:`pwd`/flutter/bin" $ export PATH="$PATH":"$HOME/.pub-cache/bin" 使用flutterpi_tool 编译应用 借助flutterpi_tool 可以非常简单的编译 flutter 应用，例如针对 64 位 Arm CPU 的编译命令 flutterpi_tool build --arch=arm64 --cpu=pi4 --release ，参数说明如下： 参数 说明 Runtime mode --debug Build for debug mode. --profile Build for profile mode. --release Build for release mode. --debug-unoptimized Build for debug mode and use unoptimized engine. (For stepping throughengine code) Target,--arch= arm Build for 32-bit ARM. (armv7-linux-gnueabihf) arm64 Build for 64-bit ARM. (aarch64-linux-gnu) x64 Build for x86-64. (x86_64-linux-gnu) Target,--cpu= generic (default) Don’t use a tuned engine. The generic engine will work on all CPUs of the specified architecture. pi3 Use a Raspberry Pi 3 tuned engine. Compatible with arm and arm64. (-mcpu=cortex-a53+nocrypto -mtune=cortex-a53) pi4 Use a Raspberry Pi 4 tuned engine. Compatible with arm and arm64. (-mcpu=cortex-a72+nocrypto -mtune=cortex-a72) 下面是在Linux电脑上编译flutter gallery应用。由于Verdin iMX8M Plus是基于arm64的Cortex-A53 CPU，因此选择--arch=arm64和--cpu=pi3两个参数。 $ git clone https://github.com/flutter/gallery.git flutter_gallery $ cd flutter_gallery/ $ git checkout 6a8d738c94d0710e229d726729c09fdb5ccaf7ed $ flutter pub get $ flutterpi_tool build --arch=arm64 --cpu=pi3 --release 编译结束后，在build/flutter_assets 目录下可以看到如下文件。 build/flutter_assets/ ├── app.so ├── AssetManifest.bin ├── AssetManifest.json ├── FontManifest.json ├── fonts ├── icudtl.dat ├── libflutter_engine.so ├── NOTICES.Z ├── packages └── shaders flutteri_tool 目前使用新的编译方法生成的文件结构尚不能直接使用 flutter_pi 在设备上直接运行，需要重新调整文件位置，参考 Verdin iMX8M Plus 上的 /usr/share/flutter/gallery/3.16.5/release 的内容。 release/ ├── data │ ├── flutter_assets │ └── icudtl.dat └── lib ├── libapp.so └── libflutter_engine.so 在flutter_gallery/build/flutter_assets/ 目录创建 data 和 lib 两个文件夹，app.so 重命名为 libapp.so 后和 libflutter_engine.so 一起移动到 lib 目录。icudtl.dat 移动到 data 目录下。在 data 目录下创建 flutter_assets 文件夹后，将 build/flutter_assets/ 中剩余的 AssetManifest.bin，AssetManifest.json，FontManifest.json，fonts，NOTICES.Z，packages 和 shaders 均移动到 data/flutter_assets 中。完场后将 data 和 lib 两个目录复制到 Verdin iMX8M Plus 上的 /home/root/flutter_gallery 目录中，例如使用 scp 命令。 $ scp -r build/flutter_assets/ root@imx8mp_ip:/home/root/flutter_gallery 复制好文件后可以在Verdin iMX8M Plus 上的 /home/root/flutter_gallery 看到以下内容。 root@verdin-imx8mp-07320826:~/flutter_gallery# ls * data: flutter_assets icudtl.dat lib: libapp.so libflutter_engine.so 运行下面命令即可启动在电脑上编译的flutter 应用。 root@verdin-imx8mp:~# flutter-pi --release /home/root/flutter_gallery/ 总结 使用Flutter 可以开发跨平台应用，并获得流畅的本地运行体验，在移动端和 Web 端都有广泛的应用。但是针对嵌入式 Linux 的 embedder 目前是第三方维护的，所以在实际应用时需要做详尽的测试。 ​

​ B y 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 = ----------------------------------------------- 上面的 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 ----------------------------------------------- 运行下面命令生成一个 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: 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 的支持也处于早期阶段，项目开发需要充分验证。