Introduction

GetX provides a powerful and flexible system for page transitions. You can choose from several built‑in animations or create your own custom transitions. Transitions can be defined per route (in GetPage) or overridden when calling Get.to. You can also control duration, curve, and even use your own Transition widget. This guide covers all the options to make your app’s navigation smooth and engaging.

Built‑in Transitions

GetX comes with a set of ready‑to‑use transitions that you can apply directly. Here are the most common ones:

Transition.fade – A simple cross‑fade animation.
Transition.fadeIn – Fade in the new page from transparent to opaque.
Transition.rightToLeft – Slide the new page in from the right (default).
Transition.leftToRight – Slide the new page in from the left.
Transition.upToDown – Slide the new page down from the top.
Transition.downToUp – Slide the new page up from the bottom.
Transition.zoom – Scale the new page from small to normal.
Transition.cupertino – iOS‑style slide (similar to CupertinoPageRoute).
Transition.native – Uses the platform’s default transition (iOS/Android).
Transition.size – Grows the new page from the source location.
Transition.noTransition – No animation.

Using Transitions with Named Routes

The most common way to set a transition is inside the GetPage definition. You can also set a default transition globally.

DARTRead-only

GetMaterialApp(
  defaultTransition: Transition.fade,
  getPages: [
    GetPage(
      name: '/home',
      page: () => HomePage(),
    ),
    GetPage(
      name: '/details',
      page: () => DetailsPage(),
      transition: Transition.cupertino,
      transitionDuration: Duration(milliseconds: 500),
      curve: Curves.easeInOut,
    ),
    GetPage(
      name: '/zoom',
      page: () => ZoomPage(),
      transition: Transition.zoom,
    ),
  ],
);

GetMaterialApp(
  defaultTransition: Transition.fade,
  getPages: [
    GetPage(
      name: '/home',
      page: () => HomePage(),
    ),
    GetPage(
      name: '/details',
      page: () => DetailsPage(),
      transition: Transition.cupertino,
      transitionDuration: Duration(milliseconds: 500),
      curve: Curves.easeInOut,
    ),
    GetPage(
      name: '/zoom',
      page: () => ZoomPage(),
      transition: Transition.zoom,
    ),
  ],
);

Transitions with Get.to (Widget‑Based Navigation)

When using Get.to, you can pass the transition parameters directly.

DARTRead-only

Get.to(
  DetailsPage(),
  transition: Transition.rightToLeft,
  duration: Duration(milliseconds: 400),
  curve: Curves.easeOutCubic,
);

Get.to(
  DetailsPage(),
  transition: Transition.rightToLeft,
  duration: Duration(milliseconds: 400),
  curve: Curves.easeOutCubic,
);

Custom Transitions

For complete control, you can create a custom transition by implementing the CustomTransition class or using the customTransition property in GetPage. You’ll receive the animation controller and the child widget.

DARTRead-only

GetPage(
  name: '/custom',
  page: () => CustomPage(),
  customTransition: (context, animation, secondaryAnimation, child) {
    return ScaleTransition(
      scale: animation,
      child: child,
    );
  },
);

GetPage(
  name: '/custom',
  page: () => CustomPage(),
  customTransition: (context, animation, secondaryAnimation, child) {
    return ScaleTransition(
      scale: animation,
      child: child,
    );
  },
);

You can also use Get.to with a custom transition by passing a CustomTransition object.

DARTRead-only

Get.to(
  CustomPage(),
  customTransition: (context, animation, secondaryAnimation, child) {
    return RotationTransition(
      turns: animation,
      child: child,
    );
  },
);

Get.to(
  CustomPage(),
  customTransition: (context, animation, secondaryAnimation, child) {
    return RotationTransition(
      turns: animation,
      child: child,
    );
  },
);

Transition Duration & Curve

You can customize the animation duration and curve for any transition. If not set, the default duration is 300ms and the curve is Curves.linear (or platform defaults).

DARTRead-only

GetPage(
  name: '/slow',
  page: () => SlowPage(),
  transition: Transition.fade,
  transitionDuration: Duration(seconds: 1),
  curve: Curves.bounceOut,
);

GetPage(
  name: '/slow',
  page: () => SlowPage(),
  transition: Transition.fade,
  transitionDuration: Duration(seconds: 1),
  curve: Curves.bounceOut,
);

Global Defaults

Set a default transition for all routes in GetMaterialApp. You can also set a default duration and curve.

DARTRead-only

GetMaterialApp(
  defaultTransition: Transition.rightToLeft,
  defaultTransitionDuration: Duration(milliseconds: 350),
  defaultTransitionCurve: Curves.easeInOut,
  getPages: [...],
);

