Component unmount in flutter (equivalent of React componentWillUnmount) - Flutter web - flutter

Question

I have widget that is unmounted on page change.
I am using flutter web.
I looked at all the methods here but I can't seem to find the one.
I tried
#override
void dispose() {
print("dispose?");
super.dispose();
}
#override
void deactivate() {
print("deactivate");
super.deactivate();
}
and neither is called.
It is a very simple thing I need to detect when the widget is not being "built" (rendered). I don't think having something to dtect the page change is the solution, it seems overkill.
Thank you
Adding code sample
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Named Routes Demo',
initialRoute: '/',
routes: {
'/': (context) => FirstScreen(),
'/second': (context) => SecondScreen(),
},
));
}
class FirstScreen extends StatefulWidget {
FirstScreen({Key key}) : super(key: key);
#override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
#override
void dispose() {
print("dispose");
super.dispose();
}
#override
void deactivate() {
print("deactivate");
super.deactivate();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: ElevatedButton(
child: Text('Launch screen'),
onPressed: () {
Navigator.pushNamed(context, '/second');
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Navigate back to the first screen by popping the current route
// off the stack.
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}
It seems neither deactive nor dispose are called when navigating to the second screen and the first screen widget stops being part of the render tree. So what to call to detect that Screen 1 leaves the render tree?

Answer 1

if the Widget has not mounted then return it. But you have to do it before any setState method
if (!mounted) return;
setState(() {});
or
if (mounted) {
//your code
};
setState(() {});
You can read more about it here: https://api.flutter.dev/flutter/widgets/State/mounted.html
Anyways the only thing beeing called before the build is the initState. Everything youre doing inside this is before the build.
initstate: https://api.flutter.dev/flutter/widgets/EditableTextState/initState.html

Answer 2

In the code example you added, screen 1 is never unmounted, thus those callbacks are not fired. Screen 2 is rendered on top of screen 1, and both are mounted.
You can confirm that screen 1 is always mounted, by adding a periodic callback in its state, add let it print out whether it's still mounted, for example:
import 'dart:async';
// in _FirstScreenState, add:
#override
void initState() {
Timer.periodic(Duration(seconds: 1), (timer) {
print("screen 1 is still mounted? $mounted");
});
super.initState();
}
You will see that, it is always mounted, even if screen 2 is rendered on top of screen 1.
Also, you can do the same deactivate and dispose logic for screen 2, and you will see that, when navigating back from screen 2 to screen 1, screen 2 is truly unmounted, and both of the callbacks work correctly. Thus again proving the problem isn't at those callbacks, it's that screen 1 wasn't unmounted.
So yeah... before you posted the code sample, I thought you ran into some error about widget being unmounted (defunct). But in this case, since you are using buttons and thus know exactly when page transition occurs, maybe you can just do whatever business logic you need to do, in the button callback?