Flutter 框架跨平台鸿蒙开发 - 儿童技能打卡墙应用
摘要： 儿童技能打卡墙是一款基于Flutter开发的亲子教育应用，采用游戏化设计理念将学习任务转化为趣味挑战。核心功能包括： 六大技能分类（生活、学习、运动等）的任务管理 打卡积分系统与徽章成就体系（铜牌至钻石四个等级） 积分兑换奖励机制 连续打卡激励功能 技术实现采用Flutter框架+Dart语言，支持鸿蒙OS/Web平台，应用Material Design 3设计规范。数据模型包含技能任务、
·
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
儿童技能打卡墙是一款创新的亲子教育应用，核心理念是"把学习变成闯关游戏"。通过游戏化的设计理念，将传统的技能学习任务转化为有趣的挑战关卡，配合成就徽章和奖励机制，让孩子在游戏中学习，在学习中成长。
传统的技能学习往往枯燥乏味，孩子容易产生抵触情绪。本应用借鉴游戏设计的核心元素——目标设定、进度反馈、成就解锁、奖励兑换，将学习过程游戏化，激发孩子的内在动力，培养自主学习能力和良好习惯。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 技能任务 | 创建和管理技能学习任务 | 分类管理 + 进度追踪 |
| 打卡系统 | 每日打卡记录学习进度 | 一键打卡 + 积分奖励 |
| 积分系统 | 完成任务获得积分奖励 | 积分计算 + 等级评定 |
| 成就徽章 | 解锁成就获得徽章 | 条件判断 + 徽章展示 |
| 奖励商店 | 积分兑换奖励 | 积分消耗 + 奖励兑换 |
| 连续打卡 | 记录连续打卡天数 | 日期计算 + 连续统计 |
1.3 技能分类
| 序号 | 类别 | Emoji | 颜色 | 典型技能 |
|---|---|---|---|---|
| 1 | 生活技能 | 🏠 | #4CAF50 | 整理房间、做家务 |
| 2 | 学习技能 | 📚 | #2196F3 | 阅读、写字、算术 |
| 3 | 运动技能 | ⚽ | #FF9800 | 跳绳、跑步、游泳 |
| 4 | 艺术技能 | 🎨 | #E91E63 | 画画、音乐、舞蹈 |
| 5 | 社交技能 | 👥 | #9C27B0 | 礼貌用语、分享合作 |
| 6 | 自理技能 | 🧒 | #00BCD4 | 刷牙、穿衣、吃饭 |
1.4 徽章等级
| 序号 | 等级 | Emoji | 所需积分 | 颜色 |
|---|---|---|---|---|
| 1 | 铜牌 | 🥉 | 10 | #CD7F32 |
| 2 | 银牌 | 🥈 | 30 | #C0C0C0 |
| 3 | 金牌 | 🥇 | 60 | #FFD700 |
| 4 | 钻石 | 💎 | 100 | #00CED1 |
1.5 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 动画控制 | AnimationController | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
二、项目结构
lib/
├── main_skill_checkin.dart # 应用主入口
│ ├── SkillCheckInApp # 根应用组件
│ ├── SkillCategory # 技能分类枚举
│ ├── BadgeLevel # 徽章等级枚举
│ ├── SkillTask # 技能任务模型
│ ├── Achievement # 成就模型
│ ├── Reward # 奖励模型
│ └── SkillCheckInHomePage # 主页面
三、数据模型
3.1 SkillCategory 枚举
enum SkillCategory {
life('生活技能', '🏠', Color(0xFF4CAF50)),
study('学习技能', '📚', Color(0xFF2196F3)),
sport('运动技能', '⚽', Color(0xFFFF9800)),
art('艺术技能', '🎨', Color(0xFFE91E63)),
social('社交技能', '👥', Color(0xFF9C27B0)),
selfCare('自理技能', '🧒', Color(0xFF00BCD4));
final String label;
final String emoji;
final Color color;
}
3.2 BadgeLevel 枚举
enum BadgeLevel {
bronze('铜牌', '🥉', 10, Color(0xFFCD7F32)),
silver('银牌', '🥈', 30, Color(0xFFC0C0C0)),
gold('金牌', '🥇', 60, Color(0xFFFFD700)),
diamond('钻石', '💎', 100, Color(0xFF00CED1));
final String label;
final String emoji;
final int requiredPoints;
final Color color;
static BadgeLevel fromPoints(int points) {
if (points >= 100) return BadgeLevel.diamond;
if (points >= 60) return BadgeLevel.gold;
if (points >= 30) return BadgeLevel.silver;
return BadgeLevel.bronze;
}
}
3.3 SkillTask 模型
class SkillTask {
final String id; // 任务唯一标识
final String title; // 任务标题
final SkillCategory category; // 技能类别
final int points; // 完成积分
final IconData icon; // 任务图标
final String description; // 任务描述
final int targetCount; // 目标次数
final int completedCount; // 已完成次数
final List<String> completedDates; // 完成日期列表
bool get isCompleted => completedCount >= targetCount;
double get progress => completedCount / targetCount;
}
3.4 Achievement 模型
class Achievement {
final String id; // 成就唯一标识
final String title; // 成就标题
final String description; // 成就描述
final String emoji; // 成就emoji
final int requiredCount; // 所需完成数
final Color color; // 成就颜色
final bool isUnlocked; // 是否解锁
final DateTime? unlockedAt; // 解锁时间
}
3.5 Reward 模型
class Reward {
final String id; // 奖励唯一标识
final String title; // 奖励标题
final String description; // 奖励描述
final String emoji; // 奖励emoji
final int requiredPoints; // 所需积分
final bool isClaimed; // 是否已兑换
}
四、核心功能实现
4.1 打卡流程
4.2 积分计算逻辑
void _checkInTask(SkillTask task) {
if (task.isCompleted) return;
setState(() {
final index = _tasks.indexWhere((t) => t.id == task.id);
if (index != -1) {
_tasks[index] = SkillTask(
id: task.id,
title: task.title,
category: task.category,
points: task.points,
icon: task.icon,
description: task.description,
targetCount: task.targetCount,
completedCount: task.completedCount + 1,
completedDates: [...task.completedDates, _formatDate(DateTime.now())],
);
_totalPoints += task.points;
}
});
}
4.3 徽章等级判定
static BadgeLevel fromPoints(int points) {
if (points >= 100) return BadgeLevel.diamond;
if (points >= 60) return BadgeLevel.gold;
if (points >= 30) return BadgeLevel.silver;
return BadgeLevel.bronze;
}
4.4 奖励兑换流程
4.5 连续打卡统计
Widget _buildStreakCard() {
Row(
children: List.generate(7, (index) {
final isCompleted = index < _streakDays % 7 || (_streakDays >= 7 && index < 7);
return Container(
margin: const EdgeInsets.only(left: 4),
width: 24,
height: 24,
decoration: BoxDecoration(
color: isCompleted ? Colors.orange : Colors.grey.shade200,
shape: BoxShape.circle,
),
child: Center(
child: isCompleted
? const Icon(Icons.check, size: 14, color: Colors.white)
: Text('${index + 1}', style: TextStyle(fontSize: 10)),
),
);
}),
);
}
五、界面设计
5.1 主页面布局
┌─────────────────────────────────────┐
│ 🎮 儿童技能打卡墙 │
│ 让学习像玩游戏一样有趣 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 我的积分 🥈银牌 │ │
│ │ 45 分 │ │
│ │ ───────────────────────── │ │
│ │ 已完成 进行中 徽章 │ │
│ │ 1个 5个 3个 │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ 🔥 连续打卡 7 天 太棒了! │
│ ● ● ● ● ● ● ● │
├─────────────────────────────────────┤
│ 今日进度 1/6 │
│ ████████░░░░░░░░░░░░ │
├─────────────────────────────────────┤
│ 快速打卡 查看全部│
│ ┌─────┐┌─────┐┌─────┐┌─────┐ │
│ │ 🪥 ││ 🧸 ││ 📖 ││ 🏃 │ │
│ │自己 ││整理 ││阅读 ││跳绳 │ │
│ │刷牙 ││玩具 ││绘本 ││练习 │ │
│ │+5分 ││+5分 ││+10分││+8分 │ │
│ └─────┘└─────┘└─────┘└─────┘ │
├─────────────────────────────────────┤
│ 我的徽章 3/5 │
│ 🌟 ⭐ 🔥 🔒 🔒 │
└─────────────────────────────────────┘
5.2 任务页面布局
┌─────────────────────────────────────┐
│ 技能任务 6个任务│
├─────────────────────────────────────┤
│ 🏠 生活技能 │
│ ┌─────────────────────────────┐ │
│ │ 🧸 整理玩具 +5分 ➕ │ │
│ │ 玩完后把玩具放回原位 │ │
│ │ ████████░░ 5/7 │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ 📚 学习技能 │
│ ┌─────────────────────────────┐ │
│ │ 📖 阅读绘本 +10分 ✓ │ │
│ │ 每天阅读一本绘本 │ │
│ │ ██████████ 7/7 已完成 │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ ⚽ 运动技能 │
│ ┌─────────────────────────────┐ │
│ │ 🏃 跳绳练习 +8分 ➕ │ │
│ │ 每天跳绳50下 │ │
│ │ ████░░░░░░ 3/7 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
5.3 成就页面布局
┌─────────────────────────────────────┐
│ 成就徽章 3/5 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 🌟 ⭐ 🔥 🔒 🔒 │ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 🌱 初出茅庐 已解锁 │ │
│ │ 完成第一个任务 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 🔥 坚持不懈 已解锁 │ │
│ │ 连续打卡7天 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ ⭐ 小能手 已解锁 │ │
│ │ 完成10个任务 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 🔒 全能冠军 │ │
│ │ 完成所有类别任务 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
5.4 奖励页面布局
┌─────────────────────────────────────┐
│ 奖励商店 ⭐ 45 积分 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 🍽️ 选择晚餐 已兑换 │ │
│ │ 可以决定今晚吃什么 │ │
│ │ ⭐ 20 积分 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 📖 额外故事时间 [兑换] │ │
│ │ 多听一个睡前故事 │ │
│ │ ⭐ 30 积分 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 🎢 周末出游 [兑换] │ │
│ │ 选择一个周末出游地点 │ │
│ │ ⭐ 50 积分 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ 🎁 小礼物 [兑换] │ │
│ │ 获得一个小礼物 │ │
│ │ ⭐ 80 积分 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
六、动画效果
6.1 图标脉冲动画
_pulseController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1500),
)..repeat(reverse: true);
AnimatedBuilder(
animation: _pulseController,
builder: (context, child) {
return Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red.withValues(
alpha: 0.3 + _pulseController.value * 0.2
),
blurRadius: 10 + _pulseController.value * 5,
),
],
),
);
},
)
七、运行与调试
7.1 运行命令
# 运行到鸿蒙设备
flutter run -d harmony lib/main_skill_checkin.dart
# 运行到Web服务器
flutter run -d web-server -t lib/main_skill_checkin.dart --web-port 8132
# 运行到Windows
flutter run -d windows -t lib/main_skill_checkin.dart
# 代码分析
flutter analyze lib/main_skill_checkin.dart
7.2 功能测试清单
| 测试项 | 测试内容 | 预期结果 |
|---|---|---|
| 任务打卡 | 点击打卡按钮 | 积分正确增加 |
| 进度显示 | 查看任务进度 | 进度条正确显示 |
| 成就解锁 | 完成成就条件 | 徽章正确解锁 |
| 奖励兑换 | 兑换奖励 | 积分正确扣除 |
| 连续打卡 | 查看连续天数 | 天数正确统计 |
| 徽章等级 | 查看徽章等级 | 等级正确判定 |
八、扩展方向
8.1 后端集成
┌─────────────┐ HTTPS ┌─────────────┐
│ 客户端 │ ←─────────────→ │ 服务器 │
└─────────────┘ └─────────────┘
│ │
│ 任务数据同步 │
│ 用户认证 │
│ 家庭成员管理 │
│ 排行榜系统 │
↓ ↓
┌─────────────┐ ┌─────────────┐
│ 本地存储 │ │ 云端数据库 │
└─────────────┘ └─────────────┘
8.2 功能扩展计划
| 版本 | 功能 | 描述 |
|---|---|---|
| v1.1 | 数据持久化 | 本地数据库存储 |
| v1.2 | 家庭成员 | 多个孩子管理 |
| v1.3 | 自定义任务 | 家长自定义任务 |
| v1.4 | 排行榜 | 家庭成员排行 |
| v1.5 | 提醒功能 | 打卡提醒通知 |
8.3 高级功能
九、使用场景
9.1 典型使用场景
🎮 儿童技能打卡墙使用场景 🎮
| 场景 | 描述 | 使用频率 |
|---|---|---|
| 日常打卡 | 完成每日技能任务 | 每日多次 |
| 成就查看 | 查看已解锁的成就 | 每周一次 |
| 奖励兑换 | 用积分兑换奖励 | 不定期 |
| 进度回顾 | 查看学习进度 | 每周一次 |
| 习惯养成 | 培养良好习惯 | 持续进行 |
9.2 使用建议
┌─────────────────────────────────────────────────────────┐
│ 使用建议 │
├─────────────────────────────────────────────────────────┤
│ │
│ 📝 任务设置 │
│ • 根据孩子年龄设置合适任务 │
│ • 任务难度要循序渐进 │
│ • 积分设置要合理 │
│ • 定期更新任务内容 │
│ │
│ 🎯 目标设定 │
│ • 设定短期和长期目标 │
│ • 目标要具体可衡量 │
│ • 及时给予正向反馈 │
│ • 适当增加挑战性 │
│ │
│ 🎁 奖励机制 │
│ • 奖励要有吸引力 │
│ • 积分门槛要合理 │
│ • 兑现承诺很重要 │
│ • 物质和精神奖励结合 │
│ │
└─────────────────────────────────────────────────────────┘
十、游戏化设计原理
10.1 游戏化核心要素
| 要素 | 说明 | 应用 |
|---|---|---|
| 目标 | 明确的目标设定 | 任务目标 |
| 反馈 | 即时的进度反馈 | 进度条、积分 |
| 挑战 | 适度的挑战难度 | 任务难度分级 |
| 奖励 | 完成后的奖励 | 积分、徽章、奖励 |
| 进度 | 可视化的进度 | 进度条、等级 |
10.2 激励机制设计
🎯 激励机制设计 🎯
内在激励
- 成就感：完成任务的自豪感
- 进步感：看到自己的成长
- 自主感：自己选择任务
- 胜任感：能力得到认可
外在激励
- 积分奖励：完成任务获得积分
- 徽章收集：解锁成就徽章
- 奖励兑换：积分兑换实物奖励
- 社交认可：分享成就获得认可
十一、教育心理学
11.1 行为塑造理论
┌─────────────────────────────────────────────────────────┐
│ 行为塑造理论 │
├─────────────────────────────────────────────────────────┤
│ │
│ 🎯 目标行为 │
│ • 将大目标分解为小步骤 │
│ • 每个小步骤都可以完成 │
│ • 逐步提高行为要求 │
│ │
│ ⭐ 正向强化 │
│ • 完成行为后给予奖励 │
│ • 奖励要及时和一致 │
│ • 逐步减少外在奖励 │
│ │
│ 📈 行为巩固 │
│ • 重复练习形成习惯 │
│ • 内化行为动机 │
│ • 建立自我监控能力 │
│ │
└─────────────────────────────────────────────────────────┘
11.2 自我决定理论
| 心理需求 | 满足方式 | 应用设计 |
|---|---|---|
| 自主性 | 自己选择 | 可选择任务 |
| 胜任感 | 能力提升 | 进度反馈 |
| 关联性 | 社交连接 | 成就分享 |
十二、总结
儿童技能打卡墙应用通过"把学习变成闯关游戏"的核心理念，为家长和孩子提供了一款创新的亲子教育工具。应用涵盖技能任务、打卡系统、积分系统、成就徽章、奖励商店、连续打卡六大核心功能，让孩子在游戏中学习，在学习中成长。
应用采用红色主题，象征热情与活力。主页面清晰展示积分卡片、连续打卡、今日进度、快速打卡和我的徽章。任务页面按技能分类展示所有任务，每个任务都显示进度条和积分奖励。成就页面展示所有成就徽章，已解锁的徽章显示彩色，未解锁的显示灰色锁定状态。奖励商店页面展示可兑换的奖励，孩子可以用积分兑换心仪的奖励。
技能分类涵盖生活技能、学习技能、运动技能、艺术技能、社交技能、自理技能六大类别，全面覆盖儿童成长所需的各项技能。徽章等级分为铜牌、银牌、金牌、钻石四个等级，根据积分自动判定，给孩子持续进步的动力。
游戏化设计借鉴了目标设定、进度反馈、成就解锁、奖励兑换等核心元素，将枯燥的学习任务转化为有趣的游戏挑战。通过积分奖励、徽章收集、奖励兑换等激励机制，激发孩子的内在动力，培养自主学习能力和良好习惯。
应用采用Material Design 3设计规范，遵循Flutter最佳实践，代码结构清晰，易于维护和扩展。后续版本计划增加数据持久化、家庭成员管理、自定义任务、排行榜、提醒功能等，为家长和孩子提供更完整的亲子教育体验。
通过儿童技能打卡墙应用，孩子可以在游戏中学习技能，培养良好习惯，获得成就感，建立自信心，让学习成为一件快乐的事情。
让学习像玩游戏一样有趣 🎮
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
0
0- 0
已为社区贡献15条内容
所有评论(0)