Flutter设置界面UI插件lb_setup_ui的使用

Logbot 设置界面UI插件lb_setup_ui for Flutter

Logbot 设置界面UI插件用于通过蓝牙和WiFi实现Logbot物联网设备的首次设置。此包包含实现整个设置过程所需的全部小部件。还提供了一个示例应用程序来测试设置过程。 为了定制图形以适应您的应用，开发者应该在他们的应用中实现该过程，扩展所有的小部件类并覆盖所需的部分（如build方法以自定义图形，以及如有必要可以覆盖其他方法以自定义错误消息、日志、翻译等）。

要求

• Dart 2.17 或更新版本

安装与使用

添加依赖项：

dependencies:
  lb_setup_ui:

示例代码：

import 'package:lb_setup_ui/lb_setup_ui.dart';

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("蓝牙设置过程"),
      ),
      // 这里启动默认的设置界面
      body: const LbSetupBluetoothPage(),
    );
  }
}

要通过自定义小部件和图形修改UI，必须扩展所有类，并至少覆盖build方法：

/// 扩展 LbSetupLanConnectionConfig
class MyCustomLanConfig extends LbSetupLanConnectionConfig {
  const MyCustomLanConfig({
    Key? key,
    required onSuccess,
    required onCancel,
  }) : super(
    key: key,
    onSuccess: onSuccess,
    onCancel: onCancel,
  );

  @override
  State<MyCustomLanConfig> createState() => _MyCustomLanConfigState();
}

/// 扩展 LbSetupLanConnectionConfigState<MyCustomLanConfig>
class _MyCustomLanConfigState extends LbSetupLanConnectionConfigState<MyCustomLanConfig> {

  /// (可选) 还可以覆盖方法来自定义日志、错误消息或添加功能
  @override
  Future<bool> init() async {
    if (!isInitialized) {
      MyCustomLogger().log(widget: "LbSetupLanConnectionConfigState", method: "init", message: "初始化调用");
      isInitialized = true;
      try {
        return initApiCall();
      } catch(e, s) {
        MyCustomLogger().error(widget: "LbSetupLanConnectionConfigState", method: "init", message: e.toString(), stack: s);
        return false;
      }
    }
    return true;
  }

  /// 自定义LAN配置页面的UI
  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: FutureBuilder(
        future: init(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.connectionState == ConnectionState.done && 
              snapshot.hasData) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                /// 可以通过翻译等自定义文本
                MyCustomText(
                  text: "首次设置LAN配置".tr(),
                  align: TextAlign.center,
                  fontStyle: FontStyle.italic,
                ),
                SizedBox(height: 4.0.h),
                /// 可以通过为您的应用设计的小部件自定义字段
                MyCustomStringField(
                  value: formData["ipv4"]["address"],
                  label: "IP地址".tr(),
                  placeholder: "192.168.1.100",
                  onSubmit: (value) {
                    var result = UtilsManager.validation.validateIp(value);
                    if (result != null) {
                      return result;
                    }
                    formData["ipv4"]["address"] = value;
                  },
                ),
                SizedBox(height: 2.0.h),
                MyCustomStringField(
                  value: LogbotSetupUiUtils().prefixToSubnet(formData["ipv4"]["prefix"]) ?? "255.255.255.0",
                  label: "子网掩码".tr(),
                  placeholder: "255.255.255.0",
                  onSubmit: (value) {
                    var result = UtilsManager.validation.validateIp(value);
                    if (result != null) {
                      return result;
                    }
                    formData["ipv4"]["prefix"] = LogbotSetupUiUtils().subnetToPrefix(value) ?? 24;
                  },
                ),
                SizedBox(height: 4.0.h),
                /// 可以通过为您的应用设计的小部件自定义按钮
                !isLoading ?
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    FillButton(
                      status: isLoading ? "disabled" : "primary",
                      size: "small",
                      text: "后退".tr(),
                      icon: FontAwesomeIcons.arrowUp,
                      onTap: widget.onCancel,
                    ),
                    FillButton(
                      status: isLoading ? "disabled" : "primary",
                      size: "small",
                      text: "下一步".tr(),
                      icon: FontAwesomeIcons.arrowDown,
                      onTap: submit,
                    ),
                  ],
                ) : const Center(child: CircularProgressIndicator.adaptive()),
              ],
            );
          } else {
            return const Center(
              child: CircularProgressIndicator.adaptive(),
            );
          }
        }
      ),
    );
  }
}

设置过程

设置过程可以通过WiFi或蓝牙低功耗完成。

1. WiFi连接：用户必须通过WiFi连接到设备生成的访问点，当设备未配置时：

   SSID: logbot-wifi-ap
   密码: password
   

2. 蓝牙连接：未配置的设备会显示为具有ID 00000000 的蓝牙设备。物联网设备可以在移动应用的设置过程中直接被发现，但对于iOS用户，必须先从设置中将设备配对到手机（设置 > 蓝牙）。如果物联网设备未与手机配对，在尝试启动设置过程时会显示错误消息。

设置过程包括以下8个步骤，这些步骤在连接到设备后开始：

1. 许可证设置
2. LAN连接配置
3. 主连接选择
4. 主连接配置
5. 次级连接选择（可选）
6. 次级连接配置（可选）
7. 接入点配置（可选）
8. 设置完成及重启

以下是配置设备的各种步骤的流程图，包括基于先前配置连接的所有可选步骤（例如：如果WiFi已作为连接方式使用，则无法配置接入点）。

![设置过程流程图]

配置完成后，会显示一个Bonjour页面并重新启动设备。重新启动后，设备应已完成配置。

Logbot设置界面UI执行了一些额外的步骤以确认设备的正确配置。

1. 在设备重新启动后（通常大约一分钟），使用Logbot Discovery扫描本地网络中的设备。如果设备正确配置，设备应可见。
2. 如果设备被发现，将执行对设备的Logbot Setup服务的健康检查，以确认服务运行正常。
3. 如果这些步骤成功完成，则表示设备配置成功。
4. 如果这些步骤未能完成，这并不意味着配置失败。设备可能仍在重启中，或者用户连接到了不同的网络，导致设备无法被发现。如果这些步骤失败了，但许可证激活和重启完成了，则表示配置部分成功，这意味着用户需要手动验证设备是否正确配置并连接到Logbot。

如果用户在进行配置时已登录，并且用户具有编辑者角色，则会执行一些额外的步骤：

1. 下载用户拥有的设备列表。
2. 如果设备不在列表中，则意味着设备必须注册到Logbot平台。用户会被要求输入设备名称并将其插入到用户的设备集合中。
3. 如果设备已经注册，则过程结束。

测试

运行所有测试：

flutter test