Linear Timer #

This package provides a widget that enables to use a Linear Progress Indicator as a timer.

Features #

Use a Linear Progress Indicator as a timer (for a forward timer, or a countdown timer). The animation shows multiple examples

Some features are:

• control start, stop and restart from the parent widget (by using the LinearTimerController).
• use the same controller for multiple timers
• allow an onTimerEnd callback, called whenever the timer reaches the end.

Getting started #

To start using this package, add it to your pubspec.yaml file:

dependencies:
    linear_timer:

Then get the dependencies (e.g. flutter pub get) and import them into your application:

import 'package:linear_timer/linear_timer.dart';

Usage #

In the most simple case, use the widget in your application:

class _LinearWidgetDemoState extends State<LinearWidgetDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: LinearTimer(
          duration: const Duration(seconds: 5),
          onTimerEnd: () {
            print("timer ended");
          },
        )
      )
    );
  }
}

If wanted to control when the timer starts, you'll need to add a LinearTimerController (in this case, the timer will not start by itself):

class _LinearWidgetDemoState extends State<LinearWidgetDemo> {

  LinearTimerController timerController = LinearTimerController();
  bool timerRunning = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (timerRunning) {
            timerController.stop();
            setState(() {
              timerRunning = false;
            });
          } else {
            timerController.reset();
            timerController.start();
            setState(() {
              timerRunning = true;
            });
          }
        },
        child: timerRunning?const Icon(Icons.stop):const Icon(Icons.timer),
      ),
      body: Center(
        child: LinearTimer(
          duration: const Duration(seconds: 5),
          controller: timerController,
          onTimerEnd: () {
            setState(() {
              timerRunning = false;
            });
          },
        )
      )
    );
  }
}

Additional information #

The constructor for the widget is the next:

LinearTimer({
    required Duration duration, 
    bool forward = true,
    VoidCallback onTimerEnd, 
    LinearController? controller,
    Color? color,
    Color? backgroundColor,
    double minHeight = 4,
    super.key
});

The basic information is:

• onTimerEnd: A callback to call when the timer ends
• duration: The duration for the timer
• forward: Whether to go forward or backward (i.e. countdown).
• controller: The timer controller, enables controlling start and stop from outside this widget.
• color: The foreground color (i.e. the color that represents the elapsed time).
• backgroundColor: The background color (i.e. the color that represents the whole time).
• minHeight: The minimal height for the widget.