GetMaterialApp(
  defaultTransition: Transition.rightToLeft,
  defaultTransitionDuration: Duration(milliseconds: 350),
  defaultTransitionCurve: Curves.easeInOut,
  getPages: [...],
);

Reversing Transitions on Pop

When you navigate back, the transition automatically reverses. The reverse animation uses the same settings (duration, curve). For custom transitions, you can use secondaryAnimation to animate the outgoing page.

Advanced: Animated Switcher Style

If you need more complex animations (e.g., shared element transitions), you can combine GetX navigation with Flutter’s Hero widget. Hero animations work seamlessly with GetX navigation because the routes are pushed onto the same navigator.

DARTRead-only

// In the first page
Hero(
  tag: 'avatar',
  child: CircleAvatar(backgroundImage: NetworkImage(url)),
)

// In the second page
Hero(
  tag: 'avatar',
  child: CircleAvatar(backgroundImage: NetworkImage(url), radius: 50),
)

// In the first page
Hero(
  tag: 'avatar',
  child: CircleAvatar(backgroundImage: NetworkImage(url)),
)

// In the second page
Hero(
  tag: 'avatar',
  child: CircleAvatar(backgroundImage: NetworkImage(url), radius: 50),
)

Best Practices

Use consistent transitions – For a cohesive experience, pick a default transition that matches your app’s style.
Keep durations short – 250–400ms is typical; longer durations can feel sluggish.
Use curves for polish – Curves.easeInOut or Curves.easeOutCubic give a natural feel.
Test on both platforms – iOS users expect slide, Android users may expect fade or slide from right.
Avoid heavy custom transitions – Keep them simple to maintain performance.

Common Mistakes

❌ Setting both transition and customTransition – They conflict; use only one. ✅ Choose either built‑in or custom.
❌ Using transition: Transition.cupertino on Android – It may look out of place; consider Transition.rightToLeft for Android. ✅ Test on both platforms.
❌ Forgetting to set transitionDuration – The default may be too fast or too slow for your effect. ✅ Explicitly set a duration that fits your design.
❌ Using Obx inside the transition builder – Might cause rebuilds; not recommended.

FAQ

Q: Can I have different transitions for push and pop?
A: Not directly, but you can create a custom transition that checks the direction using animation.status and applies different animations.
Q: How do I make a transition that slides from the bottom?
A: Use Transition.upToDown for entering from top or Transition.downToUp for from bottom. You can also create a custom slide.
Q: Can I combine multiple transitions (e.g., fade + scale)?
A: Yes, inside a custom transition you can combine FadeTransition and ScaleTransition or use AnimatedBuilder to compose.
Q: Does GetX support shared element transitions?
A: It supports Flutter’s native Hero widget without any extra code. Just use matching tags.
Q: How to remove all transitions?
A: Use transition: Transition.noTransition in your route or set defaultTransition: Transition.noTransition.

Conclusion

GetX navigation transitions give you the flexibility to create beautiful page animations with minimal effort. Whether you use the built‑in transitions or craft your own, you can easily control the look and feel of your app’s navigation. Combine them with GetX’s other features for a complete routing solution.

Try it yourself

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Transition Demo',
      defaultTransition: Transition.rightToLeft,
      getPages: [
        GetPage(name: '/', page: () => HomePage()),
        GetPage(
          name: '/fade',
          page: () => DetailsPage(title: 'Fade'),
          transition: Transition.fade,
          transitionDuration: Duration(milliseconds: 600),
        ),
        GetPage(
          name: '/zoom',
          page: () => DetailsPage(title: 'Zoom'),
          transition: Transition.zoom,
        ),
        GetPage(
          name: '/cupertino',
          page: () => DetailsPage(title: 'Cupertino'),
          transition: Transition.cupertino,
        ),
        GetPage(
          name: '/custom',
          page: () => DetailsPage(title: 'Custom Scale'),
          customTransition: (context, animation, secondaryAnimation, child) {
            return ScaleTransition(
              scale: animation,
              child: child,
            );
          },
        ),
      ],
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Transitions')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => Get.toNamed('/fade'),
              child: Text('Fade Transition'),
            ),
            ElevatedButton(
              onPressed: () => Get.toNamed('/zoom'),
              child: Text('Zoom Transition'),
            ),
            ElevatedButton(
              onPressed: () => Get.toNamed('/cupertino'),
              child: Text('Cupertino Transition'),
            ),
            ElevatedButton(
              onPressed: () => Get.toNamed('/custom'),
              child: Text('Custom Scale Transition'),
            ),
            ElevatedButton(
              onPressed: () => Get.to(
                DetailsPage(title: 'Right to Left'),
                transition: Transition.rightToLeft,
              ),
              child: Text('Right to Left (Get.to)'),
            ),
          ],
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  final String title;
  const DetailsPage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Get.back(),
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 3

