开源鸿蒙跨平台Flutter开发：AR厨艺教学应用

提子拌饭1332026-04-11 10:10

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

AR厨艺教学是一款创新的教育学习类应用，通过增强现实技术为用户提供沉浸式的烹饪学习体验。每一步操作都有虚拟指导，失败了可以重来，让新手也能轻松变大厨。应用以温暖的橙色为主色调，象征美食与热情。涵盖菜谱浏览、AR教学、学习记录、个人中心四大模块，让烹饪学习变得简单有趣。

1.2 核心功能

功能模块 功能描述 实现方式
菜谱浏览 分类浏览各类菜谱 列表展示
AR教学 增强现实烹饪指导 AR渲染
步骤引导 分步骤教学指导 交互式教程
失败重来 随时重新开始学习 状态重置
学习记录 记录学习进度和成果 数据存储
成就系统 完成菜品获得成就 游戏化设计

1.3 菜系分类定义

序号 分类名称 Emoji 描述
1 川菜 🌶️ 麻辣鲜香，口味浓郁
2 粤菜 🦐 清淡鲜美，注重原味
3 鲁菜 🥘 咸鲜为主，讲究火候
4 苏菜 🦀 清鲜平和，注重造型
5 浙菜 🐟 清鲜爽脆，淡雅细腻
6 湘菜 🌶️ 香辣浓鲜，口味独特

1.4 难度等级定义

序号 难度等级 Emoji 描述
1 入门 🌟 适合新手，步骤简单
2 初级 🌟🌟 需要基础技巧
3 中级 🌟🌟🌟 需要一定经验
4 高级 🌟🌟🌟🌟 需要专业技能
5 大师 🌟🌟🌟🌟🌟 挑战极限

1.5 烹饪步骤类型定义

序号 步骤类型 Emoji 描述
1 准备 🔪 食材准备与处理
2 切配 🥕 切片、切丝、切块
3 调味 🧂 腌制、调味
4 烹饪 🔥 炒、煮、蒸、炸
5 装盘 🍽️ 摆盘装饰

1.6 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
AR技术 ARKit/ARCore -
3D渲染 Flutter 3D -
动画效果 Lottie -
目标平台 鸿蒙OS / Web API 21+

1.7 项目结构

复制代码 
lib/
└── main_ar_cooking_teaching.dart
    ├── ARCookingTeachingApp          # 应用入口
    ├── CuisineType                   # 菜系分类枚举
    ├── DifficultyLevel               # 难度等级枚举
    ├── StepType                      # 步骤类型枚举
    ├── Recipe                        # 菜谱模型
    ├── CookingStep                   # 烹饪步骤模型
    ├── Ingredient                    # 食材模型
    ├── LearningRecord                # 学习记录模型
    ├── Achievement                   # 成就模型
    ├── ARCookingTeachingHomePage     # 主页面（底部导航）
    ├── _buildRecipePage              # 菜谱页面
    ├── _buildLearningPage            # 学习页面
    ├── _buildARTeachingPage          # AR教学页面
    ├── _buildProfilePage             # 我的页面
    ├── RecipeCard                    # 菜谱卡片组件
    ├── StepCard                      # 步骤卡片组件
    └── ARGuideWidget                 # AR指导组件

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

ARCookingTeachingHomePage
菜谱页
学习页
AR教学页
我的页
菜谱列表
分类筛选
菜谱详情
学习记录
进度统计
AR场景
步骤引导
虚拟指导
成就展示
个人设置
菜谱管理器

RecipeManager
AR渲染器

ARRenderer
学习管理器

LearningManager
Recipe

菜谱
CookingStep

烹饪步骤
LearningRecord

学习记录
Achievement

成就

2.2 类图设计

has
has
has
has
references
has
ARCookingTeachingApp
+Widget build()
<<enumeration>>
CuisineType
+String label
+String emoji
+String description
+sichuan()
+cantonese()
+shandong()
+jiangsu()
+zhejiang()
+hunan()
<<enumeration>>
DifficultyLevel
+String label
+String emoji
+int stars
+beginner()
+elementary()
+intermediate()
+advanced()
+master()
<<enumeration>>
StepType
+String label
+String emoji
+prepare()
+cut()
+season()
+cook()
+plate()
Recipe
+String id
+String name
+String image
+CuisineType cuisine
+DifficultyLevel difficulty
+int duration
+List<Ingredient> ingredients
+List<CookingStep> steps
+double rating
+int learningCount
CookingStep
+String id
+int order
+StepType type
+String title
+String description
+String arGuide
+int duration
+List<String> tips
Ingredient
+String name
+double amount
+String unit
LearningRecord
+String id
+String recipeId
+DateTime startTime
+DateTime endTime
+int currentStep
+bool isCompleted
+double score
Achievement
+String id
+String name
+String description
+String icon
+DateTime unlockedAt

