shader_transitions library

GPU-accelerated, shader-based screen transitions for Flutter.

Quick start

1. Preload shaders at app startup (compiling shaders is slow):

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await ShaderTransitions.preload();
     runApp(const MyApp());
   }
   

2. Push a route:

   Navigator.of(context).push(
     ShaderTransitions.diamond(page: const NextPage()),
   );
   Navigator.of(context).push(
     ShaderTransitions.circle(page: const NextPage(), invert: true),
   );
   Navigator.of(context).push(
     ShaderTransitions.wipe(
       page: const NextPage(),
       direction: SweepDirection.rightToLeft,
     ),
   );
   

3. go_router / auto_route — use ShaderTransitionBuilders.create; app-wide — use ShaderPageTransitionsBuilder.

Classes

BarsTransition

A venetian-blind reveal: count parallel bars along direction each run the same wipe simultaneously.

CircleTransition

A circular iris reveal that grows (or, with invert, shrinks) from origin.

ClockTransition

A radial "clock" sweep around origin, optionally fanned into sectors identical wedges.

DiamondTransition

A grid of diamond cells that reveal the incoming page in a sweeping band.

DissolveTransition

A noise-driven dissolve: pixels reveal in a random grain as progress rises. grain widens the per-pixel fade window (softer, less speckled).

FadeShaderTransition

A uniform shader cross-fade. Equivalent in look to a FadeTransition but driven by the same shader pipeline (so it composes with cover and the lifecycle callbacks like every other ShaderTransition).

PolygonTransition

A regular-polygon iris reveal from origin. A high sides count approximates CircleTransition.

ShaderPageRoute<T>

A PageRouteBuilder that applies a ShaderTransition between the outgoing and incoming routes.

ShaderPageTransitionsBuilder

A PageTransitionsBuilder that applies a ShaderTransition app-wide via ThemeData.pageTransitionsTheme.

ShaderRegistry

Singleton cache of compiled ui.FragmentProgram instances.

ShaderTransition

A shader-backed screen transition.

ShaderTransitionBuilders

Factory + PageTransitionsBuilder for using a ShaderTransition with any router.

ShaderTransitions

Entry point: preload at startup, then the factory methods to push shader-powered routes.

ShaderTransitionSwitcher

An AnimatedSwitcher analog that runs a ShaderTransition between two child widgets instead of between routes.

TransitionCover

Groups the cover color and its hold duration for a "fade-through-color" transition.

WipeTransition

A straight feathered edge that travels across the screen in a SweepDirection, optionally rotation-rotated.

Enums

SweepDirection

The direction in which a directional transition sweeps across the screen.

Extensions

SweepDirectionVector on SweepDirection

Provides the (non-normalized) 2D direction vector for each SweepDirection.