Flutter 框架跨平台鸿蒙开发 - AR植物养护助手

AR植物养护助手应用


欢迎加入开源鸿蒙跨平台社区:

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

AR植物养护助手是一款科技探索类应用,为植物爱好者和新手提供专业的植物识别与养护指导服务。应用以绿色为主色调,象征自然与生命。界面设计采用清新自然的风格,让用户能够轻松掌握植物养护知识。

应用通过AR扫描识别植物种类,提供个性化的养护方案,包括浇水频率、光照需求、施肥提醒等功能。无论是植物新手还是资深爱好者,都能在这里找到适合自己的养护方法,让每一株植物都能茁壮成长。

1.2 核心功能

功能模块 功能描述 实现方式
AR识别 模拟扫描识别植物 CustomPaint绘制
植物管理 我的植物列表管理 数据模型存储
养护任务 浇水施肥提醒系统 任务调度管理
养护指南 植物养护知识库 分类展示
个性化方案 根据植物类型推荐 智能匹配
浇水提醒 智能浇水周期计算 日期计算

1.3 植物类型定义

序号 类型名称 Emoji 描述
1 多肉植物 🌵 耐旱易养
2 观叶植物 🌿 净化空气
3 开花植物 🌸 美丽芬芳
4 仙人掌 🌵 极耐旱
5 香草植物 🌱 实用美味
6 蕨类植物 🌿 喜阴湿
7 兰花 🌺 高雅精致
8 盆景 🌳 艺术造型

1.4 养护难度定义

序号 难度名称 Emoji 颜色 说明
1 简单 绿色 新手友好
2 中等 ⭐⭐ 黄色 需要关注
3 困难 ⭐⭐⭐ 红色 经验要求

1.5 浇水频率定义

序号 频率名称 天数 Emoji 颜色
1 每天 1 💧 深蓝
2 每3天 3 💧 中蓝
3 每周 7 💧 浅蓝
4 每两周 14 💧 淡蓝
5 每月 30 💧 极淡蓝

1.6 光照需求定义

序号 需求名称 Emoji 颜色 说明
1 全日照 ☀️ 黄色 6小时以上
2 半日照 🌤️ 浅黄 3-6小时
3 耐阴 ☁️ 灰色 散射光即可
4 低光 🌙 深灰 少量光照

1.7 养护任务类型定义

序号 任务名称 Emoji 颜色
1 浇水 💧 蓝色
2 施肥 🌾 绿色
3 修剪 ✂️ 橙色
4 换盆 🏡 棕色
5 喷雾 💨 青色
6 转盆 🔄 紫色

1.8 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
自定义绘制 CustomPainter -
动画系统 AnimationController -
目标平台 鸿蒙OS / Web API 21+

1.9 项目结构

复制代码
lib/
└── main_plant_care.dart
    ├── PlantCareApp                # 应用入口
    ├── PlantType                   # 植物类型枚举
    ├── CareDifficulty              # 养护难度枚举
    ├── WaterFrequency              # 浇水频率枚举
    ├── LightRequirement            # 光照需求枚举
    ├── CareTaskType                # 养护任务类型枚举
    ├── Plant                       # 植物模型
    ├── CareTask                    # 养护任务模型
    ├── PlantRecognitionResult      # 识别结果模型
    ├── PlantCareHomePage           # 主页面(底部导航)
    ├── _buildScanPage              # 识别页面
    ├── _buildPlantsPage            # 植物页面
    ├── _buildTasksPage             # 任务页面
    ├── _buildGuidePage             # 指南页面
    ├── PlantScannerPainter         # 扫描器绘制器
    └── ScanLinePainter             # 扫描线绘制器

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

PlantCareHomePage
识别页
植物页
任务页
指南页
AR扫描器
识别结果
添加植物
植物列表
植物详情
今日任务
即将到来
分类浏览
养护技巧
植物识别器

PlantRecognizer
养护管理器

CareManager
任务调度器

TaskScheduler
Plant

植物数据
CareTask

任务数据
PlantRecognitionResult

识别结果

2.2 类图设计

