simple_timer 1.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • new78

SimpleTimer #

A Simple Timer Widget that displays the timer progress with various customizable options.

Installing #

To Start using this library include simple_timer as a dependency in your puspec.yaml file. Make sure to include the latest version.

Pub link: https://pub.dev/packages/simple_timer

Usage #

To use the widget, import the package in your project

import 'package:simple_timer/simple_timer.dart';

The timer can be controlled in two ways:

  • Using a TimerController (preferred) - The TimerController is a convenience wrapper (subclass) of an AnimationController and needs a TickerProvider, so be sure to extend a TickerProvider in your class. Declare and instantiate your timer controller like below:

      // declaration
      TimerController _timerController;
    
      // instantiation
      _timerController = TimerController(this);
    

    Note: Remember to dispose the TimerController

    and set the controller property to the TimerController object like below:

      Container(
          child: SimpleTimer(
              controller: _timerController,
              duration: Duration(seconds: 10),
          )
      )
    

    TimerController methods:

    Method Description
    start Starts the timer e.g. (_timerController.start())
    pause Pauses the timer e.g. (_timerController.pause())
    reset Resets the timer e.g. (_timerController.reset())
    restart Restarts the timer e.g. (_timerController.restart())
    add Increases time left by the specified duration i.e. allows more time e.g. (_timerController.add(Duration(seconds: 10)))
    subtract Decreases time left by the specified duration i.e. reduces the time e.g. (_timerController.subtract(Duration(seconds: 10)))
  • Setting the Status - The timer can also be controler by passing a TimerStatus value to the status property; like below:

      Container(
          child: SimpleTimer(
              status: TimerStatus.start,
              duration: Duration(seconds: 10),
          )
      )
    

    Note: The SimpleTimer widget uses its parent size.

Customizable Options #

There are various customizable options provided by the SimpleTimer widget, see below:

Property Description Value Type Default Value
duration The duration of the timer Duration
controller A TimerController to control the timer. If this is provided then status must be null. TimerController
status An alternative to the controller that sets the status of the timer. If provided, controller must be null TimerStatus
timerStyle Sets the look of the animated timer widget TimerStyle ring
delay Sets a start delay for timer - i.e. delays the start of the timer by the specified duration Duration Duration(seconds: 0)
backgroundColor The background color of the inner shape (circle) of the timer Color grey
progressIndicatorColor The color of the animating progress indicator. Color green
progressIndicatorDirection The rotating direction of the timer's progress indicator TimerProgressIndicatorDirection clockwise
displayProgressIndicator Sets whether to show the progress indicator bool true
displayProgressText Sets whether to show the progress text bool true
progressTextStyle The TextStyle used by the progress text. TextStyle
progressTextCountDirection The counting direction of the text displayed by the timer TimerProgressTextCountDirection count_down
progressTextFormatter A callback function to format the text displayed by this Timer. String Function(Duration) displays duration in MM:SS format
onStart Callback executed when the timer starts counting VoidCallback
onEnd Callback executed when the timer has finished counting VoidCallback
valueListener The callback executed for each change in the time elapsed void Function(Duration)

Pub link: https://pub.dev/packages/simple_timer

Demo - Controlling the Timer Status #

simple_timer_demo_01

Demo - Customizable options #

simple_timer_demo_02

1.0.0 #

  • Initial Flutter SimpleTimer Library Release

1.0.1 #

  • Added TimerController add and subtract duration methods

