Animate the relationship between screens

A page owns the transition

Choose pageBuilder when you need page-level control. CustomTransitionPage supplies animations that you can use to build a transition around the child. Keep a stable pageKey so the framework can identify the page correctly.

Prefer meaning to spectacle

A short fade can soften a context change. A directional transition can show a parent-detail relationship. Repeating large animations on every filter update can make the application harder to navigate.

Accessibility belongs in the implementation

Inspect the user's animation preference using the Flutter APIs for your SDK and reduce or remove nonessential motion. Test focus placement after the transition; a visually completed screen is not useful if keyboard focus remains on an obscured element.

Verify on the real platforms

Browser history, Android system navigation, and iOS gestures can expose behavior that a desktop click does not. The historical animated examples are preserved separately so their old package APIs are not mistaken for current ones.

GoRoute(
  path: '/details',
  pageBuilder: (context, state) => CustomTransitionPage<void>(
    key: state.pageKey,
    child: const DetailsScreen(),
    transitionsBuilder: (context, animation, secondary, child) {
      return FadeTransition(opacity: animation, child: child);
    },
  ),
)