has
has
has
has
references
has
has
PlantCareApp
+Widget build()
<<enumeration>>
PlantType
+String label
+IconData icon
+Color color
+String description
+succulent()
+foliage()
+flowering()
+cactus()
+herb()
+fern()
+orchid()
+bonsai()
<<enumeration>>
CareDifficulty
+String label
+Color color
+String description
+easy()
+medium()
+hard()
<<enumeration>>
WaterFrequency
+String label
+int days
+IconData icon
+Color color
+daily()
+every3days()
+weekly()
+every2weeks()
+monthly()
<<enumeration>>
LightRequirement
+String label
+IconData icon
+Color color
+String description
+full()
+partial()
+shade()
+low()
<<enumeration>>
CareTaskType
+String label
+IconData icon
+Color color
+water()
+fertilize()
+prune()
+repot()
+mist()
+rotate()
Plant
+String id
+String name
+String scientificName
+PlantType type
+CareDifficulty difficulty
+WaterFrequency waterFrequency
+LightRequirement lightRequirement
+String description
+List<String> careTips
+DateTime addedDate
+DateTime lastWatered
+DateTime lastFertilized
+bool needsWater
+int daysUntilWater
CareTask
+String id
+Plant plant
+CareTaskType type
+DateTime scheduledDate
+bool isCompleted
+String note
PlantRecognitionResult
+String name
+String scientificName
+PlantType type
+double confidence
+String description

2.3 页面导航流程

识别
植物
任务
指南
应用启动
识别页
底部导航
扫描植物
显示识别结果
添加到我的植物
植物列表
查看植物详情
浇水/施肥操作
今日任务
完成任务
养护指南
浏览养护技巧

2.4 植物识别流程

结果展示 识别引擎 扫描界面 用户 结果展示 识别引擎 扫描界面 用户 点击扫描按钮 启动扫描动画 模拟识别过程 随机生成结果 返回识别结果 显示植物信息 点击添加 添加成功提示


三、核心模块设计

3.1 数据模型设计

3.1.1 植物类型枚举 (PlantType)
dart 复制代码
enum PlantType {
  succulent('多肉植物', Icons.eco, Color(0xFF81C784), '耐旱易养'),
  foliage('观叶植物', Icons.nature, Color(0xFF66BB6A), '净化空气'),
  flowering('开花植物', Icons.local_florist, Color(0xFFF06292), '美丽芬芳'),
  cactus('仙人掌', Icons.grass, Color(0xFF4DB6AC), '极耐旱'),
  herb('香草植物', Icons.spa, Color(0xFFAED581), '实用美味'),
  fern('蕨类植物', Icons.forest, Color(0xFF81C784), '喜阴湿'),
  orchid('兰花', Icons.local_florist_outlined, Color(0xFFBA68C8), '高雅精致'),
  bonsai('盆景', Icons.park, Color(0xFF8D6E63), '艺术造型');

  final String label;
  final IconData icon;
  final Color color;
  final String description;
}
3.1.2 浇水频率枚举 (WaterFrequency)
dart 复制代码
enum WaterFrequency {
  daily('每天', 1, Icons.water_drop, Color(0xFF2196F3)),
  every3days('每3天', 3, Icons.water_drop, Color(0xFF42A5F5)),
  weekly('每周', 7, Icons.water_drop, Color(0xFF64B5F6)),
  every2weeks('每两周', 14, Icons.water_drop, Color(0xFF90CAF9)),
  monthly('每月', 30, Icons.water_drop, Color(0xFFBBDEFB));

  final String label;
  final int days;
  final IconData icon;
  final Color color;
}
3.1.3 植物模型 (Plant)
dart 复制代码
class Plant {
  final String id;                    // 植物ID
  final String name;                  // 植物名称
  final String scientificName;        // 学名
  final PlantType type;               // 植物类型
  final CareDifficulty difficulty;    // 养护难度
  final WaterFrequency waterFrequency;// 浇水频率
  final LightRequirement lightRequirement; // 光照需求
  final String description;           // 描述
  final List<String> careTips;        // 养护提示
  final DateTime addedDate;           // 添加日期
  final DateTime? lastWatered;        // 最后浇水时间
  final DateTime? lastFertilized;     // 最后施肥时间
  
