You can make stunning, native-looking apps for Android and iOS using the popular cross-platform Flutter mobile app programming framework. Circular timer creation is just one of the numerous things you can accomplish with Flutter. A countdown clock or a stopwatch are two examples of circular timers that are excellent for displaying the amount of time left on a job.

1. How to Display a
Circular Timer in
Flutter?
AUGUST 4, 2023
How to Display a Circular Timer in
Flutter?
a

2. You can make stunning, native-looking apps for Android and iOS using the
popular cross-platform Flutter mobile app programming framework. Circular
timer creation is just one of the numerous things you can accomplish with
Flutter. A countdown clock or a stopwatch are two examples of circular
timers that are excellent for displaying the amount of time left on a job.
In Flutter, there are some di erent methods to build a circular timer. This
article will teach you how to design a circular clock in Flutter. In addition, you
will know how to change the timer’s look. You can learn more about
displaying a circular timer in Flutter by reading the tutorial below.
Developing a Custom
Circular Timer in Flutter
There are several methods in Flutter for displaying a circular timer outside the
circular_countdown_timer package. As an illustration, you might make a
circular progress bar using the RadialGauge widget. The
circular_countdown_timer box, on the other hand, is a more specialized
widget made just for showing countdown timers. You may make a
customized circular timer by following the instructions in this article after
installing Flutter:
import 'package:flutter/material.dart';
import
'package:circular_countdown_timer/circular_countdown_time
r.dart';
Table of Contents
1. Developing a Custom Circular Timer in Flutter
2. Function return button
3. Example
4. Output
5. Why Should You Display a Circular Timer in Flutter?
6. Conclusion
7. Frequently Asked Questions (FAQs)

3. void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State createState() => _HomePageState();
}
class _HomePageState extends State {
final int _duration = 10;
final CountDownController _controller =
CountDownController();

4. @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Circular Counter with
countdown timer"),
),
body: Center(
child: CircularCountDownTimer(
// Countdown duration in Seconds.
duration: _duration,
// Countdown initial elapsed Duration in
Seconds.
initialDuration: 0,
// Controls (i.e., Start, Pause, Resume,
Restart) the Countdown Timer.
controller: _controller,
// Width of the Countdown Widget.
width: MediaQuery.of(context).size.width / 2,
// Height of the Countdown Widget.
height: MediaQuery.of(context).size.height / 2,
// Ring Color for Countdown Widget.
ringColor: Colors.blue,
// Ring Gradient for Countdown Widget.
ringGradient: null,

5. // Filling Color for Countdown Widget.
fillColor: Colors.red,
// Filling Gradient for Countdown Widget.
fillGradient: null,
// Background Color for Countdown Widget.
backgroundColor: Colors.amber,
// Background Gradient for Countdown Widget.
backgroundGradient: null,
// Border Thickness of the Countdown Ring.
strokeWidth: 20.0,
// Begin and end contours with a flat edge and
no extension.
strokeCap: StrokeCap.round,
// Text Style for Countdown Text.
textStyle: const TextStyle(
fontSize: 33.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
// Format for the Countdown Text.
textFormat: CountdownTextFormat.S,
// Handles Countdown Timer (true for Reverse

6. Countdown (max to 0), false for Forward Countdown (0 to
max)).
isReverse: true,
// Handles Animation Direction (true for
Reverse Animation, false for Forward Animation).
isReverseAnimation: true,
// Handles visibility of the Countdown Text.
isTimerTextShown: true,
// Handles the timer start.
autoStart: true,
// This Callback will execute when the
Countdown Starts.
onStart: () {
// Here, do whatever you want
debugPrint('Started Countdown');
},
// This Callback will execute when the
Countdown Ends.
onComplete: () {
// Here, do whatever you want
debugPrint('Ended Countdown');
},
// This Callback will execute when the
Countdown Changes.
onChange: (String timeStamp) {
// Here, do whatever you want

7. debugPrint('Changed Countdown $timeStamp');
},
),
),
);
}
}
Function to format the text.
Allows you to format the current duration to any String.
It also provides the default function in case you want to format speci c
moments as in reverse when reaching ‘0’ show ‘GO,’ and for the rest of
the instances, follow the default behavior.
Inside the CircularCountDownTimer we have to add these below lines:
timeFormatterFunction: (defaultFormatterFunction,
duration) {
if (duration.inSeconds == 0) {
// only format for '0'
return "Start";
} else {
// other durations by it's default format
return
Function.apply(defaultFormatterFunction, [duration]);
}
},
Add inside the sca old widget to control the counter
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: 30,
),
_button(

8. title: "Start",
onPressed: () => _controller.start(),
),
const SizedBox(
width: 10,
),
_button(
title: "Pause",
onPressed: () => _controller.pause(),
),
const SizedBox(
width: 10,
),
_button(
title: "Resume",
onPressed: () => _controller.resume(),
),
const SizedBox(
width: 10,
),
_button(
title: "Restart",
onPressed: () =>
_controller.restart(duration: _duration),
),
],
),
Function return button
Widget _button({required String title, VoidCallback?
onPressed}) {
return Expanded(
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:

9. MaterialStateProperty.all(Colors.purple),
),
onPressed: onPressed,
child: Text(
title,
style: const TextStyle(color: Colors.white),
),
),
);
}
Example
import 'package:flutter/material.dart';
import
'package:circular_countdown_timer/circular_countdown_time
r.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override

10. Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State createState() => _HomePageState();
}
class _HomePageState extends State {
final int _duration = 10;
final CountDownController _controller =
CountDownController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Circular Counter with
countdown timer"),
),
body: Center(
child: CircularCountDownTimer(
timeFormatterFunction:

11. (defaultFormatterFunction, duration) {
if (duration.inSeconds == 0) {
// only format for '0'
return "Start";
} else {
// other durations by it's default format
return
Function.apply(defaultFormatterFunction, [duration]);
}
},
// Countdown duration in Seconds.
duration: _duration,
// Countdown initial elapsed Duration in
Seconds.
initialDuration: 0,
// Controls (i.e., Start, Pause, Resume,
Restart) the Countdown Timer.
controller: _controller,
// Width of the Countdown Widget.
width: MediaQuery.of(context).size.width / 2,
// Height of the Countdown Widget.
height: MediaQuery.of(context).size.height / 2,
// Ring Color for Countdown Widget.
ringColor: Colors.blue,

12. // Ring Gradient for Countdown Widget.
ringGradient: null,
// Filling Color for Countdown Widget.
fillColor: Colors.red,
// Filling Gradient for Countdown Widget.
fillGradient: null,
// Background Color for Countdown Widget.
backgroundColor: Colors.amber,
// Background Gradient for Countdown Widget.
backgroundGradient: null,
// Border Thickness of the Countdown Ring.
strokeWidth: 20.0,
// Begin and end contours with a flat edge and
no extension.
strokeCap: StrokeCap.round,
// Text Style for Countdown Text.
textStyle: const TextStyle(
fontSize: 33.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
// Format for the Countdown Text.
textFormat: CountdownTextFormat.S,

13. // Handles Countdown Timer (true for Reverse
Countdown (max to 0), false for Forward Countdown (0 to
max)).
isReverse: true,
// Handles Animation Direction (true for
Reverse Animation, false for Forward Animation).
isReverseAnimation: true,
// Handles visibility of the Countdown Text.
isTimerTextShown: true,
// Handles the timer start.
autoStart: true,
// This Callback will execute when the
Countdown Starts.
onStart: () {
// Here, do whatever you want
debugPrint('Started Countdown');
},
// This Callback will execute when the
Countdown Ends.
onComplete: () {
// Here, do whatever you want
debugPrint('Ended Countdown');
},
// This Callback will execute when the
Countdown Changes.

14. onChange: (String timeStamp) {
// Here, do whatever you want
debugPrint('Changed Countdown $timeStamp');
},
),
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
width: 30,
),
_button(
title: "Start",
onPressed: () => _controller.start(),
),
const SizedBox(
width: 10,
),
_button(
title: "Pause",
onPressed: () => _controller.pause(),
),
const SizedBox(
width: 10,
),
_button(
title: "Resume",
onPressed: () => _controller.resume(),
),
const SizedBox(
width: 10,
),
_button(
title: "Restart",
onPressed: () =>
_controller.restart(duration: _duration),
),

