Flutter: Start and Stop Timer Using Same Button - asynchronous

Question

I have a stopwatch and would like to have a single button that both pauses and starts it. I am struggling with the logic around this. When printing to the console, the boolean is stuck on false, and won't let me re-click the button.
stopwatch.dart:
class NewStopWatch extends StatefulWidget {
#override
_NewStopWatchState createState() => new _NewStopWatchState();
}
class _NewStopWatchState extends State<NewStopWatch> {
Stopwatch watch = new Stopwatch();
Timer timer;
bool startStop = true;
String elapsedTime = '';
updateTime(Timer timer) {
if (watch.isRunning) {
setState(() {
startStop = false;
print("startstop Inside=$startStop");
elapsedTime = transformMilliSeconds(watch.elapsedMilliseconds);
});
}
}
#override
Widget build(BuildContext context) {
return new Container(
padding: EdgeInsets.all(20.0),
child: new Column(
children: <Widget>[
new Text(elapsedTime, style: new TextStyle(fontSize: 25.0)),
SizedBox(height: 20.0),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new FloatingActionButton(
heroTag: "btn1",
backgroundColor: Colors.red,
onPressed: startOrStop(),
child: new Icon(Icons.pause)),
SizedBox(width: 20.0),
new FloatingActionButton(
heroTag: "btn2",
backgroundColor: Colors.green,
onPressed: resetWatch,
child: new Icon(Icons.check)),
],
)
],
));
}
startOrStop() {
print("startstop=$startStop");
if(startStop == true) {
startWatch();
} else {
stopWatch();
}
}
startWatch() {
startStop = true;
watch.start();
timer = new Timer.periodic(new Duration(milliseconds: 100), updateTime);
}
stopWatch() {
startStop = false;
watch.stop();
setTime();
startStop = true;
}
setTime() {
var timeSoFar = watch.elapsedMilliseconds;
setState(() {
elapsedTime = transformMilliSeconds(timeSoFar);
});
}
transformMilliSeconds(int milliseconds) {
int hundreds = (milliseconds / 10).truncate();
int seconds = (hundreds / 100).truncate();
int minutes = (seconds / 60).truncate();
int hours = (minutes / 60).truncate();
String hoursStr = (hours % 60).toString().padLeft(2, '0');
String minutesStr = (minutes % 60).toString().padLeft(2, '0');
String secondsStr = (seconds % 60).toString().padLeft(2, '0');
return "$hoursStr:$minutesStr:$secondsStr";
}
}
When the first button is clicked the first time, the stopwatch should start running. When it is clicked the second time, it should pause it.

Answer 1

I solved your code by adding setState() in your start and stop watch methods, flipped the logic in said methods, and added () => before startOrStop in the onPressed callback (This was the dealbreaker).
Furthermore, I removed startStop = false; from updateTimer(). I simplified your startOrStop() if statement as you do not need to write == true when checking the boolean value, you can simply write if(startStop) when evaluating booleans.
Working example:
import 'dart:async';
import 'package:flutter/material.dart';
class NewStopWatch extends StatefulWidget {
#override
_NewStopWatchState createState() => _NewStopWatchState();
}
class _NewStopWatchState extends State<NewStopWatch> {
Stopwatch watch = Stopwatch();
Timer timer;
bool startStop = true;
String elapsedTime = '';
updateTime(Timer timer) {
if (watch.isRunning) {
setState(() {
print("startstop Inside=$startStop");
elapsedTime = transformMilliSeconds(watch.elapsedMilliseconds);
});
}
}
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Text(elapsedTime, style: TextStyle(fontSize: 25.0)),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FloatingActionButton(
heroTag: "btn1",
backgroundColor: Colors.red,
onPressed: () => startOrStop(),
child: Icon(Icons.pause)),
SizedBox(width: 20.0),
FloatingActionButton(
heroTag: "btn2",
backgroundColor: Colors.green,
onPressed: null, //resetWatch,
child: Icon(Icons.check)),
],
)
],
),
);
}
startOrStop() {
if(startStop) {
startWatch();
} else {
stopWatch();
}
}
startWatch() {
setState(() {
startStop = false;
watch.start();
timer = Timer.periodic(Duration(milliseconds: 100), updateTime);
});
}
stopWatch() {
setState(() {
startStop = true;
watch.stop();
setTime();
});
}
setTime() {
var timeSoFar = watch.elapsedMilliseconds;
setState(() {
elapsedTime = transformMilliSeconds(timeSoFar);
});
}
transformMilliSeconds(int milliseconds) {
int hundreds = (milliseconds / 10).truncate();
int seconds = (hundreds / 100).truncate();
int minutes = (seconds / 60).truncate();
int hours = (minutes / 60).truncate();
String hoursStr = (hours % 60).toString().padLeft(2, '0');
String minutesStr = (minutes % 60).toString().padLeft(2, '0');
String secondsStr = (seconds % 60).toString().padLeft(2, '0');
return "$hoursStr:$minutesStr:$secondsStr";
}
}

Answer 2

Thanks for the working example. That helped me solve a similar problem.
In case it helps anyone, I added a few bits to flarkmarup's code so that the Icon's more relate to the flow.
At the top I added a variable:
IconData btnPlayStatus = Icons.play_arrow;
In FloatingActionButton (btn1) I replaced the Icon with the variable like:
child: Icon(btnPlayStatus)),
Then added SetState to startOrStop like:
startOrStop() {
if(startStop) {
setState(() {
btnPlayStatus = Icons.pause;
});
startWatch();
} else {
setState(() {
btnPlayStatus = Icons.play_arrow;
});
stopWatch();
}
}