  bool get needsWater;                // 是否需要浇水
  int get daysUntilWater;             // 距离下次浇水天数
}
3.1.4 养护任务模型 (CareTask)
dart 复制代码
class CareTask {
  final String id;              // 任务ID
  final Plant plant;            // 关联植物
  final CareTaskType type;      // 任务类型
  final DateTime scheduledDate; // 计划日期
  final bool isCompleted;       // 是否完成
  final String? note;           // 备注
}
3.1.5 植物类型分布

35% 25% 15% 10% 8% 4% 2% 1% 植物类型分布示例 观叶植物 多肉植物 开花植物 仙人掌 香草植物 兰花 蕨类植物 盆景

3.2 页面结构设计

3.2.1 主页面布局

PlantCareHomePage
IndexedStack
识别页
植物页
任务页
指南页
NavigationBar
识别 Tab
植物 Tab
任务 Tab
指南 Tab

3.2.2 识别页结构

识别页
SliverAppBar
AR扫描器
识别结果
扫描框
扫描动画
扫描按钮
植物信息
置信度显示
添加按钮

3.2.3 植物页结构

植物页
SliverAppBar
植物统计
植物列表
植物总数
需要浇水
养护天数
植物卡片
类型图标
浇水状态
快捷浇水

3.2.4 任务页结构

任务页
SliverAppBar
任务统计
今日任务
即将到来
待完成
已完成
今日任务
任务卡片
任务类型
植物名称
完成按钮

3.3 浇水提醒逻辑





获取植物信息
读取浇水频率
读取最后浇水时间
最后浇水时间存在?
需要浇水
计算天数差
天数差 >= 浇水频率
计算剩余天数
显示浇水提醒
显示倒计时

3.4 任务完成逻辑

浇水
施肥
其他
用户点击完成
更新任务状态
标记为已完成
任务类型
更新最后浇水时间
更新最后施肥时间
仅标记完成
显示成功提示


四、UI设计规范

4.1 配色方案

应用以绿色为主色调,象征自然与生命:

颜色类型 色值 用途
主色 #4CAF50 导航、主题元素
辅助色 #81C784 渐变、背景
浇水色 #2196F3 浇水相关
施肥色 #8BC34A 施肥相关
警告色 #FF5722 需要注意
简单色 #4CAF50 简单难度

4.2 植物类型颜色

植物类型 色值 视觉效果
多肉植物 #81C784 清新绿色
观叶植物 #66BB6A 自然绿色
开花植物 #F06292 粉色花朵
仙人掌 #4DB6AC 青绿色
香草植物 #AED581 浅绿色
兰花 #BA68C8 紫色优雅

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
植物名称 15px SemiBold #000000
学名 11px Italic #757575
状态标签 10px Regular 状态颜色
统计数字 20px Bold 白色

4.4 组件规范

4.4.1 AR扫描器界面
复制代码
┌─────────────────────────────────────┐
│ [AR模拟]                            │
├─────────────────────────────────────┤
│  ┌───┐                         ┌───┐│
│  │   │                         │   ││
│  └───┘                         └───┘│
│                                     │
│         🌿                          │
│                                     │
│  ┌───┐                         ┌───┐│
│  │   │                         │   ││
│  └───┘                         └───┘│
│                                     │
│         [ 📷 扫描植物 ]             │
└─────────────────────────────────────┘
4.4.2 植物卡片
复制代码
┌─────────────────────────────────────┐
│ [🌿] 绿萝              [简单]  [💧] │
│      Epipremnum aureum              │
│      💧 需要浇水                    │
└─────────────────────────────────────┘
4.4.3 识别结果卡片
复制代码
┌─────────────────────────────────────┐
│ [🌿] 绿萝                           │
│      Epipremnum aureum              │
│      [观叶植物]                      │
│                                     │
│ 常见的室内观叶植物,易于养护         │
│                                     │
│      [ ➕ 添加到我的植物 ]           │
└─────────────────────────────────────┘
4.4.4 任务卡片
复制代码
┌─────────────────────────────────────┐
│ [💧] 绿萝 - 浇水              [完成] │
│      今天                           │
└─────────────────────────────────────┘

五、核心功能实现

5.1 植物识别实现

