flutter_shader_snap

Create the Thanos snap effect with a simple widget.

Split (default)	Smoke

Getting Started

Add the dependency to your pubspec.yaml file:

dependencies:
  flutter_shader_snap: latest version

IMPORTANT

Add the shader to your pubspec.yaml file:

flutter:
  shaders:
    - packages/flutter_shader_snap/shaders/split_snap_effect_shader.glsl # add if you use SnapShaderType.split (default)
    - packages/flutter_shader_snap/shaders/split_reversed_snap_effect_shader.glsl # add if you use SnapShaderType.splitReversed
    - packages/flutter_shader_snap/shaders/smoke_snap_effect_shader.glsl # add if you use SnapShaderType.smoke

Create an AnimationController and just add the SnapShader widget:

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late final _controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 5),
  );

  @override
  Widget build(BuildContext context) {
    return SnapShader(
        controller: _controller,
        child: Any Widget...
    );
  }
}

Performance

The shader is only applied to the child widget when the animation is running, so it doesn't affect the performance of the app.

builder: (context, child) => controller.value == 0
    ? child!
    : AnimatedSampler

It works best with "transparent" widgets (for example Text), but you can use it with any widget.