0

I want a page transition depending on the page I go. Transition.cupertino is perfect for one way, like this:

GetPage(
    name: Routes.SPLASH_SCREEN,
    page: () => SplashView(),
    binding: SplashScreenBinding(),
    transition: Transition.cupertino,
    transitionDuration: Duration(milliseconds: screenTransitionTime)),

... but when going back I want the same kind of transition (one page visually pushing the other out), but moving from left to right, instead of moving from right to left. There's no transition in the Transition-class doing this, so I tried to customize my own transition.

I tried for hours, but cannot find any working example. I need to know what's going here:

GetPage(
name: Routes.SPLASH_SCREEN,
page: () => SplashView(),
binding: SplashScreenBinding(),
customTransition: ????,
transitionDuration: Duration(milliseconds: screenTransitionTime)),

This is what I already tried without succes:

TransitionBuilder customTransition = (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return PageTransition(
      child: child,
      type: PageTransitionType.scale,
      alignment: Alignment.topCenter,
      duration: Duration(milliseconds: 800),
      curve: Curves.elasticOut,
    );
  };

GetPage(
  customTransition: customTransition,
  page: NewPage(),
)

and

TransitionBuilder customTransition = (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return ScaleTransition(
      scale: Tween<double>(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(
          parent: animation,
          curve: Curves.elasticOut,
        ),
      ),
      child: child,
    );
  };

GetPage(
  customTransition: customTransition,
  page: NewPage(),
)
xs2bas
  • 73
  • 1
  • 9

1 Answers1

0

You can wrap your whole widget with Willpopscope and add this method into it:

Get.off(
      null,
      routeName: route,
      arguments: arguments,
      transition: transition ?? Transition.rightToLeft,
      duration: const Duration(milliseconds: 350),
    );

This will add your custom back transition in GetX.

Cavin Macwan
  • 1,183
  • 5
  • 12
  • Thanks for the suggestion, but that I know. The problem is that the available transitions are not the ones I like, except for one: Transition.cupertino. but that one has only one direction: coming in from the right, pushing the current page away ... I need the same also, but than the other wat around, from the left te the right. Transition.leftToRight does a transition in the right direction, but leaves the old page on the same place, so it slides over it instead of pushing it away. – xs2bas Jan 18 '23 at 14:31