dart 复制代码
void _startScan() {
  setState(() {
    _isScanning = true;
    _recognitionResult = null;
  });
  _scanController.forward(from: 0);

  _scanTimer = Timer(const Duration(seconds: 3), () {
    setState(() {
      _isScanning = false;
      _recognitionResult = _generateRandomRecognition();
    });
  });
}

PlantRecognitionResult _generateRandomRecognition() {
  final random = Random();
  final plants = [
    ('绿萝', 'Epipremnum aureum', PlantType.foliage, '常见的室内观叶植物'),
    ('虎皮兰', 'Sansevieria', PlantType.foliage, '净化空气能力强'),
    ('仙人掌', 'Cactaceae', PlantType.cactus, '极耐旱,适合新手'),
  ];
  final plant = plants[random.nextInt(plants.length)];
  return PlantRecognitionResult(
    name: plant.$1,
    scientificName: plant.$2,
    type: plant.$3,
    confidence: 0.75 + random.nextDouble() * 0.2,
    description: plant.$4,
  );
}

5.2 浇水提醒实现

dart 复制代码
bool get needsWater {
  if (lastWatered == null) return true;
  final daysSinceWater = DateTime.now().difference(lastWatered!).inDays;
  return daysSinceWater >= waterFrequency.days;
}

int get daysUntilWater {
  if (lastWatered == null) return 0;
  final daysSinceWater = DateTime.now().difference(lastWatered!).inDays;
  return (waterFrequency.days - daysSinceWater).clamp(0, waterFrequency.days);
}

5.3 浇水操作实现

dart 复制代码
void _waterPlant(Plant plant) {
  setState(() {
    final index = _plants.indexOf(plant);
    if (index != -1) {
      _plants[index] = Plant(
        id: plant.id,
        name: plant.name,
        scientificName: plant.scientificName,
        type: plant.type,
        difficulty: plant.difficulty,
        waterFrequency: plant.waterFrequency,
        lightRequirement: plant.lightRequirement,
        imagePath: plant.imagePath,
        description: plant.description,
        careTips: plant.careTips,
        addedDate: plant.addedDate,
        lastWatered: DateTime.now(),
        lastFertilized: plant.lastFertilized,
      );
    }
  });

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('${plant.name} 已浇水'),
      backgroundColor: const Color(0xFF2196F3),
    ),
  );
}

5.4 任务完成实现

dart 复制代码
void _completeTask(CareTask task) {
  setState(() {
    final index = _tasks.indexOf(task);
    if (index != -1) {
      _tasks[index] = CareTask(
        id: task.id,
        plant: task.plant,
        type: task.type,
        scheduledDate: task.scheduledDate,
        isCompleted: true,
        note: '已完成',
      );
    }
  });

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('${task.plant.name} ${task.type.label}完成'),
      backgroundColor: task.type.color,
    ),
  );
}

5.5 扫描器绘制实现

dart 复制代码
class PlantScannerPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制装饰性叶子
    final leafPaint = Paint()
      ..color = Colors.white.withOpacity(0.15)
      ..style = PaintingStyle.fill;

    final leafPath = Path();
    leafPath.moveTo(size.width * 0.3, size.height * 0.6);
    leafPath.quadraticBezierTo(
      size.width * 0.35, size.height * 0.4,
      size.width * 0.4, size.height * 0.35,
    );
    // ... 更多绘制代码
    canvas.drawPath(leafPath, leafPaint);

    // 绘制扫描框角标
    final cornerPaint = Paint()
      ..color = Colors.white.withOpacity(0.5)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    // ... 角标绘制代码
  }
}

六、交互设计

6.1 识别流程

结果卡片 识别引擎 扫描界面 用户 结果卡片 识别引擎 扫描界面 用户 点击扫描 启动动画 开始识别 返回结果 显示信息 展示详情 点击添加 添加成功

6.2 植物管理流程

点击植物
点击浇水
打开植物页
显示植物列表
用户操作
显示详情弹窗
查看养护信息
快捷浇水
快捷施肥
更新浇水时间
显示成功提示

6.3 任务处理流程

用户点击
确认完成
超过计划日期
重新安排
待处理
处理中
已完成
过期


七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 2024-03-31 基础UI框架 植物识别 养护管理 真实AR识别 推送通知 植物社区 AI诊断 植物百科 云端同步 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 AR植物养护助手开发计划