2.3 页面导航流程

菜谱
学习
AR教学
我的
是
否
是
否
应用启动
菜谱页
底部导航
菜谱列表
学习记录
AR场景
个人中心
选择菜谱
查看详情
开始学习
AR教学模式
步骤引导
完成步骤?
下一步
重新开始
最后一步?
完成学习
获得成就
保存记录

2.4 AR教学流程

成就系统 步骤管理器 AR渲染器 AR页面 用户 成就系统 步骤管理器 AR渲染器 AR页面 用户 alt [完成所有步骤] [用户选择重来] 选择菜谱开始学习 初始化AR场景 场景加载完成 获取第一步 返回步骤信息 渲染虚拟指导 显示AR指导 完成操作 获取下一步 返回下一步 解锁成就 显示成就 点击重来 重置步骤 返回第一步

三、核心模块设计

3.1 数据模型设计

3.1.1 菜系分类枚举 (CuisineType)
dart 复制代码 
enum CuisineType {
  sichuan(label: '川菜', emoji: '🌶️', description: '麻辣鲜香，口味浓郁'),
  cantonese(label: '粤菜', emoji: '🦐', description: '清淡鲜美，注重原味'),
  shandong(label: '鲁菜', emoji: '🥘', description: '咸鲜为主，讲究火候'),
  jiangsu(label: '苏菜', emoji: '🦀', description: '清鲜平和，注重造型'),
  zhejiang(label: '浙菜', emoji: '🐟', description: '清鲜爽脆，淡雅细腻'),
  hunan(label: '湘菜', emoji: '🌶️', description: '香辣浓鲜，口味独特');

  final String label;
  final String emoji;
  final String description;
}
3.1.2 难度等级枚举 (DifficultyLevel)
dart 复制代码 
enum DifficultyLevel {
  beginner(label: '入门', emoji: '🌟', stars: 1),
  elementary(label: '初级', emoji: '🌟🌟', stars: 2),
  intermediate(label: '中级', emoji: '🌟🌟🌟', stars: 3),
  advanced(label: '高级', emoji: '🌟🌟🌟🌟', stars: 4),
  master(label: '大师', emoji: '🌟🌟🌟🌟🌟', stars: 5);

  final String label;
  final String emoji;
  final int stars;
}
3.1.3 菜谱模型 (Recipe)
dart 复制代码 
class Recipe {
  final String id;              // 菜谱ID
  final String name;            // 菜品名称
  final String image;           // 菜品图片
  final CuisineType cuisine;    // 菜系分类
  final DifficultyLevel difficulty; // 难度等级
  final int duration;           // 烹饪时长（分钟）
  final List<Ingredient> ingredients; // 食材列表
  final List<CookingStep> steps; // 烹饪步骤
  final double rating;          // 评分
  final int learningCount;      // 学习人数
}
3.1.4 烹饪步骤模型 (CookingStep)
dart 复制代码 
class CookingStep {
  final String id;              // 步骤ID
  final int order;              // 步骤顺序
  final StepType type;          // 步骤类型
  final String title;           // 步骤标题
  final String description;     // 步骤描述
  final String arGuide;         // AR指导内容
  final int duration;           // 步骤时长（秒）
  final List<String> tips;      // 小贴士
}
3.1.5 菜系分布

30% 25% 15% 12% 10% 8% 菜系学习分布示例 川菜 粤菜 鲁菜 苏菜 浙菜 湘菜

3.2 页面结构设计

3.2.1 主页面布局

ARCookingTeachingHomePage
IndexedStack
菜谱页
学习页
AR教学页
我的页
NavigationBar
菜谱 Tab
学习 Tab
AR教学 Tab
我的 Tab

3.2.2 菜谱页结构

菜谱页
SliverAppBar
搜索栏
分类筛选
菜谱网格
标题
统计信息
菜系芯片
难度芯片
菜谱卡片
菜品图片
菜品名称
难度标签
评分信息

3.2.3 AR教学页结构

AR教学页
AR场景视图
步骤指示器
虚拟指导区
操作按钮区
摄像头画面
AR叠加层
当前步骤
进度条
剩余步骤
3D模型
动画指导
文字提示
下一步按钮
重来按钮
退出按钮

