Wait for page transition to finish - flutter

Question

How can I detect if a page transition was finished in flutter?
Background: When I pop to a page, I want to start a function after the page transition has finished.

Answer 1

You can register a callback when you push your new route that can also contain data from the popped route, if you need, for example, to pass data from it.
Navigator.of(context).push(/*Some route*/).then((data) {
// You can call your function here. data will be null if nothing is passed from the popped route
});
If you want to pass data from the popped route, just do it like so
Navigator.of(context).pop(someData);
Edited
If you want to know when the transition actually ends, you can register a callback listener for it as well
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => RouteWidget())
..completed.then((_) {print('transition completed');},
),
);

Answer 2

Its also possible to wait for the push transition if you keep a reference to the route and using the didPush() TickerFuture
MaterialPageRoute route = MaterialPageRoute(builder: (context) => MyPage());
Navigator.of(context).push(route);
await route.didPush(); // you could also use then instead of await
// ROUTE FINISHED TRANSITION HERE
This can be used if you have multiple stacked navigators and you want smoother transitions between them. Like wait for Navigator 1 to finish the push before you pop the currently active Navigator 2 to show the page of Navigator 1

Answer 3

Another solution
is to await the animation to finish on the second page (this is usefull if you want to update the page after the animation transition)
first page:
...
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(milliseconds: 3000), //optional but useful for testing
pageBuilder: (_, animation, ___) => SecondPage(
pageBuilderAnimation: animation,
)));
...
second page:
class SecondPage extends StatefulWidget {
const SecondPage ({Key? key, this.pageBuilderAnimation});
final Animation<double>? pageBuilderAnimation;
#override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
bool isTransitioning = true;
#override
void initState() {
super.initState();
if (widget.pageBuilderAnimation != null)
widget.pageBuilderAnimation!.addListener(() {
if (widget.pageBuilderAnimation!.isCompleted)
setState(() => isTransitioning = false);
});
else
isTransitioning = false;
}
...
}