7.2 功能扩展建议

7.2.1 真实AR识别

识别功能:

  • 设备摄像头接入
  • 图像识别API
  • 实时植物检测
  • 多角度识别
7.2.2 AI诊断系统

诊断功能:

  • 病虫害识别
  • 营养缺乏诊断
  • 生长状态评估
  • 治疗建议
7.2.3 植物社区

社区功能:

  • 养护经验分享
  • 问题求助
  • 植物展示
  • 互动交流

八、注意事项

8.1 开发注意事项

  1. 动画控制:扫描动画需要正确管理AnimationController

  2. 状态同步:浇水后需要同步更新植物状态和任务列表

  3. 日期计算:浇水提醒需要准确计算日期差

  4. 定时器管理:扫描定时器需要在dispose时取消

  5. 内存优化:植物列表较多时注意性能优化

8.2 常见问题

问题 原因 解决方案
扫描无结果 Timer未启动 检查_startScan
浇水状态不更新 状态未刷新 调用setState
任务不显示 列表为空 检查_tasks数据
识别结果异常 随机数据问题 检查_generateRandomRecognition

8.3 使用技巧

🌱 植物养护技巧 🌱

浇水原则

  • 见干见湿,浇则浇透
  • 避免积水,防止烂根
  • 夏多冬少,因季调整
  • 观察叶片,判断需求

光照管理

  • 了解植物光照需求
  • 避免夏季强光直射
  • 定期转盆,均匀受光
  • 补光灯辅助生长

施肥要点

  • 薄肥勤施,生长期施肥
  • 休眠期停止施肥
  • 有机肥与化肥交替
  • 注意肥料配比

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+
Web浏览器 Chrome 90+

9.2 运行命令

bash 复制代码
# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_plant_care.dart --web-port 8141

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_plant_care.dart

# 代码分析
flutter analyze lib/main_plant_care.dart

十、总结

AR植物养护助手应用通过植物识别、植物管理、养护任务、养护指南四大模块,为用户提供了一个全方位的植物养护辅助平台。应用支持8种植物类型、3级养护难度、5种浇水频率、4种光照需求,让植物新手也能轻松养好花。

核心功能涵盖AR识别、浇水提醒、任务管理、养护指南四大模块。植物类型包括多肉、观叶、开花、仙人掌、香草、蕨类、兰花、盆景等,覆盖常见室内植物;养护难度分为简单、中等、困难三级,便于用户选择适合的植物;浇水提醒智能计算浇水周期,确保植物不会缺水或过水。

应用采用 Material Design 3 设计规范,以绿色为主色调,象征自然与生命。通过本应用,希望能够帮助用户掌握植物养护知识,让每一株植物都能茁壮成长。

AR植物养护助手------让植物新手也能养好花


相关推荐
autumn20052 小时前
Flutter 框架跨平台鸿蒙开发 - 历史人物对话
服务器·flutter·华为·harmonyos
autumn20053 小时前
Flutter 框架跨平台鸿蒙开发 - 社区闲置循环
flutter·华为·harmonyos
chenbin___3 小时前
在鸿蒙手机上,measure 和 measureInWindow 返回的 y / pageY 在滑动组件后值不变问题
华为·智能手机·harmonyos
浮芷.4 小时前
Flutter 框架跨平台鸿蒙开发 - 家庭健康监测云应用
科技·flutter·华为·harmonyos·鸿蒙
世人万千丶5 小时前
Flutter 框架跨平台鸿蒙开发 - 宠物语言翻译器应用
学习·flutter·华为·开源·harmonyos·鸿蒙
见山是山-见水是水5 小时前
Flutter 框架跨平台鸿蒙开发 - NPC模拟器
flutter·华为·harmonyos
提子拌饭1335 小时前
番茄时间管理:鸿蒙Flutter 实现的高效时间管理工具
android·flutter·华为·架构·开源·harmonyos·鸿蒙
浮芷.5 小时前
Flutter 框架跨平台鸿蒙开发 - 科技预言应用
科技·flutter·华为·harmonyos
李李李勃谦5 小时前
Flutter 框架跨平台鸿蒙开发 - 小众景点发现
flutter·华为·harmonyos