Flutter 框架跨平台鸿蒙开发 - 智能厨房配菜助手应用

浮芷.2026-04-10 17:48

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

一、项目概述

运行效果图

1.1 应用简介

智能厨房配菜助手是一款智能家居应用，根据冰箱里的食材推荐菜谱，自动生成购物清单，还能教你一步一步做菜。应用涵盖食材管理、菜谱推荐、购物清单、烹饪指导等功能，让厨房生活变得轻松有趣。

应用以温暖的橙色为主色调，象征美食与家的温馨。涵盖冰箱管理、菜谱推荐、购物清单、关于信息四大模块。用户可以管理食材、浏览菜谱、生成购物清单、跟着步骤做菜，享受智能厨房带来的便利。

1.2 核心功能

功能模块 功能描述 实现方式
食材管理 冰箱食材录入管理 列表存储
菜谱推荐 根据食材推荐菜谱 匹配算法
烹饪指导 步骤式做菜教程 分步展示
购物清单 自动生成购物清单 列表管理
过期提醒 食材过期预警 日期判断
分类统计 食材分类统计展示 图表展示

1.3 食材分类定义

序号 分类名称 Emoji 颜色 描述
1 蔬菜 🥬 #4CAF50 新鲜蔬菜
2 肉类 🥩 #F44336 禽畜肉类
3 海鲜 🦐 #2196F3 鱼虾海鲜
4 水果 🍎 #FF9800 新鲜水果
5 乳制品 🧀 #FFEB3B 牛奶芝士
6 谷物 🌾 #8D6E63 米面杂粮
7 调味料 🧂 #9E9E9E 油盐酱醋
8 其他 📦 #607D8B 其他食材

1.4 菜谱难度定义

序号 难度名称 Emoji 时间(分钟) 描述
1 简单 ⭐ 15 快手菜
2 中等 ⭐⭐ 30 常规菜
3 困难 ⭐⭐⭐ 60 硬菜大菜

1.5 菜谱分类定义

序号 分类名称 Emoji 描述
1 中式家常 🥘 经典家常菜
2 西式料理 🍝 意面牛排等
3 日式料理 🍣 寿司拉面等
4 韩式料理 🥢 泡菜烤肉等
5 甜点烘焙 🍰 蛋糕饼干等
6 汤羹粥品 🍲 汤粥类

1.6 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
状态管理 StatefulWidget -
数据存储 内存列表 -
目标平台 鸿蒙OS / Web API 21+

1.7 项目结构

复制代码 
lib/
└── main_smart_kitchen_assistant.dart
    ├── SmartKitchenAssistantApp      # 应用入口
    ├── IngredientCategory            # 食材分类枚举
    ├── RecipeDifficulty              # 菜谱难度枚举
    ├── RecipeCategory                # 菜谱分类枚举
    ├── Ingredient                    # 食材模型
    ├── Recipe                        # 菜谱模型
    ├── ShoppingItem                  # 购物项模型
    ├── SmartKitchenAssistantHomePage # 主页面（底部导航）
    ├── _buildFridgePage              # 冰箱页面
    ├── _buildRecipesPage             # 菜谱页面
    ├── _buildShoppingPage            # 购物页面
    └── _buildProfilePage             # 关于页面

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

SmartKitchenAssistantHomePage
冰箱页
菜谱页
购物页
关于页
食材列表
分类统计
过期提醒
添加食材
菜谱列表
菜谱详情
烹饪步骤
购物清单
购买状态
添加购物项
功能说明
使用技巧
食材管理器

IngredientManager
菜谱推荐器

RecipeRecommender
购物管理器

ShoppingManager
Ingredient

食材模型
Recipe

菜谱模型
ShoppingItem

购物项模型
IngredientCategory

食材分类

2.2 类图设计

has
has
has
has
SmartKitchenAssistantApp
+Widget build()
<<enumeration>>
IngredientCategory
+String label
+String emoji
+Color color
+vegetable()
+meat()
+seafood()
+fruit()
+dairy()
+grain()
+spice()
+other()
<<enumeration>>
RecipeDifficulty
+String label
+String emoji
+int time
+easy()
+medium()
+hard()
<<enumeration>>
RecipeCategory
+String label
+String emoji
+chinese()
+western()
+japanese()
+korean()
+dessert()
+soup()
Ingredient
+String id
+String name
+IngredientCategory category
+double quantity
+String unit
+DateTime? expiryDate
+DateTime addedAt
+getIsExpiringSoon()
Recipe
+String id
+String name
+RecipeCategory category
+RecipeDifficulty difficulty
+String description
+List<String> ingredients
+List<String> steps
+int cookTime
+int servings
+double rating
ShoppingItem
+String id
+String name
+IngredientCategory category
+double quantity
+String unit
+bool isPurchased
+DateTime addedAt

