企业官网建设流程全解析

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

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

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

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

📖 项目概述

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

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

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

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

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

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

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

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

🎯 核心功能

💡 库选择理由

今天我们要用 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. 数据模型设计 📋

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

classStudyGoal{finalStringid;finalStringtitle;finalint targetDays;int completedDays;finalDateTimecreateTime;StudyGoal({requiredthis.id,requiredthis.title,requiredthis.targetDays,this.completedDays=0,requiredthis.createTime});doublegetprogress=>completedDays/targetDays;}

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

2. 环形进度图实现 📊

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

实现代码超简洁：

finalGlobalKey<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. 庆祝撒花动画 🎉

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

finalConfettiController_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 函数里加一行：

voidmain()async{awaitGetStorage.init();// 就这一行！runApp(MyApp());}

读写数据也超方便：

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

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

6. 成就系统实现 🏆

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

先定义成就模型：

classAchievement{finalStringid;finalStringname;finalStringicon;finalStringcondition;bool isUnlocked;Achievement({requiredthis.id,requiredthis.name,requiredthis.icon,requiredthis.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. 打卡核心逻辑 ✅

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

voidcheckInToday(StringgoalId){DateTimetoday=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 开发真的太香了，一套代码多端运行，还能用上这么多成熟的社区生态库～

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

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