How can i perform a simple 'fade out then fade in' with Page Route Builder in Flutter

user_10478484 0
Viewed 518

I am trying to achieve a nice simple fade animation from one navigation route to another using PageRouteBuilder. I want the current route to fade out completely, then after the old route is gone, the new route should fade in.

So far in my PageRouteBuilder class, I can fade the new route in from 0 to 1, but I want the old route to fade out fully first, then after the old route has faded out for the new route to fade in. So far in my current code, the old route disappears suddenly once the new route fading in has finished.

I also want to emphasise that I do not want them to fade out/in at the same time, but for the fade out of the old route then fade in for the new route to happen in sequence.

import 'package:flutter/material.dart';

class FadePageTransition extends PageRouteBuilder {
  final Widget child;

  FadePageTransition({
    required this.child,
  }) : super(
          transitionDuration: const Duration(milliseconds: 600),
          pageBuilder: (context, animation, secondaryAnimation) => child,
        );

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) => FadeTransition(
        opacity: animation,
        child: child,
      );
}

I know that the secondaryAnimation property controls the animation for how the old route leaves, doesn't it? but i'm just not sure how that would work in this context.

flutter-animation flutter
1 Answers

Use 2 FadeTransition in transitionBuilder: is the solution to your problem.

If that explanation is kinda hard to understand, this is how you use it.

transitionsBuilder: (
       BuildContext context,
       Animation<double> animation,
       Animation<double> secondaryAnimation,
       Widget child,
   ) {
     return FadeTransition(
       opacity: animation,
       child: FadeTransition(
         opacity: secondaryAnimation,
         child: child,
       ),
     );
   }

That's it!

user_158687010
Related