低代码平台开发胎压监测APP

原创

已于 2025-04-25 11:13:37 修改 · 1.8k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#低代码 #flutter #硬件工程

于 2025-04-24 21:44:52 首次发布

项目介绍

该项目是一个利用Flutter框架和蓝牙技术实现轮胎压力实时监测的应用。

主要功能如下：

用于接收蓝牙模块传输的胎压数据，并实时显示胎压值。
APP对接收到的胎压数据进行处理，如单位转换、数据滤波等，然后将处理后的胎压值显示在界面上。

总之，该项目可以帮助用户实时监测轮胎压力，并提供丰富的功能以满足不同需求。该项目可以应用于汽车、自行车、摩托车等轮胎压力监测场景。

平台支持

Android
iOS

AiFlutter市场链接：胎压监测App

蓝牙调试助手APP源码链接：源码下载

平台实现步骤

一、注册登录

打开低代码平台登录网页，使用微信快捷登录或者扫描二维码登录。

二、创建项目

点击【新增项目】>【手动添加】，在平台内部创建项目
在跳出的弹窗中输入项目名称、项目描述，建议结合项目功能描述命名，便于检索
输入完成后点击确定

三、创建页面

（1）点击已经创建好的项目进入到操作界面，默认会存在一个HomePage页面，操作界面相关详情可查看教程操作界面

（2）创建三个页面 AddBleDevice、SetBleName、DeviceNetWork

点击【添加页面】> 【创建页面】
在跳出的弹窗中输入页面名称、页面描述
最后点击确定即可

（4）删除HomePage页面，在【页面管理】中右击要删除的页面，并点击【删除】

（5）设置AddBleDevice为主页面，在【页面管理】中单击要删除的页面，并在右侧的属性编辑器中设置页面路由为/

四、页面设计

AddBleDevice页面设计

效果图

实现流程

1. 在【页面管理】中单击AddBleDevice页面，在右侧的属性编辑器中配置页面描述和功能详情，内容如下

名称

内容

页面描述

整个页面的布局可以是垂直分区的，上半部分是设备扫描区，下半部分是设备列表区。

功能详情

1. 在页面初始化时，会依次执行以下操作

（1）监听蓝牙扫描状态，接收到状态变化后重新构建页面

（2）蓝牙扫描结果监听，接收到扫描结果后进行存储并重新构建页面

（3）开始蓝牙扫描，扫描时长8秒

2. 连接设备，在设备列表中选择设备进行连接，连接成功后跳转到数据收发页面

3. 重新扫描，蓝牙扫描结束后，点击【重新扫描】开始扫描，此时会断开已连接的蓝牙设备

2. 在【页面管理】中单击AddBleDevice页面，在右侧的属性编辑器中添加页面变量

需要定义的变量如下

变量名称	变量类型	是否为数组	默认值	变量描述
devices	Map	是		设备原始数据列表，用来去重
scaning	Bool	否	false	蓝牙扫描状态 true 正在扫描 false 未扫描
deviceList	Map	是		页面显示的设备列表

操作成功如下

3. 添加页面初始化动作，在右侧的属性编辑器中点击【动作】> 【打开】

在操作流程编辑器中，页面初始化 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

动作类型 --【自定义代码块】，添加customCode1自定义代码块并选择

customCode1内容如下

void function() {
    // 控制雷达扫描的动画  
    waterRippleController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );
    radarViewController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 5),
    );
    // 蓝牙扫描结果处理  
    ble.onScanResults(callbackLast: (event) {
      String name = event.advertisementData.advName;
      // 设备名称过滤  
      String DEVICE_NAME = StorageUtil().read('DEVICE_NAME') ?? '';
      if ((DEVICE_NAME.isNotEmpty &&
              (name == '' || !name.contains(DEVICE_NAME))) ||
          devices.contains(event)) {
        return;
      }
      // 去重操作，防止重复设备添加  
      devices.add(event);
      if (mounted) {
        setState(() {
          // 添加至设备列表  
          deviceList.add({
            "name": event.device.platformName,
            "rssi": event.rssi,
            "mac": "mac",
            "raw": event
          });
        });
      }
    });
    // 扫描状态处理  
    ble.isScaning((event) {
      if (mounted) {
        setState(() {
          scaning = event;
        });
        if (event) {
          waterRippleController?.repeat();
          radarViewController?.repeat();
        } else {
          waterRippleController?.stop();
          radarViewController?.stop();
        }
      }
    });
    // 开始扫描  
    ble.status(timeout: const Duration(seconds: 8));
  }

操作成功如下