example/lib/main.dart

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {

  TimerController _timerController;
  TimerStyle _timerStyle = TimerStyle.ring;
  TimerProgressIndicatorDirection _progressIndicatorDirection = TimerProgressIndicatorDirection.clockwise;
  TimerProgressTextCountDirection _progressTextCountDirection = TimerProgressTextCountDirection.count_down;


  @override
  void initState() {
    // initialize timercontroller
    _timerController = TimerController(this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title, textAlign: TextAlign.center,),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Expanded(
                child: Container(
                  margin: EdgeInsets.symmetric(vertical: 10),
                  child: SimpleTimer(
                    duration: const Duration(seconds: 5),
                    controller: _timerController,
                    timerStyle: _timerStyle,
                    onStart: handleTimerOnStart,
                    onEnd: handleTimerOnEnd,
                    valueListener: timerValueChangeListener,
                    backgroundColor: Colors.grey,
                    progressIndicatorColor: Colors.green,
                    progressIndicatorDirection: _progressIndicatorDirection,
                    progressTextCountDirection: _progressTextCountDirection,
                    progressTextStyle: TextStyle(color: Colors.black),
                    strokeWidth: 10,
                  ),
                )
            ),
            Column(
              children: <Widget>[
                const Text("Timer Status", textAlign: TextAlign.left, style: TextStyle(fontWeight: FontWeight.bold),),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    FlatButton(
                      onPressed: _timerController.start,
                      child: const Text("Start", style: TextStyle(color: Colors.white)),
                      color: Colors.green,
                    ),
                    FlatButton(
                      onPressed: _timerController.pause,
                      child: const Text("Pause", style: TextStyle(color: Colors.white)),
                      color: Colors.blue,
                    ),
                    FlatButton(
                      onPressed: _timerController.reset,
                      child: const Text("Reset", style: TextStyle(color: Colors.white)),
                      color: Colors.red,
                    ),
                    FlatButton(
                      onPressed: _timerController.restart,
                      child: const Text("Restart", style: TextStyle(color: Colors.white)),
                      color: Colors.orange,
                    ),
                  ],
                )
              ],
            ),
            Column(
              children: <Widget>[
                const Text("Timer Style", style: TextStyle(fontWeight: FontWeight.bold),),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Flexible(
                        child: FlatButton(
                            onPressed: ()=>_setStyle(TimerStyle.ring),
                            color: Colors.blue,
                            child:  const Text("Ring",
                                textAlign: TextAlign.center,
                                style: const TextStyle(color: Colors.white)
                            )
                        )
                    ),
                    Flexible(
                      child: FlatButton(
                          onPressed: ()=>_setStyle(TimerStyle.expanding_circle),
                          color: Colors.green,
                          child: const Text("Expanding Circle",
                              textAlign: TextAlign.center,
                              style: const TextStyle(color: Colors.white)
                          )
                      ),
                    ),
                    Flexible(
                      child: FlatButton(
                          onPressed: ()=>_setStyle(TimerStyle.expanding_sector),
                          color: Colors.orange,
                          child: const Text("Expanding Sector",
                              textAlign: TextAlign.center,
                              style: const TextStyle(color: Colors.white)
                          )
                      ),
                    ),
                    Flexible(
                      child: FlatButton(
                          onPressed: ()=>_setStyle(TimerStyle.expanding_segment),
                          color: Colors.red,
                          child: const Text("Expanding Segment",
                              textAlign: TextAlign.center,
                              style: const TextStyle(color: Colors.white)
                          )
                      ),
                    )
                  ],
                )
              ],
            ),
            Column(
              children: <Widget>[
                const Text("Timer Count Direction", style: TextStyle(fontWeight: FontWeight.bold),),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    FlatButton(
                      onPressed: ()=>_setCountDirection(TimerProgressTextCountDirection.count_up),
                      color: Colors.blue,
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          const Flexible(
                              child: const Text("Count Up",
                                  textAlign: TextAlign.center,
                                  style: const TextStyle(color: Colors.white)
                              )
                          ),
                          Flexible(child: Icon(Icons.arrow_upward, size: 18, color: Colors.white)),
                        ],
                      ),
                    ),
                    FlatButton(
                      onPressed: ()=>_setCountDirection(TimerProgressTextCountDirection.count_down),
                      color: Colors.orange,
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          const Flexible(
                              child: const Text("Count Down",
                                  textAlign: TextAlign.center,
                                  style: const TextStyle(color: Colors.white)
                              )
                          ),
                          Icon(Icons.arrow_downward, size: 18, color: Colors.white),
                        ],
                      ),
                    ),
                  ],
                )
              ],
            ),
            Column(
              children: <Widget>[
                const Text("Timer Progress Indicator Direction", style: TextStyle(fontWeight: FontWeight.bold),),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    FlatButton(
                      onPressed: ()=>_setProgressIndicatorDirection(TimerProgressIndicatorDirection.clockwise),
                      color: Colors.blue,
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          const Flexible(
                              child: const Text("Clockwise",
                                  textAlign: TextAlign.center,
                                  style: const TextStyle(color: Colors.white)
                              )
                          ),
                          Flexible(child: Icon(Icons.subdirectory_arrow_left, size: 18, color: Colors.white)),
                        ],
                      ),
                    ),
                    FlatButton(
                      onPressed: ()=>_setProgressIndicatorDirection(TimerProgressIndicatorDirection.both),
                      color: Colors.green,
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          const Flexible(
                              child: const Text("Both",
                                  textAlign: TextAlign.center,
                                  style: const TextStyle(color: Colors.white)
                              )
                          ),
                          Icon(Icons.compare_arrows, size: 18, color: Colors.white),
                        ],
                      ),
                    ),
                    FlatButton(
                      onPressed: ()=>_setProgressIndicatorDirection(TimerProgressIndicatorDirection.counter_clockwise),
                      color: Colors.orange,
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          const Flexible(
                              child: const Text("Counter Clockwise",
                                  textAlign: TextAlign.center,
                                  style: const TextStyle(color: Colors.white)
                              )
                          ),
                          Icon(Icons.subdirectory_arrow_right, size: 18, color: Colors.white),
                        ],
                      ),
                    ),
                  ],
                )
              ],
            ),
          ],
        )
      ),
    );
  }

  void _setCountDirection(TimerProgressTextCountDirection countDirection) {
    setState(() {
      _progressTextCountDirection = countDirection;
    });
  }

  void _setProgressIndicatorDirection(TimerProgressIndicatorDirection progressIndicatorDirection) {
    setState(() {
      _progressIndicatorDirection = progressIndicatorDirection;
    });
  }

  void _setStyle(TimerStyle timerStyle) {
    setState(() {
      _timerStyle = timerStyle;
    });
  }

  void timerValueChangeListener(Duration timeElapsed) {

  }

  void handleTimerOnStart() {
    print("timer has just started");
  }

  void handleTimerOnEnd() {
    print("timer has ended");
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  simple_timer: ^1.0.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:simple_timer/simple_timer.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
55
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
78
Learn more about scoring.

We analyzed this package on Jul 10, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • simple_timer that is a package requiring null.

Health suggestions

Format lib/simple_timer.dart.

Run flutter format to format lib/simple_timer.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test