2.3 页面导航流程

冰箱
菜谱
购物
关于
应用启动
冰箱页
底部导航
食材管理
菜谱推荐
购物清单
应用信息
添加食材
查看过期
选择菜谱
查看详情
开始烹饪
步骤指导
添加购物项
标记购买

2.4 烹饪指导流程

步骤区 详情卡 菜谱页 用户 步骤区 详情卡 菜谱页 用户 loop [每个步骤] 选择菜谱 显示详情 点击开始烹饪 显示第一步 显示当前步骤 点击下一步 更新步骤 显示完成提示

三、核心模块设计

3.1 数据模型设计

3.1.1 食材分类枚举 (IngredientCategory)
dart 复制代码 
enum IngredientCategory {
  vegetable(label: '蔬菜', emoji: '🥬', color: Color(0xFF4CAF50)),
  meat(label: '肉类', emoji: '🥩', color: Color(0xFFF44336)),
  seafood(label: '海鲜', emoji: '🦐', color: Color(0xFF2196F3)),
  fruit(label: '水果', emoji: '🍎', color: Color(0xFFFF9800)),
  dairy(label: '乳制品', emoji: '🧀', color: Color(0xFFFFEB3B)),
  grain(label: '谷物', emoji: '🌾', color: Color(0xFF8D6E63)),
  spice(label: '调味料', emoji: '🧂', color: Color(0xFF9E9E9E)),
  other(label: '其他', emoji: '📦', color: Color(0xFF607D8B));

  final String label;
  final String emoji;
  final Color color;
}
3.1.2 菜谱难度枚举 (RecipeDifficulty)
dart 复制代码 
enum RecipeDifficulty {
  easy(label: '简单', emoji: '⭐', time: 15),
  medium(label: '中等', emoji: '⭐⭐', time: 30),
  hard(label: '困难', emoji: '⭐⭐⭐', time: 60);

  final String label;
  final String emoji;
  final int time;
}
3.1.3 食材模型 (Ingredient)
dart 复制代码 
class Ingredient {
  final String id;                    // 食材ID
  final String name;                  // 食材名称
  final IngredientCategory category;  // 食材分类
  final double quantity;              // 数量
  final String unit;                  // 单位
  final DateTime? expiryDate;         // 过期日期
  final DateTime addedAt;             // 添加时间

  bool get isExpiringSoon => expiryDate != null &&
      expiryDate!.difference(DateTime.now()).inDays <= 3;
}
3.1.4 菜谱模型 (Recipe)
dart 复制代码 
class Recipe {
  final String id;                    // 菜谱ID
  final String name;                  // 菜谱名称
  final RecipeCategory category;      // 菜谱分类
  final RecipeDifficulty difficulty;  // 难度等级
  final String description;           // 菜谱描述
  final List<String> ingredients;     // 所需食材
  final List<String> steps;           // 制作步骤
  final int cookTime;                 // 烹饪时间
  final int servings;                 // 份量
  final double rating;                // 评分
}
3.1.5 食材分类分布

30% 20% 15% 12% 10% 8% 3% 2% 食材分类分布示例 蔬菜 肉类 谷物 调味料 水果 乳制品 海鲜 其他

3.2 页面结构设计

3.2.1 主页面布局

SmartKitchenAssistantHomePage
IndexedStack
冰箱页
菜谱页
购物页
关于页
NavigationBar
冰箱 Tab
菜谱 Tab
购物 Tab
关于 Tab

3.2.2 冰箱页结构

冰箱页
SliverAppBar
快速统计
分类统计
过期提醒
食材列表
食材总数
即将过期
可做菜谱
分类标签
数量统计
过期食材卡片
食材卡片
分类图标
名称数量
过期日期

3.2.3 菜谱页结构

菜谱页
SliverAppBar
烹饪步骤
菜谱详情
菜谱列表
步骤进度
步骤内容
上下步按钮
菜谱信息
食材列表
开始按钮
菜谱卡片
分类图标
难度评分

