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

发布于 1周前 作者 h691938207 来自 Flutter

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

一个轻量级的小部件，用于执行倒计时动画。

倒计时动画演示

特性

您可以自定义倒计时的持续时间和文本样式与大小。

开始使用

要启动倒计时，只需显示该小部件，并在给定的时间后消失。 建议在倒计时结束后隐藏该小部件。

使用方法

CountDownWidget(
  textStyle: const TextStyle(color: Colors.red),
  totalDuration: 3, // 总持续时间，单位为秒
  maxTextSize: 100, // 最大字体大小
  minTextSize: 10, // 最小字体大小
  onEnd: () {
    // 倒计时结束后的操作
  },
);

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '倒计时Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '倒计时Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _displayCountDown = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Stack(
        children: [
          if (_displayCountDown)
            Positioned.fill(
              child: Center(
                child: CountDownWidget(
                  totalDuration: 3, // 设置倒计时总时间为3秒
                  maxTextSize: 100, // 最大字体大小为100
                  onEnd: () {
                    setState(() {
                      _displayCountDown = false; // 倒计时结束后隐藏倒计时小部件
                    });
                  },
                  textStyle: const TextStyle(color: Colors.black), // 设置文本颜色为黑色
                ),
              ),
            )
        ],
      ),
      floatingActionButton: _displayCountDown
          ? null
          : FloatingActionButton(
              onPressed: () {
                setState(() {
                  _displayCountDown = true; // 点击按钮后重新显示倒计时小部件
                });
              },
              tooltip: '开始',
              child: const Icon(Icons.play_arrow_rounded),
            ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，animated_countdown 是一个用于在 Flutter 中实现倒计时动画的流行插件。以下是一个简单的示例代码，展示如何使用 animated_countdown 插件来创建一个倒计时动画。

首先，确保你已经在 pubspec.yaml 文件中添加了 animated_countdown 依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_countdown: ^x.y.z  # 替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中使用 AnimatedCountdown 组件。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Countdown Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CountdownScreen(),
    );
  }
}

class CountdownScreen extends StatefulWidget {
  @override
  _CountdownScreenState createState() => _CountdownScreenState();
}

class _CountdownScreenState extends State<CountdownScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late AnimatedCountdown _animatedCountdown;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，持续时间为 10 秒（10000 毫秒）
    _controller = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..repeat(reverse: true); // 反向重复动画

    // 创建 AnimatedCountdown 实例
    _animatedCountdown = AnimatedCountdown(
      animation: _controller,
      duration: 10, // 总时长，单位为秒
      builder: (context, timeRemaining) {
        // 自定义倒计时显示格式
        String formattedTime = timeRemaining.toString().padLeft(2, '0');
        return Center(
          child: Text(
            '$formattedTime 秒',
            style: TextStyle(fontSize: 48, color: Colors.blue),
          ),
        );
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Countdown Demo'),
      ),
      body: Center(
        child: _animatedCountdown,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 重置动画控制器
          _controller.reset();
          // 再次开始动画
          _controller.repeat(reverse: true);
        },
        tooltip: 'Reset',
        child: Icon(Icons.replay),
      ),
    );
  }
}

解释

  1. 依赖引入：

    • 在 pubspec.yaml 中添加 animated_countdown 依赖。

  2. 主应用：

    • MyApp 是主应用类，它创建一个 MaterialApp 并设置 CountdownScreen 作为首页。

  3. 倒计时屏幕：

    • CountdownScreen 是一个有状态的组件，使用 SingleTickerProviderStateMixin 来与动画控制器交互。
    • initState 方法中初始化动画控制器 AnimationController 并设置其持续时间为 10 秒。
    • 创建 AnimatedCountdown 实例，设置动画、时长和自定义构建器。
    • 自定义构建器 builder 用于显示倒计时时间，格式为两位数字（如果是个位数，则前面补零）。

  4. 重置动画：

    • 在 Scaffold 中添加一个浮动操作按钮（FAB），点击时重置并重新开始动画。

这个示例展示了如何使用 animated_countdown 插件来创建一个简单的倒计时动画，并允许用户通过点击按钮来重置动画。希望这个示例能帮到你！

回到顶部