Flutter - Custom Route Transition results in a black screen

Question

I am trying to customize the animation from my Navigator. This is how my current route looks like:

class HelpRoute<T> extends MaterialPageRoute<T> {
  HelpRoute({
    WidgetBuilder builder,
  }): super(builder: builder);

  @override
  Widget buildTransitions(BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child)
  {
    if (settings.isInitialRoute)
      return child;

    return new SlideTransition(
      position: new FractionalOffsetTween(
        begin: FractionalOffset.topRight,
        end: FractionalOffset.topLeft,
      )
      .animate(
        new CurvedAnimation(
          parent: animation,
          curve: Curves.ease,
        )
      ),
      child: child,
    );
  }

  @override Duration get transitionDuration => const Duration(milliseconds: 400);
}

And this works completely fine and fades in from right to left. But now I want a transition from left to right. And if i change the begin to topLeft and the end to topRight it goes crazy and ends up in a black screen.

Is there another option I have to use in order to make that work? Thanks in advance

Answer 1

You want the new route to start completely offscreen left, which is a FractionalOffset of -1.0, 0.0. You want it to end up with a FractionalOffset of 0.0, 0.0, a.k.a FractionalOffset.topLeft. Change your constructor arguments to FractionalOffsetTween as follows:

new FractionalOffsetTween(
    begin: const FractionalOffset(-1.0, 0.0),
    end: FractionalOffset.topLeft,
)