Flutter倒计时功能插件advanced_countdown的使用

advanced_countdown 是一个高级倒计时小部件，可以显示带有数字动画的时间。

AdvancedCountdown 参数

示例代码

以下是一个完整的示例代码，展示了如何使用 advanced_countdown 插件：

import 'dart:async';

import 'package:advanced_countdown/advanced_countdown.dart';
import 'package:flutter/material.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 _durationForward = ValueNotifier(Duration.zero);
  final _durationBackward = ValueNotifier(
    const Duration(minutes: 59, seconds: 59),
  );
  final _durationMillis = ValueNotifier(Duration.zero);

  Timer? _timer;
  Timer? _timerMillis;

  @override
  void initState() {
    super.initState();

    _startTimers();
  }

  @override
  void reassemble() {
    super.reassemble();

    _startTimers();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('ADVANCED COUNTDOWN'),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  ValueListenableBuilder(
                    valueListenable: _durationForward,
                    builder: (context, value, child) {
                      return AdvancedCountdown(
                        value: value,
                        animationDuration: const Duration(milliseconds: 250),
                        style: Theme.of(context).textTheme.displayMedium,
                        minutesFormat: DurationFormat.double,
                        secondsFormat: DurationFormat.double,
                      );
                    },
                  ),
                  const SizedBox(width: 40),
                  ValueListenableBuilder(
                    valueListenable: _durationBackward,
                    builder: (context, value, child) {
                      return AdvancedCountdown(
                        value: value,
                        animationDuration: const Duration(milliseconds: 250),
                        style: Theme.of(context).textTheme.displayMedium,
                        minutesFormat: DurationFormat.double,
                        secondsFormat: DurationFormat.double,
                      );
                    },
                  ),
                ],
              ),
              ValueListenableBuilder(
                valueListenable: _durationMillis,
                builder: (context, value, child) {
                  return AdvancedCountdown(
                    value: value,
                    animationMillisecondsDuration: const Duration(milliseconds: 100),
                    style: Theme.of(context).textTheme.displayMedium,
                    displayHours: true,
                    displayMilliseconds: true,
                    secondsFormat: DurationFormat.double,
                    millisecondsFormat: DurationMillisFormat.double,
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _timer?.cancel();
    _timerMillis?.cancel();

    super.dispose();
  }

  void _startTimers() {
    _timer?.cancel();
    _timer = Timer.periodic(
      const Duration(seconds: 1),
      _handleTimerUpdate,
    );

    _timerMillis?.cancel();
    _timerMillis = Timer.periodic(
      const Duration(milliseconds: 100),
      _handleTimerMillisUpdate,
    );
  }

  void _handleTimerUpdate(Timer timer) {
    _durationForward.value += const Duration(seconds: 1);
    _durationBackward.value -= const Duration(seconds: 1);

    if (_durationForward.value.inSeconds % 60 == 0) {
      _durationForward.value = Duration.zero;
    }

    if (_durationBackward.value.inSeconds % 60 == 0) {
      _durationBackward.value = const Duration(minutes: 59, seconds: 59);
    }
  }

  void _handleTimerMillisUpdate(Timer timer) {
    _durationMillis.value += const Duration(milliseconds: 100);

    if (_durationMillis.value.inSeconds % 60 >= 5) {
      _durationMillis.value = Duration.zero;
    }
  }
}

代码说明

1. 导入必要的库：

   import 'dart:async';
   import 'package:advanced_countdown/advanced_countdown.dart';
   import 'package:flutter/material.dart';
   

2. 创建 MyApp 和 _MyAppState 类：

   • MyApp 是应用的入口点。
   • _MyAppState 是 MyApp 的状态管理类，包含倒计时逻辑。

3. 初始化定时器：

   • 在 initState 方法中启动定时器。
   • reassemble 方法在热重载时重新启动定时器。

4. 构建 UI：

   • 使用 ValueListenableBuilder 监听 ValueNotifier 的变化，并更新 AdvancedCountdown 小部件。
   • 显示两个倒计时：一个向前计数，一个向后计数，以及一个包含毫秒的倒计时。

5. 处理定时器更新：

   • _handleTimerUpdate 方法每秒更新一次 durationForward 和 durationBackward。
   • _handleTimerMillisUpdate 方法每100毫秒更新一次 durationMillis。

6. 清理资源：

   • 在 dispose 方法中取消定时器，避免内存泄漏。

通过以上步骤，你可以轻松地在 Flutter 应用中实现带有动画效果的倒计时功能。