Everything you need to know about Flutter page route transition

We know how easy it is to navigate from one route to another in Flutter. We just need to do push and pop.

To push:

Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );

To pop:

Navigator.pop(context);

That’s it. BUT… It’s very boring, there is no animation at all 😦 .

At Winkl when we started playing with animations we realized that page transition can really make your UI beautiful. If you want to have a slide transition like iOS you use CupertinoPageRoute. That’s it, nothing else.

Navigator.push(
    context, CupertinoPageRoute(builder: (context) => Screen2()))

But for custom transition Flutter provides different transition widgets. Let’s see how we can use them.

We know that Navigator.push takes two arguments (BuildContext context, Route<T> route). We can create our own custom page route with some transition animation. Let’s start with something simple like a slide transition.

Slide Transition

We will extend the PageRouteBuilder and define the transitionsBuilder which will return SlideTransition widget. The SlideTransition widget…