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. 数据模型设计 首先我们来定义学习目标的数据结构很简单classStudyGoal{finalStringid;finalStringtitle;finalint targetDays;int completedDays;finalDateTimecreateTime;StudyGoal({requiredthis.id,requiredthis.title,requiredthis.targetDays,this.completedDays0,requiredthis.createTime});doublegetprogresscompletedDays/targetDays;}这段代码定义了目标的基本属性还加了一个 progress 计算属性方便后面用2. 环形进度图实现 接下来是首页最亮眼的环形进度图先看效果实现代码超简洁finalGlobalKeyAnimatedCircularChartState_chartKeyGlobalKey();ListCircularStackEntry_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_confettiControllerConfettiController(duration:Duration(seconds:3));// 目标达成时调用void_onGoalComplete(){_confettiController.play();// 其他业务逻辑...}然后在 Stack 中加入 ConfettiWidgetConfettiWidget(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());}读写数据也超方便finalboxGetStorage();// 保存目标数据box.write(goals,goals.map((g)g.toJson()).toList());// 读取目标数据Listdatabox.read(goals)??[];ListStudyGoalgoalsdata.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.isUnlockedfalse});}然后检查成就解锁逻辑void_checkAchievements(){if(totalStudyDays7)unlockAchievement(week_streak);if(totalStudyDays30)unlockAchievement(month_master);if(completedGoals3)unlockAchievement(goal_hunter);}解锁成就的时候顺便触发撒花动画双重快乐7. 打卡核心逻辑 ✅最后是最核心的打卡功能这是整个应用的灵魂voidcheckInToday(StringgoalId){DateTimetodayDateTime.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 # 本地存储服务核心亮点 ✨GitHub 风格热力图- 学习记录可视化看着变绿的格子超有成就感环形进度可视化- 直观展示目标完成度动画丝滑成就解锁系统- 徽章收集 撒花动画正向激励拉满轻量高效存储- GetStorage 秒级读写性能优异纯跨平台实现- 4 个库都是纯 Dart 实现OpenHarmony 完美适配运行效果 首页清晰展示所有学习目标和总体进度点击打卡按钮热力图对应日期变绿完成目标时满屏撒花庆祝解锁新徽章退出 APP 再打开所有数据都还在 写在最后怎么样这个学习目标追踪应用是不是既实用又炫酷用 Flutter for OpenHarmony 开发真的太香了一套代码多端运行还能用上这么多成熟的社区生态库赶紧动手试试吧打造属于你自己的学习神器从此告别拖延症成为自律达人如果这篇文章对你有帮助欢迎点赞收藏也欢迎加入开源鸿蒙跨平台社区一起交流学习我们下期再见