如何在Torizon平臺(tái)使用Flutter來(lái)開發(fā)用戶界面

By Toradex胡珊逢

在嵌入式設(shè)備上開發(fā)圖形用戶界面通常會(huì)選擇?Qt。這是一種經(jīng)驗(yàn)證的方案，我們可以在多個(gè)領(lǐng)域看到用?Qt?開發(fā)的?UI。但隨著移動(dòng)端和?web?端界面更為廣泛地使用，源自于這兩個(gè)領(lǐng)域的技術(shù)也開始向嵌入式設(shè)備滲透。Flutter?就是一個(gè)例子。本文將介紹如何在?Torizon?平臺(tái)上如何使用?Flutter?來(lái)開發(fā)用戶界面。

Google?面向?Android, iOS?推出的跨平臺(tái)移動(dòng)應(yīng)?開發(fā)框架?Flutter?可以構(gòu)建高質(zhì)量的原??戶界?，并可以擴(kuò)展支持?Web?和桌面應(yīng)用。Flutter?尚未官方支持嵌入式系統(tǒng)，但目前?Sony?和?Ubuntu?正在致力于該工作。例如來(lái)自?Sony?的?elinux?可以在嵌入式平臺(tái)上使用?Flutter。我們也將以此為基礎(chǔ)，在?Verdin iMX8M Plus?的?Torizon?上運(yùn)行?Flutter?應(yīng)用。

我們來(lái)看看?Flutter?的構(gòu)架。如下圖所示，其由三個(gè)部分構(gòu)成，User app, Framework?和?Engine。flutter-elinux-linux?屬于為嵌入式提供支持的?embbedder。它可以運(yùn)行在?wayland?顯示后臺(tái)，這也是?Torizon?提供的顯示框架。flutter-elinux-linux?將提供?flutter-client?，libflutter_elinux_wayland.so?和?libflutter_engine.so。這些軟件的功能參考該網(wǎng)頁(yè)描述。

https://github.com/sony/flutter-embedded-linux/wiki/Features-of-Embedded-Linux-embedding-for-Flutter

flutter-elinux?是?Flutter SDK?的一個(gè)非官方插件，用于為嵌入式設(shè)備創(chuàng)建、編譯和調(diào)試?Flutter?應(yīng)用，并使用?flutter-elinux-linux?在設(shè)備上顯示。

為了減少對(duì)編譯電腦的軟件環(huán)境影響，我們將使用?docker?容器進(jìn)行編譯。使用下面命令獲取?ubuntu:20.04?容器并進(jìn)入其中。由于后面需要向容器內(nèi)提供文件，這里將?/home/user/flutter?映射到容器內(nèi)的?/opt/flutter。

-----------------------------------------------

~$ docker pull ubuntu:20.04

~$ docker run -it -v /home/user/flutter:/opt/flutter --name flutter_build ubuntu:20.04 /bin/bash

-----------------------------------------------

如果后續(xù)進(jìn)入該容器重新編譯，可以使用下面命令：

-----------------------------------------------

~$ 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

-----------------------------------------------

默認(rèn)的?ubuntu:20.04?使用?Python3，在容器里使用?virtualenv?創(chuàng)建?Python2?環(huán)境。

-----------------------------------------------

# virtualenv .env -p python2

# source .env/bin/activate

-----------------------------------------------

創(chuàng)建?.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?對(duì)應(yīng)?${path_to_flutter_sdk_install}/flutter/bin/internal/engine.version，兩者需要一致。如果不指定的話，會(huì)下載最新的版本。除非確實(shí)需要編譯最新版本的?Engine，否則并不推薦。

獲取代碼。

-----------------------------------------------

# gclient sync

-----------------------------------------------

編譯?embbedder。這里編譯為?arm64?目標(biāo)?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?文件。

接下來(lái)將編譯?Embedded Linux embedding for Flutter，這里會(huì)生成?flutter-client?和?libflutter_elinux_wayland.so。如果在?X86?電腦上交叉編譯需要使用?Yocoto Project?生成包含?clang?在內(nèi)的?SDK，這會(huì)涉及大量的工作內(nèi)容。在?Torizon?中我們可以直接使用?debian?容器并通過(guò)?apt?命令安裝相應(yīng)的軟件，在?Verdin iMX8M Plus?本地編譯。這通常適用于代碼量不是很多的項(xiàng)目。在?Verdin iMX8M Plus?上運(yùn)行下面命令啟動(dòng)?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

-----------------------------------------------

此時(shí)將剛才編譯的?libflutter_engine.so?復(fù)制到?build?目錄。然后分別執(zhí)行下面兩個(gè)命令。

-----------------------------------------------

# 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?兩個(gè)文件。上面使用的編譯選項(xiàng)含義請(qǐng)參考該網(wǎng)頁(yè)說(shuō)明。

