Wait for page transition to finish

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