开始

受到[Flutter翻译]嵌入式设备是Flutter的未来吗？ - 掘金 (juejin.cn)的启发，决定按照这种方式搞搞家里的钟表，家里的钟表原来是树莓派desktop+浏览器+自己开发网页。显然这里很多冗余，导致夏天热的时候就死机了。

喜讯，启动成功

今天(2022.04.09 02:00)相当开心，flutter-pi在树莓派3B+上跑起来了，啊哈哈哈！记录下踩坑吧，还有一些raspi相关的知识。

踩坑记

关于flutter engine

flutter-pi的作者给我们两个选项。1.自己折腾编译 2.使用编译好的flutter-engine。前几天没注意看就傻乎乎的自己去编译去了，去安装llvm，binutils啥的，我勒个去，llvm make就make了1天应该有吧。后面装binutils还遇到奇葩的问题，哎不说了，都是血泪啊。

划重点，直接使用作者编译好的flutter engine就好了，只需要clone下来之后，在运行./install就可以了，不用管后面的llvm，gn啥的，那是编译的时候用的

关于安装前置依赖

sudo apt install cmake libgl1-mesa-dev libgles2-mesa-dev libegl1-mesa-dev libdrm-dev libgbm-dev ttf-mscorefonts-installer fontconfig libinput-dev libudev-dev libxkbcommon-dev libsystemd-dev

就是上面那句，这里就要牵涉到系统的选择以及源的选择了。我折腾了Legacy版本，bullsesy版本，一开始着急换源，导致安装的过程出问题，去解决问题的时候还把系统搞挂了，前前后后装系统就有10次了吧。就在Legacy和bullseye版本之间来回换，看哪个能装上。直接上结论吧。

划重点，直接使用bullseye系统，不解释。不要换源，bullseye系统会智能选择最快的源，这就是他牛逼的地方，我看到安装的过程中还使用了bfsu.edu.cn的源（北京外国语大学），就是他自己找的，一个字：牛

关于flutter build bundle

一开始我在windows上编译的，没太注意flutter版本，导致在树莓派上启动不了！！！今天(2022.4.8)把Mac电脑从公司带过来了，重新编译了下就能够启动了！(难道和我把flutter从2.5.3升级到2.10.4有关系？)，整体看上去就是编译的kenerl_blob.bin文件有问题导致的。

划重点，还是建议用Mac吧，注意使用最新版本的flutter，注意用stable的

开机启动flutter-pi

这个就比较简单了，编写 /home/pi/autostart.sh 如下

#!/bin/sh
flutter-pi /home/pi/flutter_assets

编辑/etc/rc.local文件，在exit 0之前添加

su pi -c "exec /home/pi/autostart.sh"

即可

其他也就没啥注意事项了，安装flutter-pi作者的步骤一步一步来就能成功的。

参考

medium.com/flutter/flu…

安装raspi lite系统

使用bullseye 进行安装

下载系统镜像Operating system images – Raspberry Pi
使用进行tf卡的烧录。

烧录玩之后插上tf卡，插上电源就可以启动了，等一会之后，使用pi和raspberry进行登录

登录之后使用sudo raspi-config进行设置

wifi的设置
ssh的设置，enable ssh

ssh pi@198.168.1.137进行远程连接

安装flutter-pi

flutter-pi2 (gitee.com)

解决 GitHub 的 raw.githubusercontent.com 无法访问的问题 - 简书 (jianshu.com)

安装git

sudo apt-get install git xclip
ssh-keygen
cat ~/.ssh/id_rsa.pub

安装flutter-engine

flutter-engine-binaries-for-arm (gitee.com)

git clone git@gitee.com:yin_shiyong/flutter-engine-binaries-for-arm.git
cd flutter-engine-binaries-for-arm/
sudo ./install.sh

Flutter动画

教程：Flutter中的动画 - Flutter中文网 (flutterchina.club)

安装macos

support.apple.com/en-us/HT211…

制作天气背景

抓取天气背景色

目标：bing.com国际版，搜索weahter

if(handler) window.removeEventListener('keydown', handler);
function getRadial() {
    let values = [];
    let _cx, _cy, _colors, _offset;
    function getValues() {
        const radialGradient = document.querySelector('radialGradient');
        const cx = (radialGradient.getAttribute('cx').replace('%', '') - 50) * 2 / 100;
        const cy = (radialGradient.getAttribute('cy').replace('%', '') - 50) * 2 / 100;

        const stops = [...document.querySelectorAll('stop')];
        const colors = stops.map(stop => stop.getAttribute('stop-color'));
        const offsets = stops.map(stop => stop.getAttribute('offset'));
        // 相同，不存储

        const input = document.querySelector('.wtr_range.wtr_foreGround');
        const valueText = input.getAttribute('aria-valuetext');
        const time = valueText.split(',')[0];
        let [clock, flag] = time.split(' ');
        let _time;
        if (flag === 'AM') {
            _time = clock;
        } else {
            const [hour, minute] = clock.split(':');
            _time = Number(hour) + 12 + ':' + minute;
        }

        if (cx === _cx && cy === _cy && colors.toString() === _colors.toString() && offsets.toString() === _offset.toString()) {
        } else {
            values.push({ cx, cy, colors, offsets, time: _time });
            localStorage.setItem('radial', JSON.stringify(values));
        }
        _cx = cx;
        _cy = cy;
        _colors = colors;
        _offset = offsets;
    }

    return getValues;
}

const getValues = getRadial();
function handler(e) {
    if (e.code === 'ArrowRight') {
        getValues();
    }
}
window.addEventListener('keydown', handler);

Flutter on Raspberry

开始