接下來(lái)重新回到?X86?編譯電腦開始?Flutter?應(yīng)用的編譯。用下面命令重新進(jìn)入使之前的?ubuntu:20.04?容器。

-----------------------------------------------

~$ docker exec -it flutter_build bash

-----------------------------------------------

下載?flutter-elinux。這個(gè)是?Flutter SDK。

-----------------------------------------------

# cd /opt/flutter/

# git clone https://github.com/sony/flutter-elinux

# export PATH=$PATH:/opt/flutter/flutter-elinux/bin

-----------------------------------------------

運(yùn)行下面命令查看安裝情況。

-----------------------------------------------

# flutter-elinux doctor

# flutter-elinux devices

-----------------------------------------------

創(chuàng)建一個(gè)示例工程。

-----------------------------------------------

# flutter-elinux create demo1

# cd demo1

-----------------------------------------------

按照這里的說(shuō)明交叉編譯創(chuàng)建的工程。但在這之前需要準(zhǔn)備?Verdin iMX8M Plus?的?arm64?格式文件系統(tǒng)。該文件系統(tǒng)可以是來(lái)自剛才在?Verdin iMX8M Plus?上編譯?Embedded Linux embedding for Flutter?的容器。

在?Verdin iMX8M Plus?運(yùn)行下面命令，查看容器?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

-----------------------------------------------

將容器的文件系統(tǒng)復(fù)制出來(lái)并打包。

-----------------------------------------------

$ sudo docker cp 3dea07245b24:/ arm64-sysroot

$ sudo tar cvf arm64-sysroot.tar arm64-sysroot

-----------------------------------------------

然后將?arm64-sysroot.tar?復(fù)制到?X86?編譯電腦的?flutter_build?容器中，位于?/opt/flutter?目錄。回到?flutter_build?容器，解壓?arm64-sysroot.tar。

-----------------------------------------------

# cd /opt/flutter/

# tar vxf arm64-sysroot.tar

-----------------------------------------------

進(jìn)入剛才創(chuàng)建的?demo1?目錄，運(yùn)行下面命令編譯。

-----------------------------------------------

# cd demo1

# flutter-elinux build elinux --target-arch=arm64 --target-sysroot=/opt/flutter/arm64-sysroot

-----------------------------------------------

待編譯結(jié)束后，查看?build/elinux/arm64/release/bundle，這里是?Flutter app?運(yùn)行所需的所以文件。

-----------------------------------------------

# 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?預(yù)編譯的庫(kù)文件，需要將其替換為之前編譯的庫(kù)文件。

將?flutter-client?和?bundle?文件夾復(fù)制到?Verdin iMX8M Plus?的?/home/torizon/flutter_demo?目錄。然后先啟動(dòng)?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

-----------------------------------------------

再啟動(dòng)另外一個(gè)?torizon/weston-vivante?容器，在里面我們將用命令行的方式啟動(dòng)編譯好的?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

-----------------------------------------------

在啟動(dòng)的容器內(nèi)運(yùn)行下面命令。

-----------------------------------------------

# cd /opt/flutter

# LD_LIBRARY_PATH=/opt/flutter/bundle/lib/ ./flutter-client -b /opt/flutter/bundle

-----------------------------------------------

最后，我們將介紹如何導(dǎo)入一個(gè)現(xiàn)成的?Flutter?項(xiàng)目并打包為一個(gè)容器，用?docker-compose?文件啟動(dòng)。這里以?covid19_mobile_app?為例進(jìn)行說(shuō)明。

在?flutter_build?容器中，下載?covid19_mobile_app?代碼，將之前?demo1?目錄中的?elinux?文件夾復(fù)制到?covid19_mobile_app?后再編譯。同樣，libflutter_elinux_wayland.so?和?libflutter_engine.so?也需要替換為之前編譯的庫(kù)文件。

-----------------------------------------------

# cp -r ../demo1/elinux covid19_mobile_app

# flutter-elinux pub get

# flutter-elinux build elinux --target-arch=arm64 --target-sysroot=/opt/flutter/arm64-sysroot

-----------------------------------------------

編譯結(jié)束后，將?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" ]

-----------------------------------------------

運(yùn)行下面命令生成一個(gè)?flutter app?容器。

-----------------------------------------------

$ docker build -t flutter_demo:1 .

-----------------------------------------------

將?flutter_demo:1?容器和?docker-compose.yml?文件復(fù)制到?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'

-----------------------------------------------

運(yùn)行?docker-compose up -d?即可啟動(dòng)?weston?和?flutter app?容器。

總結(jié)

Flutter?框架為圖形界面開發(fā)提供一個(gè)非常靈活的方案，使得嵌入式開發(fā)也可以從中受益。于此同時(shí)，嵌入式?Linux?對(duì)?Flutter?的支持也處于早期階段，項(xiàng)目開發(fā)需要充分驗(yàn)證。

審核編輯：黃飛