How to measure time of mounted widget in flutter? - flutter

Question

I have a simple StopWatchController which i want to use to measure the time it takes to to mount SecondPage when clicking on the button next page in MyHomePage. I am not sure how i can achieve a succesfull return of the time between clicking and mounting. The return is always the start time when i debugPrint. How can i achieve a succesfull stopWatch.elapsed?
full code:
import 'package:flutter/material.dart';
class StopWatchController {
var stopWatch = Stopwatch();
stopWatchHandler(timer) {
if (timer == "start") {
stopWatch.start();
} else if (timer == "stop") {
stopWatch.stop();
debugPrint(stopWatch.elapsed.toString());
return stopWatch.elapsed.toString();
}
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({
Key? key,
required this.title,
}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ElevatedButton(
child: Text("next page"),
onPressed: (){
Navigator.of(context)
.push(
MaterialPageRoute(
builder: (context) =>
const SecondPage()));
StopWatchController().stopWatchHandler("start");
}
)
),
);
}
}
class SecondPage extends StatefulWidget {
const SecondPage({
Key? key,
}) : super(key: key);
#override
State<SecondPage> createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
#override
initState(){
if (this.mounted == true) {
StopWatchController().stopWatchHandler("stop");
}
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
),
body: const Center(
child: Text("")
),
);
}
}
Edit
It debugPrint: 0:00:00.000000 when i press on next page

Answer 1

Try this in your stopWatchHandler(timer) function
stopWatchHandler(timer) {
if (timer == "start") {
stopWatch.start();
} else if (timer == "stop") {
stopWatch.stop();
debugPrint(stopWatch.elapsed.inMilliseconds.toString());
return "executed in ${stopwatch.elapsed.inMilliseconds}ms"; //<=== change-here
}
}