Flutter倒计时进度条插件progress_bar_countdown的使用

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

Flutter倒计时进度条插件progress_bar_countdown的使用

创建一个带有动画线性进度条的倒计时计时器可以使用 Progress Bar Countdown 插件。

特点

  • 前进和后退倒计时计时器
  • 开始、暂停、恢复和重置计时器的功能
  • 可自定义的颜色和样式
  • 左到右或右到左的进度方向
  • 选项格式化倒计时字符串
  • 选项显示/隐藏倒计时文本

Example Progress Bar Countdown GIF

开始使用

要使用此插件,在你的 pubspec.yaml 文件中添加 progress_bar_countdown 作为依赖项:

dependencies:
  progress_bar_countdown: ^0.0.2

使用方法

以下是一个完整的示例,展示如何使用 ProgressBarCountdown 组件:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Progress Bar Countdown',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Example Progress Bar Countdown'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ProgressBarCountdownController controller = ProgressBarCountdownController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          ProgressBarCountdown(
            initialDuration: const Duration(seconds: 20),
            height: 150,
            controller: controller,
            hideText: false,
            autoStart: false,
            progressColor: Colors.deepPurple,
            progressBackgroundColor: Colors.deepPurple.shade200,
            initialTextColor: Colors.deepPurple.shade100,
            revealedTextColor: Colors.white,
            countdownDirection: ProgressBarCountdownAlignment.right,
            textStyle: const TextStyle(fontSize: 48.0, fontWeight: FontWeight.w800),
            onStart: () => {debugPrint("Countdown Started")},
            onComplete: () => {debugPrint("Countdown Completed")},
            onChange: (changeValue) => debugPrint("Change Value: $changeValue"),
            timeFormatter: (Duration remainingTime) {
              final minutes = remainingTime.inMinutes
                  .remainder(60)
                  .toString()
                  .padLeft(2, '0');
              final seconds = remainingTime.inSeconds
                  .remainder(60)
                  .toString()
                  .padLeft(2, '0');
              final milliseconds = (remainingTime.inMilliseconds % 1000 ~/ 10)
                  .toString()
                  .padLeft(2, '0');
              return '$minutes:$seconds:$milliseconds';
            },
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Column(
                children: [
                  IconButton(
                    onPressed: () => controller.start(),
                    icon: const Icon(Icons.play_arrow_outlined),
                  ),
                  const Text("Start")
                ],
              ),
              const SizedBox(width: 10),
              Column(
                children: [
                  IconButton(
                    onPressed: () => controller.pause(),
                    icon: const Icon(Icons.pause_circle),
                  ),
                  const Text("Pause")
                ],
              ),
              const SizedBox(width: 10),
              Column(
                children: [
                  IconButton(
                    onPressed: () => controller.resume(),
                    icon: const Icon(Icons.play_circle_fill),
                  ),
                  const Text("Resume")
                ],
              ),
              const SizedBox(width: 10),
              Column(
                children: [
                  IconButton(
                    onPressed: () => controller.reset(duration: const Duration(seconds: 10)),
                    icon: const Icon(Icons.restore_outlined),
                  ),
                  const Text("Reset")
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的应用,其中包含一个进度条倒计时组件。该组件倒计时20秒,并且用户可以通过按钮来控制倒计时的开始、暂停、恢复和重置。

参数

以下是 ProgressBarCountdown 的参数及其说明:

名称 类型 默认值 描述
initialDuration Duration 必须 倒计时持续时间(秒)。
progressColor Color 必须 进度条的颜色。
progressBackgroundColor Color Colors.white 进度条的背景颜色。
initialTextColor Color? null 倒计时文本的初始颜色。
revealedTextColor Color? null 倒计时文本被进度条揭示时的颜色。
hideText bool false 是否隐藏倒计时文本。
height double 50.0 进度条的高度。
textStyle TextStyle TextStyle(fontSize: 18, fontWeight: FontWeight.bold) 倒计时文本的样式。
countdownDirection ProgressBarCountdownAlignment ProgressBarCountdownAlignment.left 倒计时的方向(左到右或右到左)。
controller ProgressBarCountdownController? null 控制倒计时的控制器。
autoStart bool false 是否自动开始倒计时。
onComplete VoidCallback? null 倒计时完成后执行的回调函数。
onStart VoidCallback? null 倒计时开始时执行的回调函数。
onChange ValueChanged<String>? null 倒计时值改变时执行的回调函数。
textFormatter String Function(Duration remainingTime)? null 倒计时值改变时执行的回调函数,用于格式化文本。

ProgressBarCountdownController

ProgressBarCountdownController 允许你通过编程方式控制倒计时计时器。

方法

  • start():启动倒计时计时器。
  • pause():暂停倒计时计时器。
  • resume():恢复已暂停的倒计时计时器。
  • reset({double? duration}):重置倒计时计时器。可选地指定新的持续时间。
  • getTime():返回当前倒计时计时器的时间为字符串。

使用示例

final controller = ProgressBarCountdownController();

// 在你的构建方法中
ProgressBarCountdown(
  // ... 其他参数 ...
  controller: controller,
)

// 在代码的其他部分
ElevatedButton(
  onPressed: () => controller.start(),
  child: Text('Start'),
)

ElevatedButton(
  onPressed: () => controller.pause(),
  child: Text('Pause'),
)

ElevatedButton(
  onPressed: () => controller.resume(),
  child: Text('Resume'),
)

ElevatedButton(
  onPressed: () => controller.reset(duration: 30),
  child: Text('Reset to 30 seconds'),
)

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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用progress_bar_countdown插件的示例代码。这个插件可以帮助你实现一个带有倒计时功能的进度条。

首先,确保你已经在pubspec.yaml文件中添加了progress_bar_countdown依赖:

dependencies:
  flutter:
    sdk: flutter
  progress_bar_countdown: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来,在你的Dart文件中使用ProgressBarCountdown组件。以下是一个完整的示例:

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _remainingTime = 10; // 倒计时总时间(秒)
  bool _isRunning = false;
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: _remainingTime),
      vsync: this,
    )..addListener(() {
        setState(() {});
      });
  }

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

  void _startCountdown() {
    if (!_isRunning) {
      _isRunning = true;
      _controller.reset();
      _controller.forward();
      Future.delayed(Duration(seconds: _remainingTime), () {
        setState(() {
          _isRunning = false;
        });
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    double progress = _controller.value;
    return Scaffold(
      appBar: AppBar(
        title: Text('ProgressBar Countdown Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              width: double.infinity,
              child: ProgressBarCountdown(
                progress: progress,
                duration: Duration(seconds: _remainingTime),
                color: Colors.blue,
                backgroundColor: Colors.grey[200]!,
                borderRadius: BorderRadius.circular(10),
                textStyle: TextStyle(color: Colors.white, fontSize: 20),
                isRunning: _isRunning,
                onEnd: () {
                  print('Countdown finished!');
                },
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _startCountdown,
              child: Text(_isRunning ? 'Stop' : 'Start'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释:

  1. 依赖引入:在pubspec.yaml文件中添加progress_bar_countdown依赖。

  2. 主应用MyApp是一个无状态组件,它设置了应用的主题和主页。

  3. 主页MyHomePage是一个有状态组件,它包含了一个倒计时控制器和UI组件。

  4. 倒计时控制器:在initState方法中初始化了一个AnimationController,它用于控制进度条的动画。addListener方法用于监听动画的变化,并在每次变化时调用setState来更新UI。

  5. 启动倒计时_startCountdown方法用于启动或重置倒计时。如果倒计时正在运行,则不会重新启动。使用_controller.reset()重置动画,然后使用_controller.forward()开始动画。

  6. UI组件:使用ProgressBarCountdown组件显示进度条。通过传递progressdurationcolorbackgroundColorborderRadiustextStyle等参数来自定义进度条的外观。isRunning参数控制进度条的运行状态,onEnd回调在倒计时结束时触发。

  7. 按钮:一个ElevatedButton用于启动或停止倒计时。

运行这个示例代码,你将看到一个带有倒计时功能的进度条,以及一个用于启动和停止倒计时的按钮。

回到顶部