3.2.4 购物页结构

购物页
SliverAppBar
购买进度
购物清单
已购买数
总数
购物项卡片
分类图标
名称数量
购买勾选

3.3 烹饪指导逻辑

下一步
是
否
上一步
是
否
选择菜谱
显示菜谱详情
点击开始烹饪
初始化步骤索引
显示当前步骤
用户操作
还有下一步?
步骤索引+1
显示完成
不是第一步?
步骤索引-1

3.4 购物清单逻辑

是
否
点击添加购物项
显示添加对话框
输入商品信息
选择分类
确认添加?
创建购物项
添加到清单
显示成功提示
取消添加
点击勾选
切换购买状态
更新进度统计

四、UI设计规范

4.1 配色方案

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

颜色类型 色值 用途
主色 #FF5722 (Deep Orange) 导航、主题元素
辅助色 #FF7043 菜谱页面
第三色 #FF8A65 购物页面
强调色 #FFAB91 关于页面
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 食材卡片

4.2 食材分类颜色

分类 色值 视觉效果
蔬菜 #4CAF50 绿色新鲜
肉类 #F44336 红色肉类
海鲜 #2196F3 蓝色海洋
水果 #FF9800 橙色果香
乳制品 #FFEB3B 黄色奶香
谷物 #8D6E63 棕色谷物

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
食材名称 16px Regular #000000
菜谱名称 16px Bold #000000
步骤文字 16px Regular #000000
统计数字 20px Bold 白色

4.4 组件规范

4.4.1 食材卡片
复制代码 
┌─────────────────────────────────────┐
│  🥬 西红柿                          │
│     3 个 · 过期: 5/20               │
└─────────────────────────────────────┘
4.4.2 菜谱卡片
复制代码 
┌─────────────────────────────────────┐
│  🥘 西红柿炒鸡蛋              ⭐4.8 │
│     中式家常 · 15分钟 · 2人份  [⭐]  │
│                                     │
│  经典家常菜，酸甜可口，营养丰富    │
└─────────────────────────────────────┘
4.4.3 烹饪步骤卡片
复制代码 
┌─────────────────────────────────────┐
│  步骤 1/6          [西红柿炒鸡蛋]   │
│  ████████░░░░░░░░░░░░░░░░░░░░░░░░  │
│                                     │
│  ┌─────────────────────────────┐   │
│  │ 西红柿洗净切块，鸡蛋打散加  │   │
│  │ 少许盐                      │   │
│  └─────────────────────────────┘   │
│                                     │
│  [← 上一步]          [下一步 →]    │
└─────────────────────────────────────┘
4.4.4 购物项卡片
复制代码 
┌─────────────────────────────────────┐
│  🥬 胡萝卜                    [✓]  │
│     2 根                            │
└─────────────────────────────────────┘
4.4.5 分类统计标签
复制代码 
┌─────────────────────────────────────┐
│  🥬 蔬菜 [8]  🥩 肉类 [3]  🦐 海鲜 [1] │
│  🍎 水果 [2]  🧀 乳制品 [1]  🌾 谷物 [2]│
└─────────────────────────────────────┘

五、核心功能实现

5.1 食材添加实现

dart 复制代码 
void _addIngredient(String name, IngredientCategory category, 
    double quantity, String unit, DateTime? expiryDate) {
  final ingredient = Ingredient(
    id: 'ing_${DateTime.now().millisecondsSinceEpoch}',
    name: name,
    category: category,
    quantity: quantity,
    unit: unit,
    expiryDate: expiryDate,
  );

  setState(() {
    _ingredients.insert(0, ingredient);
  });
}

5.2 菜谱选择实现

dart 复制代码 
void _selectRecipe(Recipe recipe) {
  setState(() {
    _currentRecipe = recipe;
    _currentStep = 0;
    _isCooking = false;
  });
}

5.3 烹饪步骤实现

dart 复制代码 
void _nextStep() {
  if (_currentRecipe == null) return;

  if (_currentStep < _currentRecipe!.steps.length - 1) {
    setState(() {
      _currentStep++;
    });
  } else {
    setState(() {
      _isCooking = false;
    });
    // 显示完成提示
  }
}

void _prevStep() {
  if (_currentStep > 0) {
    setState(() {
      _currentStep--;
    });
  }
}

