Flutter Circular Animated CountDown Timer Example

Last updated Dec 06, 2021

A timer that counts upwards from zero for measuring elapsed time is often called a stopwatch, so in today's tutorial, we will see how you can create circular animated timer in Flutter.

Let's start

Step 1: Create a new Flutter Application

Step 2: Add a line like this to your package's pubspec.yaml

dependencies:
  circular_countdown_timer: ^0.2.0

Step 3: Once installed we will get access to a widget called CircularCountDownTimer and its has different parameters such as

Duration: Countdown duration in Seconds.
controller: Controls the Countdown Timer.
ringColor: Ring Color for Countdown Widget.
backgroundColor: Background Color for Countdown Widget.
strokeWidth: Border Thickness of the Countdown Ring.
autoStart: Handles the timer start.
onComplete: This Callback will execute when the Countdown Ends.

Now to use the timer, first declare a controller for countdowncontroller as

CountDownController _controller = CountDownController();

after declaring a controller simple use a widget called CircularCountDownTimer where you want to show your timer.

then for controlling your timer use

controller.start: to start the timer
controller.pause: to pause the timer
controller.resume: to resume the timer if paused
controller.pause: to pause the timer

There is an onComplete Function in timer you can use this to call a function for example an alert dialog which will pop when the timer is completed.

for example:

onComplete: () {

print('Completed');

const AlertDialog(

title: Text('Completed'),

);

Complete source code to create circular animated countdown timer in flutter

import 'package:circular_countdown_timer/circular_countdown_timer.dart';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: DemoApp(),

theme: ThemeData.dark(),

);

}

class DemoApp extends StatefulWidget {

@override

_DemoAppState createState() => _DemoAppState();

}

class _DemoAppState extends State {

CountDownController _controller = CountDownController();

bool _isPause = false;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('Timer'),

centerTitle: true,

body: Center(

child: CircularCountDownTimer(

width: MediaQuery.of(context).size.width / 2,

height: MediaQuery.of(context).size.height / 2,

duration: 14,

fillColor: Colors.amber,

ringColor: Colors.white,

controller: _controller,

backgroundColor: Colors.white54,

strokeWidth: 10.0,

strokeCap: StrokeCap.round,

isTimerTextShown: true,

isReverse: false,

onComplete: () {

print('Completed');

textStyle: const TextStyle(fontSize: 50.0, color: Colors.black),

floatingActionButton: FloatingActionButton.extended(

onPressed: () {

setState(() {

if (_isPause) {

_isPause = false;

_controller.resume();

} else {

_isPause = true;

_controller.pause();

}

});

icon: Icon(_isPause ? Icons.play_arrow : Icons.pause),

label: Text(_isPause ? 'Resume' : 'Pause'),

);

}

Output:

Video Tutorial

Conclusion: In this way, we have learned how you can create an animated circular timer in Flutter.

Article Contributed By :

1504 Views

Projects By category