3.2.4 学习页结构

学习页
SliverAppBar
学习统计
学习记录列表
学习天数
完成菜品
获得成就
记录卡片
菜品图片
学习时间
完成状态

3.3 AR教学逻辑

是
否
是
否
是
否
开始AR教学
初始化AR场景
加载菜谱数据
显示第一步
渲染AR指导
用户操作
操作正确?
进入下一步
显示错误提示
选择重来?
最后一步?
完成学习
计算得分
解锁成就
保存记录

3.4 成就系统逻辑

学习成就
是
菜系成就
是
连续成就
是
成就系统
检查成就条件
成就类型
检查学习数量
达到目标?
解锁成就
检查菜系完成度
完成所有菜品?
检查连续学习天数
达到天数?
显示成就动画
保存成就记录

四、UI设计规范

4.1 配色方案

应用以温暖的橙色为主色调，象征美食与热情：

颜色类型 色值 用途
主色 #FF6B35 (Orange) 导航、主题元素
辅助色 #FF8C42 菜谱页面
第三色 #FFA15C 学习页面
强调色 #FFB77B AR教学页面
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 菜谱卡片
成功色 #4CAF50 完成状态
警告色 #FF9800 提示信息

4.2 难度颜色定义

难度 色值 视觉效果
入门 #4CAF50 绿色，轻松简单
初级 #8BC34A 浅绿色，稍有挑战
中级 #FFC107 黄色，需要技巧
高级 #FF9800 橙色，专业级别
大师 #F44336 红色，极具挑战

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
菜品名称 16px Bold #000000
步骤标题 14px Bold 主色
步骤描述 12px Regular 灰色
统计数字 20px Bold 白色

4.4 组件规范

4.4.1 菜谱卡片
复制代码 
┌─────────────────────────────────────┐
│  ┌─────────────────────────────┐   │
│  │                             │   │
│  │      🍳 菜品图片            │   │
│  │                             │   │
│  └─────────────────────────────┘   │
│                                     │
│  宫保鸡丁                            │
│  🌶️ 川菜  ⭐ 4.8  ⏱️ 30分钟        │
│                                     │
│  难度: 🌟🌟🌟 中级                  │
│  学习人数: 1.2万人                   │
│                                     │
│  [开始学习]                          │
└─────────────────────────────────────┘
4.4.2 步骤卡片
复制代码 
┌─────────────────────────────────────┐
│  步骤 1/8                            │
│                                     │
│  🔪 准备食材                         │
│                                     │
│  将鸡胸肉切成1.5厘米见方的小块       │
│  加入料酒、盐、淀粉腌制15分钟        │
│                                     │
│  💡 小贴士:                          │
│  切肉时顺着纹理切，口感更嫩          │
│                                     │
│  ⏱️ 预计时间: 15分钟                │
│                                     │
│  [查看AR指导] [下一步]              │
└─────────────────────────────────────┘
4.4.3 AR指导界面
复制代码 
┌─────────────────────────────────────┐
│  ┌─────────────────────────────┐   │
│  │                             │   │
│  │      📷 摄像头画面          │   │
│  │                             │   │
│  │      🍳 AR叠加指导          │   │
│  │                             │   │
│  └─────────────────────────────┘   │
│                                     │
│  步骤 3/8 - 炒制                    │
│  ████████░░░░ 50%                  │
│                                     │
│  [🔄 重来] [⏭️ 下一步] [❌ 退出]   │
└─────────────────────────────────────┘
4.4.4 成就卡片
复制代码 
┌─────────────────────────────────────┐
│  🏆 川菜大师                         │
│                                     │
│  完成所有川菜菜品的学习              │
│                                     │
│  解锁时间: 2024-01-15               │
│                                     │
│  ⭐⭐⭐⭐⭐                          │
└─────────────────────────────────────┘
4.4.5 学习记录卡片
复制代码 
┌─────────────────────────────────────┐
│  ┌──────────┐                       │
│  │  🍳      │  宫保鸡丁             │
│  │          │  🌶️ 川菜              │
│  └──────────┘                       │
│                                     │
│  学习时间: 2024-01-15 14:30         │
│  完成状态: ✅ 已完成                 │
│  得分: 95分                          │
│                                     │
│  [再次学习] [分享成果]              │
└─────────────────────────────────────┘

五、核心功能实现

5.1 菜谱列表展示实现

dart 复制代码 
class RecipeListPage extends StatefulWidget {
  @override
  State<RecipeListPage> createState() => _RecipeListPageState();
}