5.4 购物清单实现

dart 复制代码 
void _addToShoppingList(String name, IngredientCategory category, 
    double quantity, String unit) {
  final item = ShoppingItem(
    id: 'shop_${DateTime.now().millisecondsSinceEpoch}',
    name: name,
    category: category,
    quantity: quantity,
    unit: unit,
  );

  setState(() {
    _shoppingList.add(item);
  });
}

void _toggleShoppingItem(ShoppingItem item) {
  final index = _shoppingList.indexWhere((i) => i.id == item.id);
  if (index != -1) {
    setState(() {
      _shoppingList[index] = ShoppingItem(
        // ... 复制属性并切换isPurchased
        isPurchased: !item.isPurchased,
      );
    });
  }
}

5.5 过期提醒实现

dart 复制代码 
bool get isExpiringSoon => expiryDate != null &&
    expiryDate!.difference(DateTime.now()).inDays <= 3;

六、交互设计

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框架 食材管理功能 菜谱推荐功能 智能推荐算法 语音烹饪指导 营养分析功能 智能冰箱对接 社区分享功能 视频教程集成 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 智能厨房配菜助手应用开发计划

7.2 功能扩展建议

7.2.1 智能推荐

推荐功能：

  • 基于食材推荐菜谱
  • 基于口味偏好推荐
  • 基于营养需求推荐
  • 基于季节时令推荐
7.2.2 语音指导

语音功能：

  • 语音播报步骤
  • 语音控制翻页
  • 定时提醒功能
  • 背景音乐播放
7.2.3 社区功能

社交功能：

  • 菜谱分享
  • 作品展示
  • 评论互动
  • 关注收藏

八、注意事项

8.1 开发注意事项

  1. 数据同步：食材状态需正确更新

  2. 过期判断：日期计算需考虑时区

  3. 状态管理：烹饪步骤需正确切换

  4. 用户体验：提供清晰的操作引导

  5. 性能优化：大量数据需分页加载

8.2 常见问题

问题 原因 解决方案
食材不显示 列表未更新 检查setState
步骤不切换 索引错误 检查边界条件
过期判断错误 日期格式问题 统一日期格式
购物项重复 未去重检查 添加重复检测
分类统计错误 过滤条件错误 检查where条件

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_smart_kitchen_assistant.dart --web-port 8145

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

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

十、总结

智能厨房配菜助手应用通过冰箱管理、菜谱推荐、购物清单、关于信息四大模块，为用户提供了一个便捷的厨房管理平台。应用支持8种食材分类、3种难度等级、6种菜谱分类，让厨房生活变得轻松有趣。

核心功能涵盖食材管理、菜谱推荐、烹饪指导、购物清单四大模块。食材分类从蔬菜到调味料，覆盖厨房常见食材；菜谱难度从简单到困难，满足不同烹饪水平；烹饪步骤从准备到完成，一步步指导做菜。

应用采用 Material Design 3 设计规范，以温暖的橙色为主色调，象征美食与家的温馨。通过本应用，希望能够帮助用户更好地管理厨房，享受烹饪的乐趣，让每一餐都充满幸福感。

智能厨房配菜助手------让烹饪变得简单有趣

相关推荐
fengci.2 小时前
php反序列化(复习)(第三章)
android·开发语言·学习·php
mutian.wang2 小时前
seata 配置demo
学习
jian110582 小时前
flutter 跟换SDK版本
flutter
autumn20052 小时前
Flutter 框架跨平台鸿蒙开发 - 家庭能源可视化
flutter·华为·能源·harmonyos
CHU7290352 小时前
知识触手可及：在线教学课堂APP的沉浸式学习体验
前端·学习·小程序
Jackyzhe3 小时前
从零学习Kafka：位移与高水位
分布式·学习·kafka
Utopia^3 小时前
Flutter 框架跨平台鸿蒙开发 - 植物识别科普
flutter·华为·harmonyos
星幻元宇VR3 小时前
VR漫游舱：让安全教育不再枯燥
科技·学习·安全·生活·vr
世人万千丶3 小时前
Flutter 框架跨平台鸿蒙开发 - 气味图书馆应用
学习·flutter·华为·开源·harmonyos·鸿蒙
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05Oh My Codex 快速使用指南06CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南07VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）08Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）09UV安装并设置国内源10MySQL表约束详解：8大核心约束实战指南