Flutter倒计时动画插件interpolated_countdown的使用

Flutter倒计时动画插件interpolated_countdown的使用

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  interpolated_countdown: ^1.0.0

基本用法

首先，确保你已经导入了必要的包：

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

然后，你可以创建一个 CountDownUseCase 实例来配置倒计时逻辑和颜色范围。接着，在你的应用中使用 CountdownWidget 来显示倒计时。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 创建一个 CountDownUseCase 实例
    CountDownUseCase useCase = CountDownUseCase(
      timerTextSize: 55,
      diameter: 204,
      totalDuration: const Duration(seconds: 30),
      stopAnimationOnTimeElapsed: false,
      plateShape: BoxShape.circle,
      outerPlateColorRange: DefaultInterpolationColors.outerPlateColorRange,
      innerPlateColorRange: DefaultInterpolationColors.innerPlateColorRange,
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Countdown Widget Example'),
        ),
        body: Center(
          child: CountdownWidget(
            countdownUseCase: useCase,
          ),
        ),
      ),
    );
  }
}

CountDownUseCase

CountDownUseCase 类用于管理倒计时逻辑和颜色范围。以下是创建实例时可以配置的参数：

参数

  • timerTextSize (类型: double, 默认值: 55): 倒计时文本的字体大小。
  • diameter (类型: double, 默认值: 204): 倒计时小部件的直径。
  • totalDuration (类型: Duration, 默认值: Duration(seconds: 30)): 倒计时的总时长。
  • stopAnimationOnTimeElapsed (类型: bool, 默认值: false): 是否在时间结束时停止动画。
  • plateShape (类型: BoxShape, 默认值: BoxShape.circle): 倒计时小部件的形状。
  • callBackOnEverySecondConsumed (类型: Function(int secondsConsumed)?, 默认值: null): 每秒调用一次的回调函数，接收已消耗的秒数作为参数。
  • outerPlateColorRange (类型: ColorRangeModel, 必须): 外部圆盘的颜色范围。
  • innerPlateColorRange (类型: ColorRangeModel, 必须): 内部圆盘的颜色范围。

示例

CountDownUseCase useCase = CountDownUseCase(
  timerTextSize: 55,
  diameter: 204,
  totalDuration: Duration(seconds: 30),
  stopAnimationOnTimeElapsed: false,
  plateShape: BoxShape.circle,
  callBackOnEverySecondConsumed: (int secondsConsumed) {
    print('Seconds Consumed: $secondsConsumed');
  },
  outerPlateColorRange: ColorRangeModel(
    firstColor: Colors.green,
    midColor: Colors.yellow,
    lastColor: Colors.red,
  ),
  innerPlateColorRange: ColorRangeModel(
    firstColor: Colors.blue,
    midColor: Colors.purple,
    lastColor: Colors.orange,
  ),
);

更多关于 CountDownUseCase 类及其方法的详细信息，请参阅源代码。

GitHub 仓库

访问 https://github.com/aprashantz/interpolated_countdown 进一步探索和自定义/贡献。


更多关于Flutter倒计时动画插件interpolated_countdown的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter倒计时动画插件interpolated_countdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


interpolated_countdown 是一个用于 Flutter 的倒计时动画插件，它可以帮助你在应用中实现带有动画效果的倒计时功能。该插件允许你自定义倒计时的样式、动画效果以及倒计时结束时的回调函数。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 interpolated_countdown 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  interpolated_countdown: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

基本用法

以下是一个简单的示例，展示如何使用 interpolated_countdown 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Interpolated Countdown Example'),
        ),
        body: Center(
          child: InterpolatedCountdown(
            duration: Duration(seconds: 10),  // 设置倒计时时长
            onFinished: () {
              print('Countdown finished!');
            },
            builder: (context, time) {
              return Text(
                '${time.inSeconds}',
                style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
              );
            },
          ),
        ),
      ),
    );
  }
}

参数说明

  • duration: 倒计时的总时长，使用 Duration 类型。
  • onFinished: 倒计时结束时触发的回调函数。
  • builder: 用于构建倒计时显示的 Widget。它接收 BuildContext 和 Duration 两个参数，返回一个 Widget。

自定义动画

interpolated_countdown 允许你通过 builder 参数自定义倒计时的显示样式和动画效果。你可以使用 time 参数来获取当前的倒计时时间，并根据需要显示不同的内容。

例如，你可以使用 AnimatedBuilder 来实现更复杂的动画效果：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Interpolated Countdown Example'),
        ),
        body: Center(
          child: InterpolatedCountdown(
            duration: Duration(seconds: 10),
            onFinished: () {
              print('Countdown finished!');
            },
            builder: (context, time) {
              return AnimatedBuilder(
                animation: AlwaysStoppedAnimation(time.inSeconds.toDouble()),
                builder: (context, child) {
                  return Transform.scale(
                    scale: 1 + (time.inSeconds % 2 == 0 ? 0.1 : 0),
                    child: Text(
                      '${time.inSeconds}',
                      style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
                    ),
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}
回到顶部