LayrzPageTransition

LayrzPageTransitions

Ready-made page-transition builders usable with both the imperative Navigator and go_router.

Metadata Predecessor: None — no direct ThemedPageTransitions exists in layrz_theme Phase: M5 (DESIGN-81) Domain: Navigation Primitive: FadeTransition / SlideTransition / ScaleTransition / RotationTransition (no Material PageTransitionsBuilder) Status: Merged · Review required.

---

Overview

LayrzPageTransitions is a namespace class (never instantiated — every member is static) of LayrzTransitionBuilder functions: fade, slide, scale, rotation, and none.

Using with PageRouteBuilder (imperative Navigator)

Navigator.of(context).push(
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const DetailPage(),
    transitionsBuilder: LayrzPageTransitions.slide,
    transitionDuration: LayrzPageTransitions.durationOf(context),
  ),
);

Using with go_router's CustomTransitionPage

GoRoute(
  path: '/detail',
  pageBuilder: (context, state) => CustomTransitionPage(
    key: state.pageKey,
    child: const DetailPage(),
    transitionsBuilder: LayrzPageTransitions.scale,
    transitionDuration: LayrzPageTransitions.durationOf(context),
  ),
);

No go_router dependency — the two call sites share one function shape

layrz_ui does not depend on go_router (it is a dependency of example/ only, never of the published package). PageRouteBuilder.transitionsBuilder and go_router's CustomTransitionPage.transitionsBuilder both declare an identical function shape:

Widget Function(BuildContext, Animation<double>, Animation<double>, Widget)

LayrzTransitionBuilder is a plain typedef matching that shape. Because it is structurally identical to both, a function built against it is assignable to either call site with zero adapter code and zero new dependencies — there is no go_router-specific wrapper anywhere in this module.

Default is fade

LayrzTransitionType.fade (mapping to LayrzPageTransitions.fade) is the design system's recommended page-transition default for callers who have not chosen one.

Every builder honors reduced motion the same way

Every builder checks MediaQuery.disableAnimationsOf first and, when it reports true, delegates to none instead of running its own animation — a user who has asked their platform for reduced motion never sees an animated page transition from this class, regardless of which named builder a caller selected. This check happens once per builder invocation (a route push or pop), not per frame, so it carries no meaningful performance cost.

durationOf — because a builder cannot set its own route duration

A LayrzTransitionBuilder cannot set PageRouteBuilder.transitionDuration (or go_router's sibling CustomTransitionPage.transitionDuration) itself — that is a parameter of the route, not of the function that builds the transition widget. LayrzPageTransitions.durationOf(context) gives callers a handle on the matching duration token (tokens.motion.dPageTransition, 250ms) so a route actually runs at the design system's page-transition speed instead of drifting from the curves the builders already use.

API

LayrzPageTransitions (static namespace, never instantiated)

Member	Signature	Notes
fade	LayrzTransitionBuilder	Fades the incoming page in while the outgoing page fades out (FadeTransition). The recommended default. secondaryAnimation is unused — both pages fading independently already reads as one crossfade.
slide	LayrzTransitionBuilder	Incoming page slides in from the trailing edge; outgoing page stays fixed beneath. Resolves Directionality so the start edge matches the ambient text direction (RTL-aware).
scale	LayrzTransitionBuilder	Incoming page scales up from 0.92 to 1.0 while fading in (ScaleTransition composed with FadeTransition).
rotation	LayrzTransitionBuilder	Incoming page rotates from a -0.02 turn to 0.0 (a subtle settle, not a full spin) while fading in.
none	LayrzTransitionBuilder	Returns child unwrapped — appears instantly. Every other builder delegates here when reduced motion is requested.
durationOf(BuildContext context)	Duration	Returns tokens.motion.dPageTransition (250ms). See above for why a builder can't set this itself.
resolve(LayrzTransitionType type)	LayrzTransitionBuilder	Resolves the builder matching an enum value, for a caller holding a single app-wide setting rather than a manual switch statement.

LayrzTransitionType (enum)

fade (default) · slide · scale · rotation · none — one-to-one with the static builders above, for callers who need a serializable/comparable handle on "which transition" (e.g. a future per-route configuration surface) rather than holding a function reference directly.

LayrzTransitionBuilder (typedef)

typedef LayrzTransitionBuilder = Widget Function(
  BuildContext context,
  Animation<double> animation,
  Animation<double> secondaryAnimation,
  Widget child,
);

Matches both PageRouteBuilder.transitionsBuilder and go_router's CustomTransitionPage.transitionsBuilder exactly — see the overview above.

Design tokens used

• Motion: easingEnter (slide/scale/rotation curve), dPageTransition (route duration, via durationOf).

Related documents

Component Catalog, Milestone 5

---

Last updated: 2026-08-28 (first documentation of this widget)