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

项目介绍

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

主要功能如下：

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

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

平台支持

• Android

• iOS

AiFlutter市场链接：胎压监测App

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

平台实现步骤

一、注册登录

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

二、创建项目

1. 点击【新增项目】>【手动添加】，在平台内部创建项目

2. 在跳出的弹窗中输入项目名称、项目描述，建议结合项目功能描述命名，便于检索

3. 输入完成后点击确定

三、创建页面

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

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

1. 点击【添加页面】> 【创建页面】

2. 在跳出的弹窗中输入 页面名称、页面描述

3. 最后点击确定即可

​

​

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

​

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

​

四、页面设计

AddBleDevice页面设计

效果图

​

实现流程

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

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

需要定义的变量如下

​

操作成功如下

​

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));
  }

操作成功如下

​

4. 开启顶部导航栏，点击页面编辑窗口右上角的【​顶部导航栏】并开启，配置顶部导航栏背景色为 #FF006FFF

​

（1）从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到顶部导航栏中间位置中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（2）从【​小部件面板】> 【常用元素】中选择【按钮小部件】拖入到顶部导航栏右侧位置中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（3）按钮打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

• 动作类型 --【导航】，设置导航到SetBleName页面

（4）从【​小部件面板】> 【基本元素】中选择【图标小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

5. 页面内容设计

（1）从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（2）从【​小部件面板】> 【基本元素】中选择【雷达小部件】拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

操作成功如下

​

（3）再次从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（4）从【​小部件面板】> 【基本元素】中选择 【条件生成器小部件】拖入到容器小部件中，然后在右侧的属性编辑器中选择变量scaning

（5）条件 scaning = false，勾选展示此界面，从【​小部件面板】> 【常用元素】中选择【按钮小部件】拖入到【条件生成器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（6）按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

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

customCode2内容如下

void function() async {
  EasyLoading.dismiss();
  if (mounted) {
    // 断开蓝牙  
    await ble.disconnect();
    setState(() {
      // 清空设备列表
      devices.clear();
    });
    // 重新扫描设备  
    ble.status(timeout: const Duration(seconds: 8));
  }
}

（7）从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

 （8）条件 scaning = true，勾选展示此界面，从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到【条件生成器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

操作成功如下

​

（9）从【​小部件面板】> 【基本元素】中选择【滚动条小部件】拖入到页面编辑窗口内的上下布局中

（10）从【​小部件面板】> 【布局元素】中选择【列表布局小部件】拖入到【滚动条小部件】中

操作成功如下

​

（11）从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到【列表布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（12）从【​小部件面板】> 【常用元素】中选择【左右布局小部件】拖入到【容器小部件】中

（13）从【​小部件面板】> 【常用元素】中选择【上下布局小部件】拖入到【左右布局小部件】中

从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到【容器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

从【​小部件面板】>【常用元素】中选择【文本小部件】拖入到【容器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（14）从【​小部件面板】>【常用元素】中选择【按钮小部件】拖入到【左右布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（15）按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

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

customCode3内容如下

  void function(index) {
    if (scaning) {
      ble.stopScan();
    }
    EasyLoading.show();
    // 连接蓝牙  
    ble.connect(deviceList[index]['raw'].device,
        serviceUUID: StorageUtil().read("serviceUUID") ?? '',
        readCharacteristicUUID:
            StorageUtil().read("readCharacteristicUUID") ?? '',
        writeCharacteristicUUID:
            StorageUtil().read("writeCharacteristicUUID") ?? '',
        notifyCallBcak: () async {
      Map<String, dynamic> json = {
        "name": deviceList[index]['name'],
        "id": deviceList[index]['mac']
      };
​
      await Get.toNamed('/DeviceNetWork', arguments: json);
​
      EasyLoading.dismiss();
    });
  }

（16）从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

操作成功如下

​

SetBleName页面设计

效果图

​

实现流程

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

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

需要定义的变量如下

操作成功如下

​

2. 开启顶部导航栏

（1）点击页面编辑窗口右上角的【​顶部导航栏】并开启，配置顶部导航栏背景色为 #FF006FFF

（2）从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到顶部导航栏中间位置中，然后在右侧的属性编辑器中配置属性，属性信息如下：

3. 页面内容设计

（1）从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（2）从【​小部件面板】> 【常用元素】中选择【上下布局小部件】拖入到【容器小部件】中

（3）从【​小部件面板】> 【常用元素】中选择【上下布局小部件】拖入到【上下布局小部件】中

