flutter_confetti

To use the confetti effect, follow these steps:

1. Instantiate a ConfettiController: Create a ConfettiController variable and pass in a Duration argument. It is recommended to instantiate this in your initState method and call dispose() in your dispose method to prevent memory leaks.
2. Add the ConfettiWidget: In your build method, return a ConfettiWidget. The only required attribute is the ConfettiController.

Note: Avoid using an excessive number of particles, as high particle counts can lead to performance issues.

// Conceptual usage pattern
late ConfettiController _controller;

@override
void initState() {
  _controller = ConfettiController(duration: const Duration(seconds: 2));
  super.initState();
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return ConfettiWidget(controller: _controller);
}

You can generate unique particle shapes by providing a custom function to the createParticlePath attribute of the ConfettiWidget. This function should accept a Size and return a Path object.

Below is an example of how to implement a star-shaped particle path:

Path drawStar(Size size) {
    // Method to convert degree to radians
    double degToRad(double deg) => deg * (pi / 180.0);

    const numberOfPoints = 5;
    final halfWidth = size.width / 2;
    final externalRadius = halfWidth;
    final internalRadius = halfWidth / 2.5;
    final degreesPerStep = degToRad(360 / numberOfPoints);
    final halfDegreesPerStep = degreesPerStep / 2;
    final path = Path();
    final fullAngle = degToRad(360);
    path.moveTo(size.width, halfWidth);

    for (double step = 0; step < fullAngle; step += degreesPerStep) {
      path.lineTo(halfWidth + externalRadius * cos(step),
          halfWidth + externalRadius * sin(step));
      path.lineTo(halfWidth + internalRadius * cos(step + halfDegreesPerStep),
          halfWidth + internalRadius * sin(step + halfDegreesPerStep));
    }
    path.close();
    return path;
  }

The ConfettiWidget provides several attributes to customize the animation:

The ConfettiWidget is the primary UI component used to render confetti on the screen. It requires a ConfettiController to manage the animation lifecycle. You can wrap any existing widget with child to place the confetti on top of it, or use it as a standalone overlay.

Key Configuration Options:

• confettiController: (Required) The controller that triggers the animation.
• emissionFrequency: Likelihood of particles being emitted per frame (0.0 to 1.0). Default is 0.02.
• numberOfParticles: Number of particles emitted per burst. Default is 10.
• maxBlastForce / minBlastForce: Determines the initial velocity of particles. maxBlastForce must be greater than minBlastForce.
• gravity: Speed at which particles fall (0.0 to 1.0). Default is 0.1.
• colors: A list of colors to use. If null, random colors are chosen.
• blastDirectionality: Controls if particles follow a specific direction or are radial.
• blastDirection: A radial value (in radians) determining the emission direction. pi (180°) emits to the left.
• createParticlePath: An optional function to return a custom Path for particle shapes.
• shouldLoop: If true, the animation resets upon completion for continuous emission.

ConfettiWidget(
  confettiController: myController,
  blastDirectionality: BlastDirectionality.directional,
  blastDirection: pi,
  colors: [Colors.red, Colors.blue, Colors.green],
  child: MyWidget(),
)