Flutter for OpenHarmony番茄工作法学习计时器

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

🍅 Flutter for OpenHarmony 番茄工作法学习计时器，让专注更高效！

哈喽各位鸿蒙开发者小伙伴们 👋！今天给大家带来一个超实用的 Flutter 跨平台应用实战 —— 番茄工作法学习计时器！如果你经常学习效率低下、容易分心，那这个 APP 绝对是你的救星 ✨！

📖 项目概述

番茄工作法（Pomodoro Technique）是目前最流行的时间管理方法之一，核心就是25 分钟专注工作 + 5 分钟休息的循环模式。这次我们基于 Flutter for OpenHarmony 打造的这款计时器，不仅有标准的专注计时功能，还加入了学习数据可视化统计，让你清晰看到自己每天的学习成果和进步轨迹 📈！

这款 APP 适合谁用？

  • 🎓 学生党备考复习，提高学习效率

  • 💻 程序员写代码时保持专注

  • 📚 阅读爱好者沉浸式阅读

  • 🏢 职场人提升工作专注力

最棒的是，这一切都完美运行在 OpenHarmony 平台上，真正做到一次编写多端运行！🚀

🎯 核心功能

模块名称 功能描述 技术亮点
⏱️ 计时模块 25 分钟专注 + 5 分钟休息循环，支持开始 / 暂停 / 重置 精确到秒的倒计时算法，状态实时更新
🔔 通知模块 专注结束 / 休息结束时本地通知提醒 后台运行也能收到提醒，不打断学习节奏
📊 统计模块 每日 / 每周专注时长、完成番茄数可视化 柱状图 + 折线图双展示，数据一目了然
💾 存储模块 学习记录持久化，设置参数保存 应用重启数据不丢失，个性化配置

💡 库选择理由

这次我们精选了 4 个 Flutter 生态中最成熟的第三方库，而且都完美适配 OpenHarmony 平台哦！👇

1. flutter_local_notifications 🔔

为什么选它？

  • ✅ OpenHarmony 平台完美适配，通知权限申请简单

  • ✅ 支持定时通知、即时通知多种触发方式

  • ✅ 可自定义通知声音、图标、振动模式

  • ✅ 后台运行时通知依然可靠送达

2. provider 📦

为什么选它？

  • ✅ Flutter 官方推荐的轻量级状态管理方案

  • ✅ 计时状态、设置状态全局统一管理

  • ✅ 代码结构清晰，学习成本极低

  • ✅ OpenHarmony 平台性能表现优秀

3. fl_chart 📊

为什么选它？

  • ✅ 纯 Flutter 实现的图表库，无需原生依赖

  • ✅ 支持柱状图、折线图、饼图等多种图表类型

  • ✅ 高度可定制，动画效果丝滑流畅

  • ✅ OpenHarmony 平台渲染性能出色

4. shared_preferences 💾

为什么选它？

  • ✅ 官方维护的键值对存储方案

  • ✅ OpenHarmony 平台原生实现，读写速度快

  • ✅ API 简单易用，支持基本数据类型

  • ✅ 数据持久化可靠，应用卸载才会清除

📦 环境配置

第一步：添加依赖到 pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  # 状态管理
  provider: ^6.1.1
  # 本地通知
  flutter_local_notifications: ^16.3.2
  # 数据图表
  fl_chart: ^0.66.2
  # 本地存储
  shared_preferences: ^2.2.2

第二步：OpenHarmony 平台权限配置

在 entry/src/main/module\.json5 中添加通知权限：

"requestPermissions": [
  {
    "name": "ohos.permission.NOTIFICATION_CONTROLLER",
    "reason": "用于专注结束和休息结束时发送提醒通知"
  }
]

然后执行 flutter pub get 就搞定啦！是不是超简单？😎

🧩 分模块详解

1. 计时器核心逻辑实现 ⏱️

首先来看看最核心的计时器逻辑，用 Stream 实现每秒更新，代码非常简洁：

// 计时器核心逻辑
void startTimer() {
  _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
    if (secondsRemaining > 0) {
      secondsRemaining--;
      notifyListeners(); // provider状态更新
    } else {
      _completeSession(); // 完成一个番茄钟
    }
  });
}

在这里插入图片描述

主界面就是长这样啦！大大的倒计时数字，开始暂停按钮一目了然，当前状态清晰显示 👆

2. Provider 状态管理实现 📦

状态管理是整个 APP 的灵魂，用 provider 统一管理所有状态：

// TimerProvider状态管理类
class TimerProvider extends ChangeNotifier {
  int focusDuration = 25; // 专注时长
  int breakDuration = 5;  // 休息时长
  TimerStatus status = TimerStatus.idle;
  
  void toggleTimer() {
    status == TimerStatus.running 
        ? pauseTimer() 
        : startTimer();
    notifyListeners();
  }
}

然后在 main.dart 中注册 Provider，整个 APP 都能访问到状态啦：

// 注册全局状态管理
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => TimerProvider(),
      child: const MyApp(),
    ),
  );
}

3. 本地通知提醒实现 🔔

