thanos_snap_effect

Description:

thanos snap effect

High-performance, high-customizable, and easy-to-use "Thanos Snap" effect for Flutter.


    


Getting started #
IMPORTANT: This package uses the custom fragment shader, so you should include the shader file in your pubspec.yaml file.
flutter:
shaders:
- packages/thanos_snap_effect/shader/thanos_snap_effect.glsl
copied to clipboard
Usage #
This package provides a 'Snappable' widget.
The principle of using this widget is similar to "Transition" widgets, like "FadeTransition", "ScaleTransition", etc.
Just wrap your widget with the Snappable widget and pass the AnimationController (or any Animation
Snappable(
animation: animationController, // AnimationController object, or any other animation object with double tween from 0.0 to 1.0
child: MyWidget(), // Your widget that you want to animate
);
copied to clipboard
Check the example for more complex examples.
Customization #
You can customize the effect by passing the "outerPadding" or "style" properties to the Snappable widget.
Snappable(
animation: _animationController,
child: MyWidget(),
outerPadding: const EdgeInsets.all(40.0), // The padding around the widget where particles can appear. Default value is EdgeInsets.all(40.0)
style: SnappableStyle(
particleLifetime: 0.6, // Lifetime of particle before it disappears. Default value is 0.6. Must be between 0.0 and 1.0
fadeOutDuration: 0.3, // Duration of fade out animation of particle. Fade out effect starts in particleLifetime - fadeOutDuration and ends when particleLifetime ends. Default value is 0.3. Must be between 0.0 and particleLifetime
particleSpeed: 1.0, // Speed of particles. Default value is 1.0
particleSize: const SnappableParticleSize.squareFromRelativeWidth(0.01), // Size of 1 particle
),
);
copied to clipboard
Mastering the particleSize property #
There are 2 ways to define the size of particles:
Relative to the size of the widget
SnappableParticleSize.relative(width: 0.01, height: 0.02) // 1% of the width and 2% of the height of the widget
SnappableParticleSize.squareFromRelativeWidth(0.01) // 1% of the width of the widget. The height will be calculated to keep the square shape
SnappableParticleSize.squareFromRelativeHeight(0.01) // 1% of the height of the widget. The width will be calculated to keep the square shape
copied to clipboard
Absolute size (in dp)
SnappableParticleSize.absoluteDp(width: 16, height: 8) // 16dp width and 8dp height
copied to clipboard