Progress Bar Countdown Timer

A flutter package to create an animated timer that counts down like a progress bar

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
• Option to show/hide countdown text
• Left-to-right or right-to-left progress direction

Getting Started

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

dependencies:
  progress_bar_countdown: ^0.0.3

Usage

ProgressBarCountdown(
  initialDuration: 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');
  },
)

Parameters

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: 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');
            },
          ),
        ),
      ),
    );
  }
}

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

Links