Flutter Animation in Route Transition
Pages in Flutter Animation apps are what we call routes. It is common for a program to need to navigate between pages. However, animations can be utilized to make these transitions more seamless.
You can change the transition animation by bending or tweening the Animation object of the PageRouteBuilder class using these animations. We will talk about Flutter Animation in Route Transition in more depth here.
Flutter Animation in Route Transition
Routes as Pages in Flutter: Every screen or page can be considered a “route” in Flutter forum. Changing screens is like choosing between different pathways.
ExampleÂ
// Define two simple pages (routes)
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate to the second page
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(child: Text('This is the second page!')),
    );
  }
}There are two distinct paths here: HomePage and SecondPage.
Using Animations for Smooth Transitions
By including Flutter Animation, you may enhance the visual attractiveness and user engagement of your app’s screen transitions. For example, instead of appearing out of nowhere, the new screen may slide in from the side.
How to Use Flutter Animation in Route Transition
Add the PageRouteBuilder: The PageRouteBuilder in Flutter is a versatile class that enables you to design personalized transitions between two pages or routes in your app. If you want to switch between screens, you can customize the transition using PageRouteBuilder.Â
This allows you to choose how the new screen should appear, such as sliding in, fading in, or using a different animation.
Example
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child; // No animation yet
    },
  ),
);Add a Tween
Flutter animations rely on Tweens, which define the transitions between states that values should take. You can use a Tween to tell a page where to begin and where to finish moving it from one location to another. As the animation progresses, the Tween determines the values between these places.
Example
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // Define a Tween to move the page from right off-screen to fully on-screen
      var begin = Offset(1.0, 0.0); // Off-screen to the right
      var end = Offset.zero; // On-screen position (0,0)
      var tween = Tween(begin: begin, end: end); // Define the Tween
      // Connect the Tween to the animation using the drive method
      var offsetAnimation = animation.drive(tween);
      // Use SlideTransition to apply the Tween animation to the page
      return SlideTransition(
        position: offsetAnimation,
        child: child,
      );
    },
  ),
);Create an AnimatedWidget
An AnimatedWidget in Flutter Animation makes it easier to create animations by automatically updating itself whenever the animation changes. AnimatedWidget simplifies the process of handling changes in your widget during an animation, allowing you to create smooth and dynamic UI transitions with ease in flutter.
ExampleÂ
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // Define a Tween for the SlideTransition
      var begin = Offset(0.0, 1.0); // Start from off-screen at the bottom
      var end = Offset.zero; // End at the normal position (on-screen)
      var tween = Tween(begin: begin, end: end); // Define the Tween
      // Apply the Tween to the animation using the drive method
      var offsetAnimation = animation.drive(tween);
      // SlideTransition is an AnimatedWidget that animates the movement of the widget
      return SlideTransition(
        position: offsetAnimation, // Link the animation to the position
        child: child, // The widget that will be animated
      );
    },
  ),
);Create a CurveTween
A CurveTween in Flutter Animation provides additional control over the animation by determining how the animation’s progress changes over time. A Tween sets the beginning and ending values, while a CurveTween lets you add a curve to the animation. This curve can create a smoother transition, like easing in and out, for a more natural feel.Â
Example
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // Define a Tween for the SlideTransition
      var begin = Offset(1.0, 0.0); // Start off-screen to the right
      var end = Offset.zero; // End at the normal position (on-screen)
      var tween = Tween(begin: begin, end: end);
      // Apply a CurveTween to the animation for smoother movement
      var curvedAnimation = CurvedAnimation(
        parent: animation,
        curve: Curves.easeInOut, // Using easeInOut curve
      );
      // Use the CurveTween in combination with the Tween
      var offsetAnimation = tween.animate(curvedAnimation);
      // SlideTransition is an AnimatedWidget that animates the movement of the widget
      return SlideTransition(
        position: offsetAnimation, // Link the animated position to the SlideTransition
        child: child, // The widget that will be animated
      );
    },
  ),
);Combine Both Tweens
Blending a Tween and a CurveTween might give your animation a more professional and eye-catching look. By Flutter Animation utilizing the Tween to manage the values’ movement or change and the CurveTween to alter their timing and speed, you can completely customize the animation’s appearance in flutter dialog.
Example
Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // Define a Tween to move the page from off-screen to on-screen
      var begin = Offset(1.0, 0.0); // Start off-screen to the right
      var end = Offset.zero; // End at the normal position (on-screen)
      var tween = Tween(begin: begin, end: end);
      // Combine the Tween with a CurveTween for smoother animation
      var curvedAnimation = CurvedAnimation(
        parent: animation,
        curve: Curves.easeInOut, // Apply an easeInOut curve
      );
      // Apply the CurveTween to the Tween
      var offsetAnimation = tween.animate(curvedAnimation);
      // Use SlideTransition to apply the combined animation
      return SlideTransition(
        position: offsetAnimation,
        child: child,
      );
    },
  ),
);
