继续移动端项目框架搭建，购买的材料预计今天可以送货，到货后搭建一个demo进行测试，之后进行电路图绘制和3d建模做盒子造型。

项目概述

MagicBox 是一个基于 Flutter 开发的跨平台移动端应用，用于管理智能设备的发现、配置和控制。该应用采用现代化的架构设计，支持 Android 和 iOS 双平台，实现了设备的本地发现、云端同步和远程控制功能。

技术栈选择

技术/框架	版本	用途	选型理由
Flutter	3.10.3	跨平台应用开发	一套代码运行在 Android 和 iOS 平台，开发效率高，性能接近原生
Dart	3.10.3	开发语言	类型安全，JIT/AOT 编译，热重载提升开发效率
Riverpod	2.6.1	状态管理	声明式状态管理，依赖注入，测试友好，支持异步操作
Dio	5.8.0	网络请求	功能强大，支持拦截器、全局配置、FormData、文件上传下载等
shared_preferences	2.5.3	本地存储	轻量级键值对存储，适合保存应用配置和用户偏好
flutter_secure_storage	9.2.4	安全存储	用于保存敏感数据如认证令牌，支持 Android Keystore 和 iOS Keychain
multicast_dns	0.3.2+8	设备发现	实现基于 mDNS 的本地设备发现功能
permission_handler	12.0.1	权限管理	统一处理 Android 和 iOS 平台的权限请求

架构设计

整体架构图

分层设计

MagicBox 应用采用了清晰的分层架构，各层职责明确，便于维护和扩展：

1. 表现层

   • 由 Flutter Widget 组成，负责 UI 展示和用户交互
   • 状态通过 Riverpod 管理，实现 UI 与业务逻辑的分离
   • 主要包含：
     • 主页面组件（HomeShell）
     • 设备列表页面（DeviceTab）
     • 设备配网页面（ProvisioningScreen）
     • 云端服务页面（CloudTab）
     • 设置页面（SettingsTab）

2. 业务层

   • 包含应用的核心业务逻辑
   • 负责处理用户请求、协调数据层和表现层
   • 主要包含：
     • 设备发现控制器（DeviceDiscoveryController）
     • 认证控制器（AuthController）
     • 设备控制器（BoxesController）
     • 设置控制器（SettingsController）

3. 数据层

   • 负责数据的获取和持久化
   • 与后端 API 通信，处理本地存储
   • 主要包含：
     • 后端 API 客户端（BackendApi）
     • 本地存储服务（AppStorage）
     • 安全存储服务（SecureStore）

4. 核心服务

   • 提供通用的基础服务
   • 被其他层调用，不依赖其他层
   • 主要包含：
     • 网络请求服务（DioFactory）
     • 设备发现服务（MdnsDiscoveryService）
     • 权限管理服务（PermissionHandler）
     • 多播锁服务（MulticastLock）

核心功能实现

1. 设备发现功能

设备发现是 MagicBox 应用的核心功能之一，采用 mDNS（Multicast DNS）协议实现本地设备的自动发现。

设备发现流程图

关键代码实现

设备发现的核心逻辑在 MdnsDiscoveryService 类中实现：

Future<List<MagicBoxDevice>> discover({Duration timeout = const Duration(seconds: 5)}) async {
  await _multicastLock.acquire();
  final client = MDnsClient(rawDatagramSocketFactory: _safeBind);
  final Map<String, MagicBoxDevice> devices = <String, MagicBoxDevice>{};
  
  try {
    await client.start();
    // 查找 PTR 记录
    await for (final ptr in client.lookup<PtrResourceRecord>(
      ResourceRecordQuery.serverPointer('_http._tcp.local'))) {
      // 解析 SRV 记录获取设备信息
      final srv = await _firstOrNull<SrvResourceRecord>(
        client.lookup<SrvResourceRecord>(ResourceRecordQuery.service(ptr.domainName)),
        const Duration(seconds: 2),
      );
      // 解析 A 记录获取 IP 地址
      final ip = await _firstOrNull<IPAddressResourceRecord>(
        client.lookup<IPAddressResourceRecord>(ResourceRecordQuery.addressIPv4(host)),
        const Duration(seconds: 2),
      );
      // 创建设备对象并添加到列表
      devices[deviceId] = MagicBoxDevice(
        deviceId: deviceId,
        host: host,
        ip: ip.address.address,
        port: srv.port,
      );
    }
  } finally {
    client.stop();
    await _multicastLock.release();
  }
  
  return devices.values.toList()..sort((a, b) => a.deviceId.compareTo(b.deviceId));
}

2. 应用状态管理

MagicBox 应用采用 Riverpod 进行状态管理，实现了声明式的状态管理方式，便于测试和维护。

