Flutter日期时间循环插件datetime_loop的使用

插件简介

datetime_loop 是一个Flutter包，它提供了一个小部件来监听系统的日期和时间，并根据指定的时间单位触发重建。这使得开发者可以轻松创建基于时间更新的UI元素，如时钟、倒计时等。

Buy Me A Coffee

支持该项目，请给 repo 打个星并表达你的❤️！

使用方法

导入包

在Dart代码中导入此包：

import 'package:datetime_loop/datetime_loop.dart';

使用DateTimeLoopBuilder

在Flutter应用中使用 DateTimeLoopBuilder 小部件：

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'),
      ],
    );
  }
)

更多使用示例可以查看 这里。

完整示例Demo

以下是一个完整的示例，展示了如何使用 datetime_loop 包来创建一个可以根据不同时间单位（秒、分钟、小时）更新的小部件：

import 'dart:math' as math;
import 'package:datetime_loop/datetime_loop.dart';
import 'package:flutter/material.dart';
import 'package:group_button/group_button.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GroupButtonController _controller = GroupButtonController(selectedIndex: 1);
  final ValueNotifier<TimeUnit> _timeUnitNotifier = ValueNotifier(TimeUnit.seconds);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                GroupButton<TimeUnit>(
                  controller: _controller,
                  buttons: TimeUnit.values,
                  onSelected: (timeUnit, index, isSelected) {
                    _timeUnitNotifier.value = timeUnit;
                  },
                  buttonTextBuilder: (__, timeUnit, context) {
                    return timeUnit.name;
                  },
                ),
                const SizedBox(height: 12),
                ValueListenableBuilder<TimeUnit>(
                  valueListenable: _timeUnitNotifier,
                  builder: (context, timeUnit, __) {
                    return ExampleComponent(timeUnit: timeUnit);
                  })
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class ExampleComponent extends StatelessWidget {
  final TimeUnit timeUnit;

  const ExampleComponent({super.key, required this.timeUnit});

  @override
  Widget build(BuildContext context) {
    return DateTimeLoopBuilder(
      timeUnit: timeUnit,
      triggerOnStateChange: true,
      builder: (context, dateTime, child) {
        return Column(
          children: [
            Container(
              width: 200,
              height: 200,
              color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
            ),
            Text('${dateTime.hour}:${dateTime.minute}:${dateTime.second}'),
            if (child != null) child,
          ],
        );
      },
      child: Container(
        width: 200,
        height: 200,
        color: Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
        child: const Center(
          child: Text(
            'Widget will not be affected by the change of the DateTimeLoopBuilder state. (Color will changed only if the state of ExampleComponent is changed)',
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个可以切换时间单位（秒、分钟、小时）的应用程序，并且每当选择的时间单位发生变化时，ExampleComponent 中的 DateTimeLoopBuilder 将根据新的时间单位进行重建，从而更新显示的时间。

反馈与问题

如果您有任何问题或反馈，请在 GitHub Issues 页面提交。