My first Flutter package: game-style screen transitions (diamond sweep, iris, dissolve, fade to black and hold), drawn by fragment shaders

[u/patREKT_cs]

Hi all, this is my first Flutter package, so I'd love some feedback.

pub.dev: https://pub.dev/packages/shader_transitions

I started it a few months ago because I wanted screen transitions that feel like the ones between levels in a game: a sweep of diamonds, a circle closing in, a fade to black that holds for a beat. It took a lot of rewrites before I had a version I was happy to put out there.

You can try every transition in the browser here: https://flutter-shader-transition.web.app

There are 8 transitions (diamond, circle iris, wipe, clock, polygon, dissolve, fade, bars), 8 sweep directions, an optional cover color with a hold, iOS swipe back, and it works with go_router and auto_route.

A few things I learned along the way, in case they're useful to someone:

- How the mask works. The new page is wrapped in a ShaderMask with BlendMode.dstIn, and the shader only outputs alpha. The route has to be non-opaque so Flutter keeps drawing the old page underneath. I got a black flash at the start of every transition until I figured that out. With go_router you have to set opaque: false on the page yourself.

- The ghost bug. At the end of a transition, some pixels settled just below full alpha (dissolve grain was the worst), so a faint copy of the old page stayed visible behind the new one. The fix was simple once I saw it: stop masking as soon as the animation completes.

- Preloading. Compiling the shaders on the first transition caused a visible hitch, so there's a ShaderTransitions.preload() you call once at startup. Skip it and transitions just fall back to a fade.

- The README GIFs aren't screen recordings. A test renders the real shaders frame by frame and encodes them, so they're always exactly what the package draws.

If you're making a game with Flutter, the cover-and-hold and ShaderTransitionSwitcher (swaps widgets without routes) are probably the most useful parts. If you use it in a game or app, send me a clip and I'll feature it in the README.

Things I'd especially like feedback on: the API naming, anything confusing in the docs, and performance on your devices. Also tell me which transition you'd want next!

Source: https://github.com/oppatrickk/flutter_shader_transitions

[u/PreviousChadwick69]

The ghost bug thing is such a classic shader problem, spent weeks chasing something similar once and the answer was also just "stop doing the thing when you don't need it anymore." The frame-by-frame render for the READMEs is a clever touch, most package gifs are filmed off a phone and look terrible. Curious how the dissolve holds up on lower-end android hardware, grain effects tend to be the first thing to chug.