Flutter - Animation in Route Transition

Routes are simply Pages in Flutter applications. An application often needs to move from one page to another. However, animations can be used to make these transitions smoother. These animations can be used to curve or tween the Animation object of the PageRouteBuilder class to alter the transition animation.

We will discuss them in detail here.

Steps to Implement Animation in Route Transition

Step 1 : Adding the PageRouteBuilder

Using the PageRouteBuilder, create two routes with the first route as the Homepage with a button "Goto page 2" and the second route with just an empty page named "Page 2", using the code below.

main.dart:

Step 2 : Adding a tween

You can build a tween of an animation object by using the below code :

main.dart:

Step 3 : Creating an AnimatedWidget

The AnimatedWidget has the property of its state once the animation value changes. You can create one like below:

Step 4 : Creating a CurveTween

Use the below code to create a CurveTween:

Step 5 : Combining Both Tweens

Use the chain() method to combine two tweens, as shown below:

No, we use the animation.drive() method to create an Animation object of the combined tweens, as shown below:

Complete Source Code

main.dart:

Output: