Fade transition on Push Route Flutter

How to create Fade transition on Push Route Flutter – A fade on push route in Flutter is an animation effect that smoothly transitions from one screen to another by gradually fading out the old screen while fading in the new screen. This creates a visually appealing effect that makes the transition between screens more seamless and engaging.

Push routes push the new screen over the previous screen. A fade transition on push route replaces the default transition with a custom animation that fades out the old screen and fades in the new screen.

Using Flutter PageRouteBuilder class, we can create this transition smoothly. You may modify the length and style of the animation used to switch between screens using the PageRouteBuilder. The FadeTransition widget gradually fades out the old screen while animating the new one’s opacity on push route.

When pushing a route in Flutter, you can construct a fade transition by using the PageRouteBuilder class and adjusting the transitionDuration property.

example:

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: Duration(milliseconds: 500),
    pageBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return MyPage();
    },
    transitionsBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);

Here, a custom route including a fade transition is built using the PageRouteBuilder. PageBuilder returns the widget for the navigation stack. After the transitionsBuilder method is called, the animated widget is returned. The opacity of the child widget is animated using a FadeTransition widget. The animation object’s opacity controls smoothness.

complete example of how to create a fade transition on push route in Flutter:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details Page'),
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                transitionDuration: Duration(milliseconds: 500),
                pageBuilder: (BuildContext context, Animation<double> animation,
                    Animation<double> secondaryAnimation) {
                  return DetailsPage();
                },
                transitionsBuilder: (BuildContext context, Animation<double> animation,
                    Animation<double> secondaryAnimation, Widget child) {
                  return FadeTransition(
                    opacity: animation,
                    child: child,
                  );
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details Page'),
      ),
      body: Center(
        child: Text('This is the details page'),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

The two pages we’re working with here are called HomePage and DetailsPage. A fade transition is used to take the user from the HomePage to the DetailsPage when they touch the button there. To animate the DetailsPage opacity, the PageRouteBuilder is used to construct a custom route with a fade transition, and the FadeTransition widget is then used to implement that transition.

To make the navigating of your app more interesting and aesthetically attractive, you may next want to study up on the various transition effects that are at your disposal.

Some other types of transition effects include:

Slide transition: This effect makes the new screen glide in from a certain angle, for as from the bottom or the right.
Scale transition:This effect zooms in on the new screen from a set position, such the middle of the display.
Rotation transition:This effect brings a new screen in at an arbitrary angle, typically between 90 and 180 degrees.
Custom transition: With the PageRouteBuilder class and some property animation, you can also make your own unique transition effects.

These transition effects will increase users’ engagement with your app.

The PageRouteBuilder class can be used in conjunction with the Navigator widget to create a streamlined transition between screens in your project.

Have a look at this illustration of a slide transition effect in action:

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: Duration(milliseconds: 500),
    pageBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return DetailsPage();
    },
    transitionsBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      return SlideTransition(
        position: Tween<Offset>(
          begin: const Offset(1.0, 0.0),
          end: Offset.zero,
        ).animate(animation),
        child: child,
      );
    },
  ),
);

In this example, the PageRouteBuilder creates a custom route with a slide transition. Tween objects specify the animation start and end positions in the SlideTransition widget position attribute. The animation object controls the transition when the Tween object’s animate method is called.

Implement scaling and rotation transition effects using similar methods. Customizing your app’s transition effects can improve user engagement and visual attractiveness. read too How to Create a Bottom NavigationBar in Flutter