（4）从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（5）从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（6）从【​小部件面板】> 【表单元素】中选择【文本输入框小部件】拖入到【容器小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

操作成功如下

​

（7）复制上述上下布局小部件及其子小部件的内容，并粘贴，修改内容如下

• 文本内容 服务UUID 、读特征UUID 、写特征UUID

• 绑定变量 serviceUUID 、readCharacteristicUUID 、writeCharacteristicUUID

操作成功如下

​

（8）从【​小部件面板】> 【常用元素】中选择【按钮小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（9）按钮动作面板中打开动作流程编辑器，单击 事件下点击＋号添加事件，再点击＋号添加动作，信息如下

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

customCode1内容如下

void function(){
    StorageUtil().write("DEVICE_NAME", DEVICE_NAME);
​
    StorageUtil().write("serviceUUID", serviceUUID);
    StorageUtil().write("readCharacteristicUUID", readCharacteristicUUID);
    StorageUtil().write("writeCharacteristicUUID", writeCharacteristicUUID);             
           
    EasyLoading.showSuccess("设置成功");
    Get.back();
}

（10）从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

DeviceNetWork页面设计

效果图

实现流程

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

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

需要定义的变量如下

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

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

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

• 动作类型 --【硬件动作】，硬件类型 --【蓝牙】，操作类型 --【接收数据】，协议配置 -- 添加协议并选择，通信协议参考：蓝牙通讯协议模板

协议配置如下

协议解析

变量赋值

customCode1内容如下

void function(){
 
    _connectionSubscription?.cancel();
    _connectionSubscription = ble.connectController.stream.listen((event) {
      if (event is BluetoothConnectionState) {
        if (mounted) {
          setState(() {
            switch (event) {
              case BluetoothConnectionState.connected:
                isConnected = true;
                break;
              case BluetoothConnectionState.disconnected:
                disconnectTimer?.cancel();
                disconnectTimer = Timer(const Duration(milliseconds: 400), () {
                  if (connectStatus == BluetoothConnectionState.disconnected) {
                    //400毫秒后还是未连接才代表断开了连接,回到以前的界面
                    print("400毫秒后还是未连接才代表断开了连接,回到以前的界面");
                    EasyLoading.showError("设备断开了连接");
                     
                    Get.offNamed('/');                    
                  }
                });
​
                break;
​
              default:
            }
          });
        }
      }
    });
  }

操作成功如下

4. 页面内容设计

（1）从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到页面编辑窗口内的上下布局中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（2）从【​小部件面板】> 【常用元素】中选择【上下布局小部件】拖入到【容器小部件】中

（3）从【​小部件面板】> 【常用元素】中选择【左右布局小部件】拖入到【上下布局小部件】中

（4）从【​小部件面板】> 【布局元素】中选择【按钮小部件】拖入到【左右布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（5）从【​小部件面板】> 【常用元素】中选择【图标小部件】拖入到【按钮小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（6） 从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

 （7）从【​小部件面板】> 【常用元素】中选择【图片小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（8）从【​小部件面板】> 【表单元素】中选择【左右布局小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（9）从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到【左右布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（10） 从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到【左右布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（11） 从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（12）从【​小部件面板】> 【常用元素】中选择【左右布局小部件】拖入到【上下布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

（13）从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到【左右布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

​

（14）从【​小部件面板】> 【常用元素】中选择【左右布局小部件】拖入到【容器小部件】中 

 从【​小部件面板】> 【常用元素】中选择【图片小部件】拖入到【左右布局小部件】中 ，然后在右侧的属性编辑器中配置属性，属性信息如下：

 从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到【左右布局小部件】中 ，然后在右侧的属性编辑器中配置属性，属性信息如下：

​

（15）从【​小部件面板】> 【常用元素】中选择【容器小部件】拖入到【左右布局小部件】中，然后在右侧的属性编辑器中配置属性，属性信息如下：

​​

（16）从【​小部件面板】> 【常用元素】中选择【左右布局小部件】拖入到【容器小部件】中 

 从【​小部件面板】> 【常用元素】中选择【图片小部件】拖入到【左右布局小部件】中 ，然后在右侧的属性编辑器中配置属性，属性信息如下：

 从【​小部件面板】> 【常用元素】中选择【文本小部件】拖入到【左右布局小部件】中 ，然后在右侧的属性编辑器中配置属性，属性信息如下：

​