Which property in GetPage defines the built‑in transition?

transition

customTransition

animation

pageTransition

of 3

How do you set a global default transition for all routes?

defaultTransition in GetMaterialApp

transition in each GetPage

Get.defaultTransition

It cannot be set globally

of 3

What widget can you use with GetX navigation to create shared element animations?

SharedElement

Hero

AnimatedSwitcher

FadeTransition

GetMaterialApp( defaultTransition: Transition.fade, getPages: [ GetPage( name: '/home', page: () => HomePage(), ), GetPage( name: '/details', page: () => DetailsPage(), transition: Transition.cupertino, transitionDuration: Duration(milliseconds: 500), curve: Curves.easeInOut, ), GetPage( name: '/zoom', page: () => ZoomPage(), transition: Transition.zoom, ), ], );

GetPage( name: '/custom', page: () => CustomPage(), customTransition: (context, animation, secondaryAnimation, child) { return ScaleTransition( scale: animation, child: child, ); }, );

// In the first page Hero( tag: 'avatar', child: CircleAvatar(backgroundImage: NetworkImage(url)), ) // In the second page Hero( tag: 'avatar', child: CircleAvatar(backgroundImage: NetworkImage(url), radius: 50), )

Try it yourself

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Transition Demo',
      defaultTransition: Transition.rightToLeft,
      getPages: [
        GetPage(name: '/', page: () => HomePage()),
        GetPage(
          name: '/fade',
          page: () => DetailsPage(title: 'Fade'),
          transition: Transition.fade,
          transitionDuration: Duration(milliseconds: 600),
        ),
        GetPage(
          name: '/zoom',
          page: () => DetailsPage(title: 'Zoom'),
          transition: Transition.zoom,
        ),
        GetPage(
          name: '/cupertino',
          page: () => DetailsPage(title: 'Cupertino'),
          transition: Transition.cupertino,
        ),
        GetPage(
          name: '/custom',
          page: () => DetailsPage(title: 'Custom Scale'),
          customTransition: (context, animation, secondaryAnimation, child) {
            return ScaleTransition(
              scale: animation,
              child: child,
            );
          },
        ),
      ],
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Transitions')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => Get.toNamed('/fade'),
              child: Text('Fade Transition'),
            ),
            ElevatedButton(
              onPressed: () => Get.toNamed('/zoom'),
              child: Text('Zoom Transition'),
            ),
            ElevatedButton(
              onPressed: () => Get.toNamed('/cupertino'),
              child: Text('Cupertino Transition'),
            ),
            ElevatedButton(
              onPressed: () => Get.toNamed('/custom'),
              child: Text('Custom Scale Transition'),
            ),
            ElevatedButton(
              onPressed: () => Get.to(
                DetailsPage(title: 'Right to Left'),
                transition: Transition.rightToLeft,
              ),
              child: Text('Right to Left (Get.to)'),
            ),
          ],
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  final String title;
  const DetailsPage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Get.back(),
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 3

Which property in GetPage defines the built‑in transition?

transition

customTransition

animation

pageTransition

of 3

How do you set a global default transition for all routes?

defaultTransition in GetMaterialApp

transition in each GetPage

Get.defaultTransition

It cannot be set globally

of 3

What widget can you use with GetX navigation to create shared element animations?

SharedElement

Hero

AnimatedSwitcher

FadeTransition

GetX Navigation Transitions: Custom Animations & Effects

GetX Navigation Transitions: Custom Animations & Effects

Introduction

Built‑in Transitions

Using Transitions with Named Routes

Transitions with Get.to (Widget‑Based Navigation)

Custom Transitions

Transition Duration & Curve

Global Defaults

Reversing Transitions on Pop

Advanced: Animated Switcher Style

Best Practices

Common Mistakes

FAQ

Conclusion

Try it yourself

Test Your Knowledge

Need help?

GetX Navigation Transitions: Custom Animations & Effects

GetX Navigation Transitions: Custom Animations & Effects

Introduction

Built‑in Transitions

Using Transitions with Named Routes

Transitions with Get.to (Widget‑Based Navigation)

Custom Transitions

Transition Duration & Curve

Global Defaults

Reversing Transitions on Pop

Advanced: Animated Switcher Style

Best Practices

Common Mistakes

FAQ

Conclusion

Try it yourself

Test Your Knowledge

Need help?