James
stop_watch_timer
A Stop Watch timer is a timepiece designed to measure the amount of time that elapses between its activation and deactivation. It’s very useful in our lives, such as managing your timeline, supporting your work, and providing flexibility in some activities.
This is a Stop Watch Timer for the Flutter plugin. Check it out!
Example code
A complete example program using stop_watch_timer can be found in the example directory.
This is information of example
Installation
Add this to your package’s pubspec.yaml file:
dependencies:
stop_watch_timer:
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);
Dart
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 displays 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 to enable/disable display time and change split characters.
Set Preset Time
Can be set preset time. This case is “00:01.23”.
When the timer is idle state, can be set this.
// Set Millisecond.
_stopWatchTimer.setPresetTime(mSec: 1234);
// Set Hours. (ex. 1 hours)
_stopWatchTimer.setPresetHoursTime(1);
// Set Minute. (ex. 30 minute)
_stopWatchTimer.setPresetMinuteTime(30);
// Set Second. (ex. 120 second)
_stopWatchTimer.setPresetSecondTime(120);
GitHub
https://github.com/hukusuke1007/stop_watch_timer