15. ],
),
);
}
Widget _button({required String title, VoidCallback?
onPressed}) {
return Expanded(
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.purple),
),
onPressed: onPressed,
child: Text(
title,
style: const TextStyle(color: Colors.white),
),
),
);
}
}
Output

16. Why Should You Display
a Circular Timer in
Flutter?
You can choose to show a circular timer in Flutter for various reasons. Here
are some of the most typical causes:
1. To start the countdown to an upcoming event. The most typical
application for circular timers is this. They help count down to the beginning
of a presentation, the end of a timer, or any other event you wish to keep
track of.
2. To provide user feedback. The user can receive feedback about the
passing of time through circular timers. This is advantageous when
performing duties like preparing meals or watching for a bus.
2. For a visual component for your app. Circular timers may provide an
optical element to your app that will increase its aesthetic appeal and make it
more engaging.
Hire Flutter developer to create a circular timer. It is an excellent alternative
if you are searching for a way to show the passing of time in your Flutter
project. They are versatile, easy to use, and serve several functions.

17. Conclusion
The article has shown how to display a circular timer in Flutter. First, you will
set up the widget to show a circular countdown timer from the
circular_countdown_timer package. It can also utilize the widget to exhibit a
ten-second countdown timer by creating a simple example. By de ning the
colors, border width, and text style, the article also provided information on
how to alter the timer’s visual look.
Connect with the top Flutter app development company for your project if
you want to create mobile apps with the circular timer for your business. But
if you’re still unclear and want more information about the Flutter framework,
browse our blogs!
Frequently Asked
Questions (FAQs)
1. How is a dart timer used?
The timer starts at the given duration and counts down to 0. The given
callback function is called when the timer approaches zero. To repeatedly
count down the same interval, use a periodic timer. The same rules apply to
negative durations as to durations of 0.
2. How can I create a widget with a
countdown timer?
Press the addition (+) sign in the top left corner to add a widget. A
Countdown widget can be selected. Click Add Widget. Please tap on the
widget once it shows on your Home Screen.
3. What does Flutter’s circle
indicator mean?

18. The CircularProgressIndicator widget uses a circle to represent progress. It can
be used as a progress indicator for determined and indeterminate work. The
value attribute must be left empty or unspeci ed to create an indeterminate
progress indicator in Flutter.
BOOK YOUR FLUTTER DEVELOPER NOW
Related posts
Handling Events and User
Input in Flutter
AUGUST 2, 2023
READ MORE m
Sizebox and Custom
Padding in Flutter
JULY 31, 2023
READ MORE m
JULY 26, 2023

19. Post a Comment
Comment
Save my name, email, and website in this browser for the next time I
comment.
Why Does Any Business
Prefer Mobile App
Development in 2023?
READ MORE m
Name
Email
S U B M I T
Recent Posts
Search... 

20. US Of몭ce India Of몭ce
How to Display a Circular Timer in Flutter?
Handling Events and User Input in Flutter
Sizebox and Custom Padding in Flutter
Why Does Any Business Prefer Mobile App Development in 2023?
Key to Interactive UI Design: Inkwell Flutter
Post Categories
A P P S ( 1 2 )
D E S I G N ( 1 0 )
F L U T T E R W I D G E T G U I D E ( 1 5 6 )
G E N E R A L ( 8 1 6 )
G I T H U B ( 8 )
Get Flutter Insights
S U B S C R I B E O U R W E E K LY N E W S L E T T E R .
Email Address
Subscribe

21. 1176 Shadeville Rd,
Crawfordville
Florida 32327, USA
+1 (850) 780-1313
O ce No. 501,
Shree Ugati Corporate Park,
Gandhinagar - 382421,
Gujarat, India
Services
Flutter Mobile App Development
Flutter Web App Development
Game Development
UI/UX Design Services
Cloud Backend Development
Healthcare App Development
Follow us on
Newsletter
   
Your E-Mail
m

22. Manage consent
Enterprise Software Development
Hire Flutter Developer
Copyright © 2023 All rights reserved to Flutter Agency