Flutter: Continuously running stopwatch when switching screens - flutter

Question

I have a stopwatch widget which is called from the Detailed Activity page on one of my screens that starts when the page loads. How am I able to keep it continuously running in the background so that when I navigate from Detailed Activity to the Home page, I can display that same stopwatch's time?
At the moment, the Home page displays the last saved time (into the variable). Instead I would like this to continue incrementing each second and vice versa switching between the two screens. I've tried adding the startWatch() and initState() method in my Home page, but don't know how to pass the stopwatch value while navigating to the Detailed Activity page
To clarify this more, my thinking was on the Detailed Activity page it is at e.g. 00:15:00 -> pass it into Home page and call initState() to automatically start the timer again. Would this work?
Timer.dart
class NewStopWatch extends StatefulWidget {
#override
_NewStopWatchState createState() => new _NewStopWatchState();
}
class _NewStopWatchState extends State<NewStopWatch> {
static _NewStopWatchState stopwatch;
Stopwatch watch = new Stopwatch();
Timer timer;
bool startStop = true;
static String elapsedTime = '';
String duration;
updateTime(Timer timer) {
if (watch.isRunning) {
setState(() {
elapsedTime = transformMilliSeconds(watch.elapsedMilliseconds);
User.getCurrentUser().getCurrentActivity().setElapsedTime(elapsedTime);
});
}
}
#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>[
FloatingActionButton(
heroTag: "btn1",
backgroundColor: Colors.red,
onPressed: () => startOrStop(),
child: Icon(Icons.pause)),
SizedBox(width: 20.0),
FloatingActionButton(
heroTag: "btn2",
backgroundColor: Colors.green,
onPressed: () => completeActivity(),
child: Icon(Icons.check)),
],
)
],
));
}
void initState() {
super.initState();
WidgetsBinding.instance
.addPostFrameCallback((_) => startWatch());
}
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();
});
}
resetWatch() {
watch.reset();
setTime();
}
setTime() {
var timeSoFar = watch.elapsedMilliseconds;
setState(() {
elapsedTime = transformMilliSeconds(timeSoFar);
});
}
completeActivity() { //do I call activity.stopActivity()?
return showDialog(
context: context,
builder: (context) => new AlertDialog(
title: new Text('Complete Activity?',
style: new TextStyle(color: Colors.black, fontSize: 20.0)),
actions: <Widget>[
new FlatButton(
onPressed: () {
duration = elapsedTime;
print("Current activitiy: ${User.getCurrentUser().getCurrentActivity()}");
// User.getCurrentUser().completeActivity();
User.getCurrentUser().addPastActivity(User.getCurrentUser().getCurrentActivity());
User.getCurrentUser().getCurrentActivity().setStatus(ActivityStatus.completed);
User.getCurrentUser().setCurrentActivity(null);
Navigator.push(context, MaterialPageRoute(builder: (context) => FrontPage()));
// Navigator.popUntil(context, ModalRoute.withName("/"),);
},
child:
new Text('Yes', style: new TextStyle(fontSize: 18.0)),
),
new FlatButton(
onPressed: () => Navigator.pop(context), // this line dismisses the dialog
child: new Text('No', style: new TextStyle(fontSize: 18.0)),
)
],
),
) ??
false;
}
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";
}
static String getElapsedTime() {
return elapsedTime;
}
}

Answer 1

It is not 100% clear for me if this solution will work since you posted a lot of code but it is missing the part where you actually display the NewStopWatch but I hope this solution helps:
Pass the Stopwatch and the timer as arguments in the init method of your NewStopWath class and have them passed from your main page - the page where you want them displayed as well... i suppose it is the FrontPage.
Like so:
class FrontPage extends StatelessWidget {
Stopwatch watch = Stopwatch();
Timer timer = Timer.periodic(Duration(milliseconds: 100), updateTime);
//... code
//.. somewhere a NewStopWatch is created
return NewStopWatch(watch, timer);
}
//... code
class NewStopWatch extends StatefulWidget {
Stopwatch watch;
Timer timer;
NewStopWatch(this.watch, this.timer);
#override
_NewStopWatchState createState() => new _NewStopWatchState();
}
class _NewStopWatchState extends State<NewStopWatch> {
static _NewStopWatchState stopwatch;
bool startStop = true;
static String elapsedTime = '';
String duration;
Stopwatch get watch => widget.watch;
Timer get timer => widget.timer;
void initState() {
super.initState();
WidgetsBinding.instance
.addPostFrameCallback((_) => startWatch());
}
Be sure to check if you should remove timer = Timer.periodic(Duration(milliseconds: 100), updateTime); from startWatch()
maybe you don't need to have it passed as an argument