Flutter定时构建任务插件timed_builder的使用

timed_builder 是一个用于在指定时间、周期性或动态生成的时间事件上重新构建小部件的 Flutter 插件。它适用于以下场景：

• 显示某个事件发生以来或即将发生的时间；
• 模型频繁更新但希望限制 UI 更新频率；
• 显示当前日期或时间；
• 小部件的表示依赖于特定的时间事件。

下图展示了 timed_builder 的示例效果：

示例代码

周期性重建

以下示例展示如何每秒更新一次时间显示：

import 'package:timer_builder/timer_builder.dart';

class ClockWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return TimerBuilder.periodic(Duration(seconds: 1),
      builder: (context) {
        return Text("${DateTime.now()}"); // 显示当前时间
      }
    );
  }
}

按计划重建

以下示例展示如何根据指定的开始时间和结束时间动态更新状态：

import 'package:timer_builder/timer_builder.dart';

class StatusIndicator extends StatelessWidget {

  final DateTime startTime;
  final DateTime endTime;
  
  StatusIndicator(this.startTime, this.endTime);
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return TimerBuilder.scheduled([startTime, endTime],
      builder: (context) {
        final now = DateTime.now();
        final started = now.compareTo(startTime) >= 0;
        final ended = now.compareTo(endTime) >= 0;
        return Text(started ? ended ? "Ended": "Started": "Not Started");
      }
    );
  }
  
}

完整示例

以下是一个完整的示例，展示如何使用 timed_builder 来创建一个倒计时功能，并在倒计时结束后显示提醒信息：

import 'package:flutter/material.dart';
import 'package:timed_builder/timed_builder.dart';

void main() {
  runApp(SampleApp());
}

class SampleApp extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() {
    return SampleAppState();
  }
}

class SampleAppState extends State<SampleApp> {
  late DateTime alert;

  [@override](/user/override)
  void initState() {
    super.initState();
    alert = DateTime.now().add(Duration(seconds: 10)); // 设置倒计时时间为10秒后
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sample App'),
        ),
        body: TimedBuilder.scheduled([alert], builder: (context) {
          // 当倒计时时间到达时触发此函数
          var now = DateTime.now();
          var reached = now.compareTo(alert) >= 0;
          final textStyle = Theme.of(context).textTheme.headline6;
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Icon(
                  reached ? Icons.alarm_on : Icons.alarm,
                  color: reached ? Colors.red : Colors.green,
                  size: 48,
                ),
                !reached
                    ? TimedBuilder.periodic(Duration(seconds: 1), // 每秒更新剩余时间
                        alignment: Duration.zero, builder: (context) {
                        var now = DateTime.now();
                        var remaining = alert.difference(now); // 计算剩余时间
                        return Text(
                          formatDuration(remaining),
                          style: textStyle,
                        );
                      })
                    : Text("Alert", style: textStyle), // 倒计时结束后显示提醒
                ElevatedButton(
                  child: Text("Reset"), // 重置按钮
                  onPressed: () {
                    setState(() {
                      alert = DateTime.now().add(Duration(seconds: 10)); // 重置倒计时时间为10秒后
                    });
                  },
                ),
              ],
            ),
          );
        }),
      ),
      theme: ThemeData(backgroundColor: Colors.white),
    );
  }
}

String formatDuration(Duration d) {
  String f(int n) {
    return n.toString().padLeft(2, '0'); // 格式化分钟和秒为两位数
  }

  // 向上取整到最近的一秒
  d += Duration(microseconds: 999999);
  return "${f(d.inMinutes)}:${f(d.inSeconds % 60)}"; // 返回格式为 MM:SS
}