flutter_shader_snap

Description:

flutter shader snap

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
copied to clipboard
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
copied to clipboard
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...
);
}
}
copied to clipboard
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
copied to clipboard
It works best with "transparent" widgets (for example Text), but you can use it with any widget.