stop_watch_timer
Simple CountUp timer / CountDown timer. It easily create app of stopwatch.
https://pub.dev/packages/stop_watch_timer
Example code
See the example directory for a complete sample app using stop_watch_timer.
Installation
Add this to your package's pubspec.yaml file:
dependencies:
stop_watch_timer:
Features
This is StopWatchMode.
- CountUp
- CountDown
CountUp
This is default mode. If you' d like to set it explicitly, set StopWatchMode.countUp to mode.
final stopWatchTimer = StopWatchTimer(
mode: StopWatchMode.countUp,
onChange: (value) => print('onChange $value'),
onChangeRawSecond: (value) => print('onChangeRawSecond $value'),
onChangeRawMinute: (value) => print('onChangeRawMinute $value'),
);
CountDown
Can be set StopWatchMode.countDown mode and preset millisecond.
final stopWatchTimer = StopWatchTimer(
mode: StopWatchMode.countDown,
presetMillisecond: StopWatchTimer.getMilliSecFromMinute(1), // millisecond => minute.
onChange: (value) => print('onChange $value'),
onChangeRawSecond: (value) => print('onChangeRawSecond $value'),
onChangeRawMinute: (value) => print('onChangeRawMinute $value'),
);
This is helper functions for presetTime.
/// Get millisecond from hour
final value = StopWatchTimer.getMilliSecFromHour(1);
/// Get millisecond from minute
final value = StopWatchTimer.getMilliSecFromMinute(60);
/// Get millisecond from second
final value = StopWatchTimer.getMilliSecFromSecond(60 * 60);
Usage
import 'package:stop_watch_timer/stop_watch_timer.dart'; // Import stop_watch_timer
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final StopWatchTimer _stopWatchTimer = StopWatchTimer(); // Create instance.
@override
void initState() {
super.initState();
}
@override
void dispose() async {
super.dispose();
await _stopWatchTimer.dispose(); // Need to call dispose function.
}
@override
Widget build(BuildContext context) {
...
}
}
To operation stop watch.
// Start
_stopWatchTimer.onExecute.add(StopWatchExecute.start);
// Stop
_stopWatchTimer.onExecute.add(StopWatchExecute.stop);
// Reset
_stopWatchTimer.onExecute.add(StopWatchExecute.reset);
// Lap time
_stopWatchTimer.onExecute.add(StopWatchExecute.lap);
Can be set preset time. This case is "00:01.23".
// Set Millisecond.
_stopWatchTimer.setPresetTime(mSec: 1234);
When timer is idle state, can be set this.
// Set Hours. (ex. 1 hours)
_stopWatchTimer.setPresetHoursTime(1);
// Set Minute. (ex. 30 minute)
_stopWatchTimer.setPresetMinuteTime(30);
// Set Second. (ex. 120 second)
_stopWatchTimer.setPresetSecondTime(120);
Using callback
final _stopWatchTimer = StopWatchTimer(
onChange: (value) {
final displayTime = StopWatchTimer.getDisplayTime(value);
print('displayTime $displayTime');
},
onChangeRawSecond: (value) => print('onChangeRawSecond $value'),
onChangeRawMinute: (value) => print('onChangeRawMinute $value'),
);
Using stream
Display time formatted stop watch. Using function of "rawTime" and "getDisplayTime".
_stopWatchTimer.rawTime.listen((value) => print('rawTime $value ${StopWatchTimer.getDisplayTime(value)}'));
Example code using stream builder.
StreamBuilder<int>(
stream: _stopWatchTimer.rawTime,
initialData: 0,
builder: (context, snap) {
final value = snap.data;
final displayTime = StopWatchTimer.getDisplayTime(value);
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8),
child: Text(
displayTime,
style: TextStyle(
fontSize: 40,
fontFamily: 'Helvetica',
fontWeight: FontWeight.bold
),
),
),
Padding(
padding: const EdgeInsets.all(8),
child: Text(
value.toString(),
style: TextStyle(
fontSize: 16,
fontFamily: 'Helvetica',
fontWeight: FontWeight.w400
),
),
),
],
);
},
),
),
Notify from "secondTime" every second.
_stopWatchTimer.secondTime.listen((value) => print('secondTime $value'));
Example code using stream builder.
StreamBuilder<int>(
stream: _stopWatchTimer.secondTime,
initialData: 0,
builder: (context, snap) {
final value = snap.data;
print('Listen every second. $value');
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.symmetric(horizontal: 4),
child: Text(
'second',
style: TextStyle(
fontSize: 17,
fontFamily: 'Helvetica',
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Text(
value.toString(),
style: TextStyle(
fontSize: 30,
fontFamily: 'Helvetica',
fontWeight: FontWeight.bold
),
),
),
],
)
),
],
);
},
),
Notify from "minuteTime" every minute.
_stopWatchTimer.minuteTime.listen((value) => print('minuteTime $value'));
Example code using stream builder.
StreamBuilder<int>(
stream: _stopWatchTimer.minuteTime,
initialData: 0,
builder: (context, snap) {
final value = snap.data;
print('Listen every minute. $value');
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Padding(
padding: EdgeInsets.symmetric(horizontal: 4),
child: Text(
'minute',
style: TextStyle(
fontSize: 17,
fontFamily: 'Helvetica',
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Text(
value.toString(),
style: TextStyle(
fontSize: 30,
fontFamily: 'Helvetica',
fontWeight: FontWeight.bold
),
),
),
],
)
),
],
);
},
),
Notify lap time.
_stopWatchTimer.records.listen((value) => print('records $value'));
Example code using stream builder.
StreamBuilder<List<StopWatchRecord>>(
stream: _stopWatchTimer.records,
initialData: const [],
builder: (context, snap) {
final value = snap.data;
return ListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
final data = value[index];
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8),
child: Text(
'${index + 1} ${data.displayTime}',
style: TextStyle(
fontSize: 17,
fontFamily: 'Helvetica',
fontWeight: FontWeight.bold
),
),
),
const Divider(height: 1,)
],
);
},
itemCount: value.length,
);
},
),
Parsing Time
Can be used getDisplayTime func. It display time like a real stopwatch timer.
- Hours
- Minute
- Second
- Millisecond
For example, 1 hours and 30 minute and 50 second and 20 millisecond => "01:30:50.20"
And can be set enable/disable display time and change split character.
3 Jul 20, 2022
137 Dec 31, 2022
133 Dec 22, 2022
1 Jan 10, 2022
0 Mar 18, 2022
20 Nov 10, 2022
2 Sep 28, 2022
570 Dec 9, 2022
249 Dec 21, 2022
5 Jan 2, 2023
79 Nov 26, 2022
185 Dec 18, 2022
2 Apr 4, 2022
1 Jun 20, 2022
4 Feb 2, 2022
2 Dec 22, 2022
2 Oct 17, 2022
3 Aug 24, 2022
1.7k Dec 31, 2022