专注结束或者休息结束时，我们需要给用户发通知提醒，这部分代码也很简单：

// 初始化本地通知
Future<void> initNotifications() async {
  const AndroidInitializationSettings android = 
      AndroidInitializationSettings('@mipmap/ic_launcher');
  const InitializationSettings initSettings = 
      InitializationSettings(android: android);
  await flutterLocalNotificationsPlugin.initialize(initSettings);
}

发送定时通知的代码，专注结束时自动触发：

// 发送专注结束通知
Future<void> showFocusCompleteNotification() async {
  const NotificationDetails details = NotificationDetails(
    android: AndroidNotificationDetails(
      'pomodoro_channel',
      '番茄钟提醒',
      importance: Importance.high,
    ),
  );
  await flutterLocalNotificationsPlugin.show(
    0, '🎉 专注完成！', '快去休息5分钟吧~', details,
  );
}

4. 数据统计图表实现 📊

这是我最喜欢的部分！用 fl_chart 展示学习数据，效果超级炫酷 ✨

在这里插入图片描述

看看这个统计界面，每日专注时长柱状图 + 每周趋势折线图，是不是很专业？👇

柱状图实现代码，5-6 行就搞定：

// 每日专注时长柱状图
BarChart(
  BarChartData(
    barGroups: weeklyData.asMap().entries.map((e) {
      return BarChartGroupData(
        x: e.key, barRods: [BarChartRodData(toY: e.value)],
      );
    }).toList(),
  ),
)

折线图展示专注趋势变化，同样简单：

// 每周专注趋势折线图
LineChart(
  LineChartData(
    lineBarsData: [LineChartBarData(spots: trendSpots)],
    titlesData: FlTitlesData(show: true),
  ),
)

5. shared_preferences 本地存储实现 💾

用户的设置和学习记录需要持久化保存，用 shared_preferences 就对了：

// 保存用户设置
Future<void> saveSettings() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setInt('focusDuration', focusDuration);
  await prefs.setInt('breakDuration', breakDuration);
  await prefs.setBool('notificationEnabled', notificationEnabled);
}

在这里插入图片描述

设置界面长这样，滑块调节时长，开关控制通知，用户体验拉满！👆

读取保存的设置，APP 启动时自动恢复用户配置：

// 加载保存的设置
Future<void> loadSettings() async {
  final prefs = await SharedPreferences.getInstance();
  focusDuration = prefs.getInt('focusDuration') ?? 25;
  breakDuration = prefs.getInt('breakDuration') ?? 5;
  notifyListeners();
}

🏆 完整实现总结

项目整体结构

lib/
├── main.dart                 # 应用入口
├── providers/
│   └── timer_provider.dart   # 状态管理
├── screens/
│   ├── timer_screen.dart     # 计时主界面
│   ├── stats_screen.dart     # 统计界面
│   └── settings_screen.dart  # 设置界面
├── services/
│   ├── notification_service.dart  # 通知服务
│   └── storage_service.dart       # 存储服务
└── widgets/
    └── timer_widget.dart     # 计时器组件

核心亮点 🌟

  1. ✅ 纯 Flutter 实现，OpenHarmony 平台完美运行

  2. ✅ 四大成熟库组合，稳定性有保障

  3. ✅ 数据可视化统计，学习成果看得见

  4. ✅ 状态管理清晰，代码易维护易扩展

OpenHarmony 平台运行效果

在 OpenHarmony 真机上测试，APP 启动速度快、通知送达及时、图表渲染流畅，完全不输原生应用体验！而且因为是 Flutter 开发，还能同时打包到 Android、iOS 等其他平台，性价比拉满 🚀

好啦，今天的番茄工作法学习计时器就分享到这里！希望这篇文章能帮助大家更好地学习 Flutter for OpenHarmony 开发。记得去开源鸿蒙跨平台社区看看更多精彩内容哦：https://openharmonycrossplatform.csdn.net

如果这篇文章对你有帮助，别忘了点赞收藏关注三连！有问题欢迎在评论区交流，我们下期再见～👋

# flutter # 学习 # harmonyos # 华为
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

【无标题】Flutter for OpenHarmony 跨平台实践番茄钟应用

avatar 开源鸿蒙跨平台开发者社区
cover

IOS、Android 和 OpenHarmony 音频焦点抢占机制对比

avatar 开源鸿蒙跨平台开发者社区

Flutter-OH 鸿蒙工具类应用实战 Day6：笔记时间戳生成与列表预览优化

前五篇完成了笔记新增、编辑、删除、搜索与本地存储基础功能，但数据仅以简单字符串格式保存，无法记录笔记生成时间与修改轨迹，不符合正规工具类应用开发规范。本篇对原有数据架构进行重构优化，自定义笔记实体模型，实现自动生成创建时间、实时更新修改时间，同时优化列表预览效果，提升应用专业性与数据完整性。本次升级完全兼容历史功能，搜索、新增、编辑、删除逻辑不受改动影响，数据无缝迁移。

avatar 开源鸿蒙跨平台开发者社区