Flutter 框架跨平台鸿蒙开发 - 智能厨房配菜助手应用
智能厨房配菜助手应用简介 一款基于Flutter开发的跨平台智能厨房应用,提供食材管理、菜谱推荐、购物清单和烹饪指导等功能。核心特点: 智能推荐:根据冰箱食材自动匹配菜谱 分类管理:8类食材、6种菜系、3级难度划分 实用功能:过期提醒、购物清单生成、分步烹饪指导 技术架构:采用Material Design 3规范,支持鸿蒙OS/Web平台 应用以温暖橙色为主色调,通过直观的emoji图标和分类系
欢迎加入开源鸿蒙跨平台社区:
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 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 烹饪指导流程
三、核心模块设计
3.1 数据模型设计
3.1.1 食材分类枚举 (IngredientCategory)
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)
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)
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)
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 食材分类分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 冰箱页结构
3.2.3 菜谱页结构
3.2.4 购物页结构
3.3 烹饪指导逻辑
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 食材添加实现
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 菜谱选择实现
void _selectRecipe(Recipe recipe) {
setState(() {
_currentRecipe = recipe;
_currentStep = 0;
_isCooking = false;
});
}
5.3 烹饪步骤实现
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 购物清单实现
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 过期提醒实现
bool get isExpiringSoon => expiryDate != null &&
expiryDate!.difference(DateTime.now()).inDays <= 3;
六、交互设计
6.1 食材管理流程
6.2 烹饪指导流程
6.3 购物管理流程
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 智能推荐
推荐功能:
- 基于食材推荐菜谱
- 基于口味偏好推荐
- 基于营养需求推荐
- 基于季节时令推荐
7.2.2 语音指导
语音功能:
- 语音播报步骤
- 语音控制翻页
- 定时提醒功能
- 背景音乐播放
7.2.3 社区功能
社交功能:
- 菜谱分享
- 作品展示
- 评论互动
- 关注收藏
八、注意事项
8.1 开发注意事项
-
数据同步:食材状态需正确更新
-
过期判断:日期计算需考虑时区
-
状态管理:烹饪步骤需正确切换
-
用户体验:提供清晰的操作引导
-
性能优化:大量数据需分页加载
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 运行命令
# 查看可用设备
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 设计规范,以温暖的橙色为主色调,象征美食与家的温馨。通过本应用,希望能够帮助用户更好地管理厨房,享受烹饪的乐趣,让每一餐都充满幸福感。
智能厨房配菜助手——让烹饪变得简单有趣
更多推荐




所有评论(0)