Flutter make pop animation with same duration as push

user_11968226 0
Viewed 529

I am using Hero and a PageRouteBuilder to navigate with animations between two screens. The problem is that my pop animation is way shorter than my push and that looks a bit clunky. Here is a ScreenVideo for a better understanding.

That is how I build my push:

static PageRouteBuilder _buildTransitionToMonthPage(Month month) {
    return PageRouteBuilder(
      transitionDuration: Duration(milliseconds: 1000),
      pageBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation) {
        return MonthPage(
          month: month,
        );
      },
      transitionsBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation, Widget child) {
        return FadeTransition(opacity: animation, child: child);
      },
    );
  }
}

And on the other Screen I simply call Navigator.pop(context). What am I missing here? Shoudn't it simply reverse the animation duration?

dart flutter transition routes push
1 Answers

Based on the documentation for PageRouteBuilder, for the property transitionDuration it says: "The duration the transition going forwards." Initially, it is set to 300ms duration (Check source code).

this.transitionDuration = const Duration(milliseconds: 300)

Additionally there is a reverseTransitionDuration property which states: "The duration the transition going in reverse." Initially its value is the same as transitionDuration

this.reverseTransitionDuration = const Duration(milliseconds: 300),

Why are you facing this issue?

You have provided the forward transition as 1000ms whereas reverse transition is still 300ms. So, adding reverseTransitionDuration: const Duration(1000) will resolve your issue.

user_114404490
Related