progress_bar_countdown 0.0.3 copy "progress_bar_countdown: ^0.0.3" to clipboard
progress_bar_countdown: ^0.0.3 copied to clipboard

An animated timer that counts down like a progress bar

Progress Bar Countdown #

Create an animated linear progress bar countdown timer using Progress Bar Countdown.

Features #

  • Forward and reverse countdown timer
  • Start, pause, resume, and reset timer functionality
  • Customizable colors and styles
  • Left-to-right or right-to-left progress direction
  • Option to format the countdown timer string
  • Option to show/hide countdown text

Example Progress Bar Countdown GIF

Getting Started #

To use this plugin, add progress_bar_countdown as a dependency in your pubspec.yaml file.

dependencies:
  progress_bar_countdown: ^0.0.2

Usage #

ProgressBarCountdown(
  initialDuration: Duration(seconds: 60),
  progressColor: Colors.blue,
  progressBackgroundColor: Colors.grey[300]!,
  initialTextColor: Colors.black,
  revealedTextColor: Colors.white,
  height: 40,
  textStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
  countdownDirection: ProgressBarCountdownAlignment.left,
  controller: ProgressBarCountdownController(),
  autoStart: true,
  onComplete: () {
    print('Countdown Completed');
  },
  onStart: () {
    print('Countdown Started');
  },
  onChange: (String timeStamp) {
    print('Countdown Changed $timeStamp');
  },
  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';
  }
)

Parameters #

Name Type Default Value Description
initialDuration Duration required Countdown duration in seconds.
progressColor Color required Color of the progress bar.
progressBackgroundColor Color Colors.white Background color of the progress bar.
initialTextColor Color? null Initial color of the countdown text.
revealedTextColor Color? null Color of the countdown text as it's revealed by the progress bar.
hideText bool false Whether to hide the countdown text.
height double 50.0 Height of the progress bar.
textStyle TextStyle TextStyle(fontSize: 18, fontWeight: FontWeight.bold) Style of the countdown text.
countdownDirection ProgressBarCountdownAlignment ProgressBarCountdownAlignment.left Direction of the countdown (left-to-right or right-to-left).
controller ProgressBarCountdownController? null Controller for the countdown timer.
autoStart bool false Whether to start the countdown automatically.
onComplete VoidCallback? null Callback executed when the countdown completes.
onStart VoidCallback? null Callback executed when the countdown starts.
onChange ValueChanged<String>? null Callback executed when the countdown value changes.
textFormatter String Function(Duration remainingTime)? null Callback executed when the countdown value changes.

ProgressBarCountdownController #

The ProgressBarCountdownController allows you to control the countdown timer programmatically.

Methods #

  • start(): Starts the countdown timer.
  • pause(): Pauses the countdown timer.
  • resume(): Resumes the paused countdown timer.
  • reset({double? duration}): Resets the countdown timer. Optionally specify a new duration.
  • getTime(): Returns the current time of the countdown timer as a string.

Usage Example #

final controller = ProgressBarCountdownController();

// In your build method
ProgressBarCountdown(
  // ... other parameters ...
  controller: controller,
)

// Later in your code
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'),
)

Example #

Here's a complete example demonstrating how to use the ProgressBarCountdown widget:

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(
      home: Scaffold(
        appBar: AppBar(title: Text('Progress Bar Countdown Example')),
        body: Center(
          child: ProgressBarCountdown(
            initialDuration: Duration(seconds: 60),
            progressColor: Colors.blue,
            progressBackgroundColor: Colors.grey[300]!,
            initialTextColor: Colors.black,
            revealedTextColor: Colors.white,
            height: 40,
            textStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            countdownDirection: ProgressBarCountdownAlignment.left,
            controller: ProgressBarCountdownController(),
            autoStart: true,
            onComplete: () {
              print('Countdown Completed');
            },
            onStart: () {
              print('Countdown Started');
            },
            onChange: (String timeStamp) {
              print('Countdown Changed $timeStamp');
            },
            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';
            },
          ),
        ),
      ),
    );
  }
}

This example creates a simple app with a progress bar countdown that starts automatically and runs for 60 seconds.

1
likes
150
pub points
0%
popularity

Publisher

verified publisherhexastudios.co

An animated timer that counts down like a progress bar

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on progress_bar_countdown