Riverpod 架构图

状态管理实现

应用启动时初始化 Riverpod ProviderScope：

class AppBootstrap extends StatelessWidget {
  const AppBootstrap({super.key, required this.storage});
  final AppStorage storage;
  
  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      overrides: <Override>[
        appStorageProvider.overrideWithValue(storage),
      ],
      child: const MagicBoxApp(),
    );
  }
}

核心 Provider 定义：

// 应用存储 Provider
final appStorageProvider = Provider<AppStorage>((_) => throw UnimplementedError());

// 安全存储 Provider
final secureStoreProvider = Provider<SecureStore>((_) => SecureStore());

// 设备发现服务 Provider
final mdnsDiscoveryServiceProvider = Provider<MdnsDiscoveryService>((ref) {
  final multicastLock = MulticastLock();
  return MdnsDiscoveryService(multicastLock: multicastLock);
});

// 设备发现控制器 Provider
final deviceDiscoveryControllerProvider = NotifierProvider<DeviceDiscoveryController, DeviceDiscoveryState>(
  () => DeviceDiscoveryController(),
);

3. 设备配网功能

设备配网功能允许用户将 MagicBox 设备连接到 Wi-Fi 网络，实现远程控制和管理。

设备配网流程图

4. 云端同步功能

云端同步功能允许用户将设备信息同步到云端，实现远程控制和多设备管理。

云端同步架构图

开发流程和经验总结

1. 开发环境搭建

• Flutter SDK：安装最新稳定版 Flutter SDK（3.10.3）
• IDE：使用 VS Code 或 Android Studio，配置 Flutter 和 Dart 插件
• 模拟器/真机：使用 Android 模拟器、iOS 模拟器或真机进行测试
• 依赖管理：使用 pubspec.yaml 管理依赖，定期更新依赖版本

2. 代码组织最佳实践

• 模块化设计：按照功能模块组织代码，便于维护和扩展
• 清晰的命名规范：使用有意义的类名、方法名和变量名
• 代码注释：关键代码添加注释，说明功能和实现逻辑
• 测试驱动开发：编写单元测试和 widget 测试，确保代码质量
• 持续集成：配置 CI/CD 流程，自动运行测试和构建

3. 跨平台开发注意事项

• 平台差异处理：针对 Android 和 iOS 平台的差异进行特殊处理
• 权限管理：不同平台的权限请求方式不同，需要分别处理
• UI 适配：考虑不同屏幕尺寸和分辨率的适配
• 性能优化：注意 Flutter 应用的性能优化，避免不必要的重建和重绘
• 资源管理：合理管理图片、字体等资源，避免应用体积过大

4. 性能优化策略

• 减少 Widget 重建：使用 const 构造函数、const Widget 和 Memoized 等方式
• 合理使用状态管理：避免不必要的状态更新和 Widget 重建
• 异步操作优化：使用 FutureBuilder、StreamBuilder 等组件处理异步操作
• 列表性能优化：使用 ListView.builder 或 ListView.separated 构建长列表
• 图片优化：使用合适的图片格式和尺寸，考虑使用 CachedNetworkImage 等库

未来规划

1. 功能扩展

   • 添加设备控制功能，支持远程控制设备
   • 实现设备状态监控和历史数据查询
   • 添加设备固件升级功能
   • 支持多用户管理和设备共享

2. 性能优化

   • 优化设备发现速度和稳定性
   • 减少应用启动时间
   • 优化内存使用
   • 提高电池续航能力

3. 用户体验提升

   • 优化 UI 设计，提高用户体验
   • 添加引导教程，帮助新用户快速上手
   • 支持深色模式
   • 添加多语言支持

4. 技术升级

   • 升级 Flutter 和依赖库到最新版本
   • 考虑使用更先进的状态管理方案（如 Riverpod 3.0）
   • 实现应用模块化，支持动态功能加载
   • 考虑使用 Flutter Web 扩展到 Web 平台

界面展示

总结

MagicBox 移动端应用采用了现代化的架构设计和技术栈，实现了设备发现、配网、云端同步等核心功能。通过清晰的分层架构和良好的代码组织，应用具有良好的可维护性和扩展性。

在开发过程中，我们积累了丰富的 Flutter 开发经验，包括跨平台开发、状态管理、性能优化等方面。未来，我们将继续完善应用功能，优化用户体验，提升应用性能，为用户提供更好的智能设备管理体验。

MagicBox 应用的开发是一个不断学习和进步的过程，我们将继续关注 Flutter 技术的发展，不断改进和完善应用，为用户提供更好的产品和服务。

项目开源地址：https://gitcode.com/zhangerhao/magicBoxApp