搜索插件、代码仓与 APP 分类

插件详情v1.6.0

datetime_loop

一个 Flutter 包,提供一个用于监听系统日期时间并根据指定的时间单位触发重建的 widget。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
274
喜欢数
11
Pub 分数
160

安装插件

flutter pub add datetime_loop

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

datetime_loop 包是 Flutter 的一个实用工具,提供了一个用于监控系统当前日期和时间的 widget,可根据配置的时间间隔(如秒、分钟或小时)触发重建。它简化了需要动态时间内容的 UI 中的实时更新,例如时钟、倒计时或实时数据展示。该 widget 高效监听系统时间变化,避免不必要的开销,确保跨平台的流畅性能。适用于需要与时间推进相关的周期性刷新的应用程序。

适合场景

  • 实时时钟显示
  • 倒计时
  • 实时数据更新
  • 基于时间的UI刷新
  • 动态内容调度

主要特点

  • 在指定的时间间隔内重新构建
  • 高效的系统时间监听
  • 跨平台支持
  • 可配置的时间单位
  • 最小性能影响

适合对象

  • 具有时间依赖性用户界面的应用程序
  • 需要轻量级时间监听器的开发人员
  • 需要频繁更新UI的项目
  • 时钟或计时器应用程序
  • 实时仪表板

使用建议

  • 如果间隔太短,可能导致过度重建
  • 需要仔细处理复杂控件中的状态
  • 不适合长时间运行的后台任务
  • 最好与不可变或轻量级 UI 组件一起使用
  • 仅限UI级别的时间监控

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Clock Example

Buy Me A Coffee
Pub BSD 3-Clause License Pub
Pub likes Download Pub points

A Flutter package that provides a widget to listen to the system's datetime and trigger a rebuild based on the specified time unit

Support the project by giving the repo a ⭐ and showing some ❤️!

Usage

Import the package in your Dart code:

import 'package:datetime_loop/datetime_loop.dart';
Using DateTimeLoopBuilder

Use the DateTimeLoopBuilder widget to rebuild UI elements based on system time updates. You can provide a timeUnit for simple setups or a custom DateTimeLoopController for advanced control (e.g., pause/resume):

DateTimeLoopBuilder(
  timeUnit: TimeUnit.seconds,
  builder: (context, dateTime, child) {
    return Column(
      children: [
        Container(
          width: 200,
          height: 200,
          color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
        ),
        Text('$dateTime'),
      ],
    );
  }
)
Using DateTimeLoopController

The DateTimeLoopController provides a stream of datetime updates and supports advanced features like pausing and resuming updates, useful for optimizing resource usage (e.g., when the app is backgrounded):

final controller = DateTimeLoopController(timeUnit: TimeUnit.minutes);
controller.dateTimeStream.listen((dateTime) {
  print('Current time: $dateTime');
});

// Pause updates to save resources
controller.pause();

// Resume updates with an immediate trigger
controller.resume(triggerImmediate: true);

// Use the controller with DateTimeLoopBuilder
DateTimeLoopBuilder(
  controller: controller,
  builder: (context, dateTime, child) {
  return Text('Time: ${dateTime.toString().split('.').first}');
  },
);

// Dispose of the controller when done
controller.dispose();
Testing with getNow

Both DateTimeLoopBuilder and DateTimeLoopController support a getNow parameter that allows you to mock the system time. This is particularly useful for testing and simulating different time scenarios:

// Example: Testing with a mocked time
DateTime customTime = DateTime(2025, 10, 31, 12, 0, 0);

DateTimeLoopBuilder(
  timeUnit: TimeUnit.seconds,
  getNow: () => customTime,
  builder: (context, dateTime, child) {
    return Text('Mocked time: $dateTime');
  },
)

// Example: Using getNow with DateTimeLoopController
final controller = DateTimeLoopController(
  timeUnit: TimeUnit.minutes,
  getNow: () => customTime,
);

This feature enables:

  • Unit Testing: Write deterministic tests by controlling the datetime value
  • Time Simulation: Simulate different time scenarios without waiting for real time to pass
  • Debugging: Test edge cases and time-dependent behavior

You can check more examples of using this widget here

Issues and Feedback

Please file any issues or feedback here.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。