class _RecipeListPageState extends State<RecipeListPage> {
  List<Recipe> _recipes = [];
  CuisineType? _selectedCuisine;
  DifficultyLevel? _selectedDifficulty;

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          title: Text('菜谱浏览'),
          actions: [
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () => _showSearchDialog(),
            ),
          ],
        ),
        SliverToBoxAdapter(
          child: _buildFilters(),
        ),
        SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 0.75,
          ),
          delegate: SliverChildBuilderDelegate(
            (context, index) => RecipeCard(recipe: _recipes[index]),
            childCount: _recipes.length,
          ),
        ),
      ],
    );
  }
}

5.2 AR教学场景实现

dart 复制代码 
class ARTeachingPage extends StatefulWidget {
  final Recipe recipe;

  @override
  State<ARTeachingPage> createState() => _ARTeachingPageState();
}

class _ARTeachingPageState extends State<ARTeachingPage> {
  int _currentStep = 0;
  bool _isARActive = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          _buildARView(),
          _buildStepIndicator(),
          _buildARGuide(),
          _buildControlButtons(),
        ],
      ),
    );
  }

  Widget _buildARView() {
    return Container(
      color: Colors.black,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.camera_alt, size: 64, color: Colors.white),
            SizedBox(height: 16),
            Text(
              'AR场景加载中...',
              style: TextStyle(color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }

  void _nextStep() {
    if (_currentStep < widget.recipe.steps.length - 1) {
      setState(() {
        _currentStep++;
      });
    } else {
      _completeLearning();
    }
  }

  void _restartStep() {
    setState(() {
      // 重置当前步骤
    });
  }

  void _completeLearning() {
    // 完成学习，计算得分，解锁成就
  }
}

5.3 步骤引导实现

dart 复制代码 
class StepGuideWidget extends StatelessWidget {
  final CookingStep step;
  final int currentStep;
  final int totalSteps;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Text('步骤 $currentStep/$totalSteps'),
                Spacer(),
                Text(step.type.emoji),
              ],
            ),
            SizedBox(height: 8),
            Text(
              step.title,
              style: Theme.of(context).textTheme.titleMedium,
            ),
            SizedBox(height: 8),
            Text(step.description),
            if (step.tips.isNotEmpty) ...[
              SizedBox(height: 12),
              Text('💡 小贴士:'),
              ...step.tips.map((tip) => Text('• $tip')),
            ],
          ],
        ),
      ),
    );
  }
}

5.4 成就系统实现

dart 复制代码 
class AchievementSystem {
  static List<Achievement> checkAchievements(LearningRecord record) {
    final achievements = <Achievement>[];
    
    // 检查学习数量成就
    if (record.totalRecipes >= 10) {
      achievements.add(Achievement(
        id: 'first_10',
        name: '厨艺新手',
        description: '完成10道菜品的学习',
      ));
    }
    
    // 检查菜系成就
    if (record.completedCuisines.contains(CuisineType.sichuan) &&
        record.completedCuisines.contains(CuisineType.cantonese)) {
      achievements.add(Achievement(
        id: 'multi_cuisine',
        name: '多元美食家',
        description: '完成两种不同菜系的学习',
      ));
    }
    
    return achievements;
  }
}

5.5 学习记录保存实现

dart 复制代码 
class LearningManager {
  static Future<void> saveLearningRecord(LearningRecord record) async {
    final prefs = await SharedPreferences.getInstance();
    final records = prefs.getStringList('learning_records') ?? [];
    
    records.add(jsonEncode(record.toJson()));
    await prefs.setStringList('learning_records', records);
  }

  static Future<List<LearningRecord>> getLearningRecords() async {
    final prefs = await SharedPreferences.getInstance();
    final records = prefs.getStringList('learning_records') ?? [];
    
    return records
        .map((r) => LearningRecord.fromJson(jsonDecode(r)))
        .toList();
  }
}

六、交互设计

6.1 菜谱浏览流程

详情页 筛选器 菜谱页 用户 详情页 筛选器 菜谱页 用户 打开应用 加载分类 显示分类选项 选择菜系 筛选菜谱 显示筛选结果 点击菜谱 打开详情 显示菜谱详情

6.2 AR学习流程

是
否
是
否
是
否
开始学习
加载AR场景
显示第一步
AR虚拟指导
用户操作
操作完成?
下一步
选择重来?
最后一步?
完成学习
计算得分
解锁成就
保存记录

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 2024-04-07 基础UI框架 菜谱管理功能 AR基础功能 步骤引导优化 成就系统完善 社交分享功能 AI智能推荐 语音指导 多人协作学习 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 AR厨艺教学应用开发计划

