Custom Code: How to Add Page Navigation with Animated Transition

In custom code, to navigate to another page, I'm using something like:

onPressed: () {
   context.pushNamed("wantedPage");
}

This works perfectly, however, i want to animate the page transition on navigation.
I know that FlutterFlow already has that. I tried setting it in FlutterFlow and copied the code, but it doesn't work in the custom widget code for some reason.

onPressed: () async {
    context.pushNamed(
      "wantedPage",
      extra: <String, dynamic>{
        kTransitionInfoKey: TransitionInfo(
          hasTransition: true,
          transitionType: PageTransitionType.topToBottom,
          duration: Duration(milliseconds: 500),
        ),
      },
    );
},

Am I missing something?