James
Custom Timer
When none of the other templates fit your requirements, you can build a customizable timer. This allows you to create any type of timer you can think of. It depends on your style, your preference, your abilities,..etc.
This is a highly customizable timer builder, with the controller, animation, intervals, callbacks, custom actions, and more! For more information on customizable timers, follow these steps below.
You totally can build a customizable timer.
📌 Simple Usage
To begin your project, a simple usage, follow these steps:
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("CustomTimer example"),
),
body: Center(
child: CustomTimer(
from: Duration(hours: 12),
to: Duration(hours: 0),
onBuildAction: CustomTimerAction.auto_start,
builder: (CustomTimerRemainingTime remaining) {
return Text(
"${remaining.hours}:${remaining.minutes}:${remaining.seconds}",
style: TextStyle(fontSize: 30.0),
);
},
),
),
),
);
}
📌 Custom Usage
Options that allow for more control:
| Properties | Type | Description |
|---|---|---|
from | Duration | The start of the timer. |
to | Duration | The end of the timer. |
interval | Duration | The time interval to update the widget. The default interval is Duration(seconds: 1). |
controller | CustomTimerController | Controls the state of the timer. |
onBuildAction | CustomTimerAction | Execute an action when the widget is built for the first time. The default action is CustomTimerAction.go_to_start. |
onFinishAction | CustomTimerAction | Execute an action when the timer finish. The default action is CustomTimerAction.go_to_end. |
onResetAction | CustomTimerAction | Executes an action when the timer is reset. The default action is CustomTimerAction.go_to_start. |
builder | Widget Function(CustomTimerRemainingTime) | Function that builds a custom widget and allows to obtain the remaining time of the timer. |
finishedBuilder | Widget Function(CustomTimerRemainingTime) | Function that builds a custom widget and allows to get the remaining time only when the timer has finished. If you use it, it will replace builder. |
pausedBuilder | Widget Function(CustomTimerRemainingTime) | Function that builds a custom widget and allows to get the remaining time only when the timer is paused. If you use it, it will replace builder. |
resetBuilder | Widget Function(CustomTimerRemainingTime) | Function that builds a custom widget and allows to get the remaining time only when the timer is reset. If you use it, it will replace builder. |
onStart | VoidCallback | Callback function that runs when the timer starts. |
onFinish | VoidCallback | Callback function that runs when the timer finishes. |
onPaused | VoidCallback | Callback function that runs when the timer is paused. |
onReset | VoidCallback | Callback function that runs when the timer is reset. |
onChangeState | Function(CustomTimerState) | Callback function that runs when the timer state changes. Returns a CustomTimerState that allows you to get the state and create custom functions or conditions. |
onChangeStateAnimation | AnimatedSwitcher | Animation that runs when the state of the timer changes. It is not necessary to define a child because it will be replaced by the current builder. |
CustomTimerAction actions:
| Actions | Description |
|---|---|
CustomTimerAction.go_to_start | Shows the start of the timer. |
CustomTimerAction.go_to_end | Shows the end of the timer. |
CustomTimerAction.auto_start | Automatically starts the timer. |
CustomTimerRemainingTime properties:
| Properties | Description |
|---|---|
days | A string with the remaining days. |
hours | A string with the remaining hours. |
hoursWithoutFill | A String with the remaining hours and only with two digits when necessary. |
minutes | A string with the minutes remaining. |
minutesWithoutFill | A String with the remaining minutes and only with two digits when necessary. |
seconds | A string with the seconds remaining. |
secondsWithoutFill | A String with the remaining seconds and only with two digits when necessary. |
milliseconds | A string with the remaining milliseconds. |
duration | A default Duration with remaining time. Lets you create more specific functions or conditions, but remember that it can return more than 59 minutes and seconds and more than 1000 milliseconds. |
CustomTimerState states:
| States |
|---|
CustomTimerState.reset |
CustomTimerState.counting |
CustomTimerState.paused |
CustomTimerState.finished |
You can access the timer state from the onChangeState callback function or using a CustomTimerController.
For example:
CustomTimerState state = _controller.state;
📌 Using the CustomTimerController
final CustomTimerController _controller = new CustomTimerController();
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("CustomTimer example"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomTimer(
controller: _controller,
from: Duration(hours: 12),
to: Duration(hours: 0),
builder: (CustomTimerRemainingTime remaining) {
return Text(
"${remaining.hours}:${remaining.minutes}:${remaining.seconds}",
style: TextStyle(fontSize: 30.0),
);
},
),
SizedBox(height: 16.0,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
FlatButton(
child: Text("Start"),
onPressed: () => _controller.start(),
color: Colors.green,
),
FlatButton(
child: Text("Pause"),
onPressed: () => _controller.pause(),
color: Colors.blue,
),
FlatButton(
child: Text("Reset"),
onPressed: () => _controller.reset(),
color: Colors.red
),
],
)
],
),
),
);
}
CustomTimerController properties:
| Properties | Permissions | Description |
|---|---|---|
state | Read | Returns the current state of the timer. |
CustomTimerController methods:
| Methods | Description |
|---|---|
start() | Start or resume the timer. |
pause() | Pause the timer. |
reset() | Reset the timer. If you want to restart the timer, you can call the controller start() method or set the onResetAction property to CustomTimerAction.auto_start. |
⚙️ Installation
Add this to your package’s pubspec.yaml file:
dependencies:
custom_timer: ^0.0.2
Install it:
$ flutter pub get
Import the package in your project:
import 'package:custom_timer/custom_timer.dart';
GitHub
https://github.com/federicodesia/custom_timer