7.2 功能扩展建议

7.2.1 AI智能推荐

AI功能：

  • 根据学习记录推荐菜谱
  • 智能调整难度等级
  • 个性化学习路径
  • 食材搭配建议
7.2.2 语音指导

语音功能：

  • 语音步骤播报
  • 语音控制操作
  • 实时语音反馈
  • 多语言支持
7.2.3 社交功能

社交功能：

  • 学习成果分享
  • 好友排行榜
  • 厨艺挑战赛
  • 美食社区

八、注意事项

8.1 开发注意事项

  1. AR性能优化：AR场景需优化渲染性能，避免卡顿

  2. 设备兼容性：需检测设备是否支持AR功能

  3. 光线要求：AR识别需要良好的光线环境

  4. 数据存储：学习记录需及时保存，避免丢失

  5. 用户体验：步骤引导需清晰易懂，避免用户困惑

8.2 常见问题

问题 原因 解决方案
AR无法启动 设备不支持 提示用户设备要求
识别失败 光线不足 引导用户调整光线
步骤卡住 操作未识别 提供手动跳过选项
数据丢失 未及时保存 增加自动保存机制
成就未解锁 条件未满足 明确显示解锁条件

8.3 使用技巧

🍳 AR厨艺学习技巧 🍳

准备工作

  • 确保设备支持AR功能
  • 选择光线充足的环境
  • 准备好所需食材和工具
  • 保持操作台面整洁

学习建议

  • 从入门级菜品开始
  • 认真观看AR指导
  • 失败了不要气馁，可以重来
  • 多练习，熟能生巧

技巧提升

  • 注意火候控制
  • 掌握调味比例
  • 学习摆盘技巧
  • 总结经验教训

成就攻略

  • 完成各类菜品学习
  • 坚持每日学习打卡
  • 尝试不同菜系
  • 挑战高难度菜品

九、运行说明

9.1 环境要求

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

9.2 运行命令

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

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

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

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

十、总结

AR厨艺教学应用通过菜谱浏览、AR教学、学习记录、个人中心四大模块，为用户提供了一个沉浸式的烹饪学习平台。应用支持AR虚拟指导、分步骤教学、失败重来、成就系统等功能，让新手也能轻松变大厨。

核心功能涵盖菜谱管理、AR教学、步骤引导、成就系统四大模块。菜谱管理支持多种菜系分类和难度等级；AR教学通过增强现实技术提供沉浸式学习体验；步骤引导清晰展示每个操作步骤；成就系统激励用户持续学习。

应用采用 Material Design 3 设计规范，以温暖的橙色为主色调，象征美食与热情。通过本应用，希望能够帮助用户轻松学习烹饪技巧，享受烹饪乐趣，成为真正的厨艺大师。

AR厨艺教学------新手也能变大厨

相关推荐
fengci.2 小时前
php反序列化(复习)(第四章)
android·开发语言·学习·php·android studio
XiaoLeisj2 小时前
Android 短视频项目首页开发实战：从广场页广告轮播与网格列表，到发现页分类、播单与话题广场的数据驱动实现
android·okhttp·mvvm·recyclerview·retrofit·databinding·xbanner 轮播
想你依然心痛2 小时前
HarmonyOS 5.0企业级开发实战：构建元服务驱动的智能协同办公套件
华为·harmonyos
whatever who cares2 小时前
android中，全局管理数据/固定数据要不要放一起？
android·java·开发语言
2401_839633912 小时前
Flutter 框架跨平台鸿蒙开发 - 家庭食谱传承系统
flutter·华为·harmonyos
世人万千丶2 小时前
开源鸿蒙跨平台Flutter开发：步数统计应用
学习·flutter·华为·开源·harmonyos·鸿蒙
红目香薰2 小时前
Ascend C 算子：Sigmoid 函数原理深入解析与工程化构建及验证
c语言·开发语言·华为·华为云·昇腾·cann·modelarts
空中海2 小时前
2.5 手势识别与交互系统
flutter·交互·dart
冬奇Lab2 小时前
MediaCodec 编解码基础：Buffer 队列、状态机与零拷贝的艺术
android·音视频开发·源码阅读
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了06VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）07MySQL表约束详解：8大核心约束实战指南08Oh My Codex 快速使用指南09CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南10UV安装并设置国内源