Member-only story

Everything you need to know about Flutter page route transition

Divyanshu Bhargava
Flutter Community
Published in
5 min readApr 21, 2019

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…

--

--

Flutter Community
Flutter Community

Published in Flutter Community

Articles and Stories from the Flutter Community

Divyanshu Bhargava
Divyanshu Bhargava

Written by Divyanshu Bhargava

Building @BettrDo, @buildMirai 🚀 @GoogleDevExpert for @FlutterDev & @dart_lang 💙 Organizer @flutter_ad 🇦🇪 Explorer | Builder | Dreamer

Responses (30)