#6 Flutter Animated Page Transition(Flutter Series by Akshit Madan)

Hey there, in this blog we are going to see how you can implement an animated page transition to your Flutter App routes/pages.

Lets first see what are you going to get at the end —

First you need to know that in Flutter Page Routes are categorised into 3 divisions —

1. Cupertino Page Route (iOS)
2. Material Page Route
3. Page Route Builder

For customising the transitions from one page to another , we use Page Route Builder which take 3 properties —

1. pageBuilder — It defines the what the Route Builder needs to return after the animaion
2. transitionDuration — Duration of the transition.
3. transitionBuilder — For defining the animation type, we will use CurvedAnimation curve in this article

main.dart

So, when you press the RaisedButton of the first page, it activates the PageRouteBuilder and calls the Scale Transition which implements the elasticInOut Curved Animation.

Thanks for reading…..