Flutter Animation in Route Transition with Example

In Flutter, you can use animations to create beautiful and engaging user interfaces. In this blog, we will discuss how to use animations in route transitions with an example.

Step 1: Adding Animation Dependencies

The first step is to add the necessary dependencies for animations. You can do this by adding the following lines of code to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  animated_text_kit: ^4.2.1
  flare_flutter: ^3.0.0
  flare_dart: ^3.0.0
  flutter_svg: ^0.22.0
  flutter_staggered_animations: ^1.0.0​

In this code, we have added several dependencies for different types of animations.

• animated_text_kit is a package that provides animated text widgets.
• flare_flutter is a package that allows you to use animations created in the Flare editor.
• flutter_svg is a package that allows you to use SVG images in your app.
• flutter_staggered_animations is a package that provides staggered animations for widgets.

Step 2: Creating Animation Transition

The next step is to create an animated transition between two screens in your Flutter app. You can do this by using the PageRouteBuilder class to define the animation transition.

Here is an example of how to use the PageRouteBuilder class to create an animated transition between two screens:

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                transitionDuration: Duration(milliseconds: 500),
                transitionsBuilder:
                    (context, animation, secondaryAnimation, child) {
                  var begin = Offset(1.0, 0.0);
                  var end = Offset.zero;
                  var curve = Curves.ease;
                  var tween = Tween(begin: begin, end: end)
                      .chain(CurveTween(curve: curve));
                  return SlideTransition(
                    position: animation.drive(tween),
                    child: child,
                  );
                },
                pageBuilder: (context, animation, secondaryAnimation) =>
                    SecondScreen(),
              ),
            );
          },
        ),
      ),
    );
  }
}
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('This is the second screen'),
      ),
    );
  }
}​

In this example, we have defined two screens: FirstScreen and SecondScreen. In the FirstScreen widget, we have defined a RaisedButton that, when pressed, navigates to the SecondScreen.

To create an animated transition between the two screens, we use the PageRouteBuilder class. We define the transitionDuration to be 500 milliseconds, which means that the animation will take half a second to complete.

We also define the transitionsBuilder method, which takes an BuildContext, an Animation<double>, an Animation<double>, and a Widget as parameters. This method returns a SlideTransition widget, which slides the SecondScreen in from the right.

The pageBuilder method defines the SecondScreen widget that will be displayed after the animation transition.