Flutter for OpenHarmony学习目标追踪应用技术文章

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

🚀 Flutter for OpenHarmony 实战：打造你的专属学习目标追踪神器

哈喽各位鸿蒙跨平台开发的小伙伴们！👋 今天我们来做一个超级实用的学习目标追踪应用，帮你告别拖延症，养成自律学习的好习惯！💪

---

📖 项目概述

有没有发现自己立了很多学习 flag，但是坚持不了几天就放弃了？😅 别担心！今天这个项目就是来帮你的！

我们要做的是一个学习计划与目标追踪应用，专门为自律学习、习惯养成的小伙伴们打造！✨ 你可以：

• 🎯 设定多个学习目标（比如：Flutter 入门、OpenHarmony 进阶、英语单词打卡）

• 📊 实时查看每个目标的完成进度

• 🔥 用 GitHub 风格热力图记录你的每日学习情况

• 🏆 解锁成就徽章，获得满满的成就感

• 🎉 达成目标时还有炫酷的庆祝撒花动画！

这个应用完美适配 OpenHarmony 平台，让你的鸿蒙设备也能拥有专业级的学习追踪体验！🎊

---

🎯 核心功能

模块名称	核心能力	实现亮点
🎯 目标管理	创建 / 编辑 / 删除学习目标，设置每日任务量	支持自定义目标周期、优先级设置
📈 进度追踪	环形进度图可视化展示完成百分比	平滑动画过渡、实时数据更新
🔥 打卡热力图	GitHub 风格年度学习贡献图	颜色渐变直观展示学习强度、历史回溯
🏆 成就系统	徽章解锁、里程碑奖励	成就进度统计、解锁动画反馈

---

💡 库选择理由

今天我们要用 4 个超棒的第三方库，它们在 OpenHarmony 平台上的适配性都非常出色！🌟

1. flutter_heatmap_calendar 🔥

• OpenHarmony 适配优势：纯 Dart 实现，不依赖原生平台 API，在鸿蒙上完美运行

• 为什么选它：专门模仿 GitHub 贡献图的热力图组件，开箱即用！支持自定义颜色、日期范围，完美呈现你的学习轨迹

• 性能表现：渲染效率高，即使一整年的数据也丝滑流畅～

2. flutter_circular_chart 📊

• OpenHarmony 适配优势：基于 CustomPaint 绘制，跨平台一致性极佳

• 为什么选它：自带动画效果的环形进度图，支持多段数据展示，百分比计算自动处理

• 定制能力：颜色、粗细、动画时长都可以自由调整，颜值超高！

3. confetti 🎉

• OpenHarmony 适配优势：纯 Flutter 渲染的粒子动画系统，鸿蒙平台性能表现优秀

• 为什么选它：达成目标时的庆祝撒花效果！谁不喜欢完成任务时的仪式感呢？

• 灵活配置：支持多种形状（星星、圆形、方形）、颜色、喷射方向，氛围感拉满！

4. get_storage 💾

• OpenHarmony 适配优势：轻量级键值存储，基于文件系统，鸿蒙平台无需额外适配层

• 为什么选它：比 shared_preferences 更快！初始化超简单，异步读写，性能拉满

• 使用体验：API 设计简洁，支持泛型读写，代码量减少 50%！

---

📦 环境配置

首先在你的pubspec\.yaml中添加这 4 个依赖：

dependencies:
  flutter:
    sdk: flutter
  # 学习打卡热力图
  flutter_heatmap_calendar: ^1.0.5
  # 环形进度图
  flutter_circular_chart: ^0.1.0
  # 庆祝撒花动画
  confetti: ^0.8.0
  # 轻量本地存储
  get_storage: ^2.1.1

然后运行flutter pub get就搞定啦！🚀

💡 小提示：这几个库都是纯 Dart 实现，在 OpenHarmony 平台不需要额外的权限配置，直接用就 ok！

---

🧩 分模块详解

1. 数据模型设计 📋

首先我们来定义学习目标的数据结构，很简单～

class StudyGoal {
  final String id;
  final String title;
  final int targetDays;
  int completedDays;
  final DateTime createTime;
  
  StudyGoal({required this.id, required this.title,
    required this.targetDays, this.completedDays = 0,
    required this.createTime});
  
  double get progress => completedDays / targetDays;
}

这段代码定义了目标的基本属性，还加了一个 progress 计算属性，方便后面用～

2. 环形进度图实现 📊

接下来是首页最亮眼的环形进度图！先看效果：

实现代码超简洁：

final GlobalKey<AnimatedCircularChartState> _chartKey = GlobalKey();
List<CircularStackEntry> _generateChartData(double percent) {
  return [CircularStackEntry(entries: [
    CircularSegmentEntry(percent, Colors.blue, rankKey: 'done'),
    CircularSegmentEntry(100 - percent, Colors.grey[200], rankKey: 'left'),
  ])];
}

然后在 Widget 中直接使用：

AnimatedCircularChart(key: _chartKey, size: Size(200, 200),
  initialChartData: _generateChartData(68),
  chartType: CircularChartType.Radial,
  percentageValues: true, holeLabel: '68%',)

是不是超简单！5 行代码搞定炫酷的环形进度图～

3. GitHub 风格打卡热力图 🔥

这个是我最喜欢的功能！看着自己的学习记录一点点变绿，成就感爆棚！🥳

核心实现代码：

HeatMap(startDate: DateTime.now().subtract(Duration(days: 365)),
  endDate: DateTime.now(), datasets: heatmapData,
  colorMode: ColorMode.opacity, showText: false, scrollable: true,
  colorsets: {1: Colors.green[100]!, 3: Colors.green[300]!,
    5: Colors.green[500]!, 10: Colors.green[700]!},)

这里的 colorsets 就是 GitHub 那种从浅绿到深绿的渐变，学习时间越长颜色越深！完美复刻 GitHub 贡献图的视觉效果～

4. 庆祝撒花动画 🎉

当用户完成一个目标时，必须要有仪式感！撒花动画安排！

final ConfettiController _confettiController = ConfettiController(
  duration: Duration(seconds: 3));
// 目标达成时调用
void _onGoalComplete() {
  _confettiController.play();
  // 其他业务逻辑...
}

然后在 Stack 中加入 ConfettiWidget：

ConfettiWidget(confettiController: _confettiController,
  blastDirection: pi / 2, maxBlastForce: 5, minBlastForce: 2,
  numberOfParticles: 30, gravity: 0.1,)

想象一下，当你坚持学习 30 天完成目标时，满屏的彩纸飘落～这种正向反馈真的会让人上瘾！😍

5. GetStorage 本地存储 💾

数据持久化是必须的，总不能退出 APP 数据就没了吧～

初始化超级简单，在 main 函数里加一行：

void main() async {
  await GetStorage.init(); // 就这一行！
  runApp(MyApp());
}

读写数据也超方便：

final box = GetStorage();
// 保存目标数据
box.write('goals', goals.map((g) => g.toJson()).toList());
// 读取目标数据
List data = box.read('goals') ?? [];
List<StudyGoal> goals = data.map((j) => StudyGoal.fromJson(j)).toList();

对比一下 shared_preferences，是不是代码少了好多！而且性能更快～⚡

6. 成就系统实现 🏆

人都是需要激励的！成就徽章系统让学习更有动力～

先定义成就模型：

class Achievement {
  final String id;
  final String name;
  final String icon;
  final String condition;
  bool isUnlocked;
  Achievement({required this.id, required this.name,
    required this.icon, required this.condition, this.isUnlocked = false});
}

然后检查成就解锁逻辑：

void _checkAchievements() {
  if (totalStudyDays >= 7) unlockAchievement('week_streak');
  if (totalStudyDays >= 30) unlockAchievement('month_master');
  if (completedGoals >= 3) unlockAchievement('goal_hunter');
}

解锁成就的时候顺便触发撒花动画，双重快乐！🎉

7. 打卡核心逻辑 ✅

最后是最核心的打卡功能，这是整个应用的灵魂～

void checkInToday(String goalId) {
  DateTime today = DateTime.now();
  if (!checkedInDates.contains(today)) {
    checkedInDates.add(today);
    heatmapData[today] = (heatmapData[today] ?? 0) + 1;
    updateGoalProgress(goalId);
    _checkAchievements(); // 检查是否解锁新成就
  }
}

每次打卡更新热力图数据、更新目标进度、检查成就解锁，一气呵成！完美～

---

🏆 完整实现总结

项目结构

lib/
├── main.dart                 # 入口文件
├── models/
│   ├── study_goal.dart       # 学习目标模型
│   └── achievement.dart      # 成就模型
├── pages/
│   ├── home_page.dart        # 首页-目标列表+进度
│   ├── heatmap_page.dart     # 热力图页面
│   └── achievement_page.dart # 成就中心
└── services/
    └── storage_service.dart  # 本地存储服务

核心亮点 ✨

1. GitHub 风格热力图 - 学习记录可视化，看着变绿的格子超有成就感

2. 环形进度可视化 - 直观展示目标完成度，动画丝滑

3. 成就解锁系统 - 徽章收集 + 撒花动画，正向激励拉满

4. 轻量高效存储 - GetStorage 秒级读写，性能优异

5. 纯跨平台实现 - 4 个库都是纯 Dart 实现，OpenHarmony 完美适配

运行效果 🎬

• 首页清晰展示所有学习目标和总体进度

• 点击打卡按钮，热力图对应日期变绿

• 完成目标时满屏撒花庆祝，解锁新徽章

• 退出 APP 再打开，所有数据都还在～

---

💪 写在最后

怎么样？这个学习目标追踪应用是不是既实用又炫酷！用 Flutter for OpenHarmony 开发真的太香了，一套代码多端运行，还能用上这么多成熟的社区生态库～

赶紧动手试试吧！打造属于你自己的学习神器，从此告别拖延症，成为自律达人！🚀

如果这篇文章对你有帮助，欢迎点赞收藏，也欢迎加入开源鸿蒙跨平台社区一起交流学习！我们下期再见～👋