🎉 Flutter Confetti 🎉

Features

Getting started

import 'package:flutter_confetti/flutter_confetti.dart';

Confetti.launch(
 context,
 options: const ConfettiOptions(
 particleCount: 100, spread: 70, y: 0.6)
);

API

Confetti.launch(BuildContext context, {required ConfettiOptions options, ParticleBuilder? particleBuilder})

ConfettiOptions

class ConfettiOptions {
 /// The number of confetti to launch.
 final int particleCount;
 /// The angle in which to launch the confetti, in degrees. 90 is straight up.
 final double angle;
 /// How far off center the confetti can go, in degrees.
 /// 45 means the confetti will launch at the defined angle plus or minus 22.5 degrees.
 final double spread;
 /// How fast the confetti will start going, in pixels.
 final double startVelocity;
 /// How quickly the confetti will lose speed.
 /// Keep this number between 0 and 1, otherwise the confetti will gain speed.
 /// Better yet, just never change it.
 final double decay;
 /// How quickly the particles are pulled down.
 /// 1 is full gravity, 0.5 is half gravity, etc.,
 /// but there are no limits. You can even make particles go up if you'd like.
 final double gravity;
 /// How much to the side the confetti will drift.
 /// The default is 0, meaning that they will fall straight down.
 /// Use a negative number for left and positive number for right.
 final double drift;
 /// Optionally turns off the tilt and wobble that three dimensional confetti
 /// would have in the real world.
 final bool flat;
 /// How many times the confetti will move.
 final int ticks;
 /// The x position on the page,
 /// with 0 being the left edge and 1 being the right edge.
 final double x;
 /// The y position on the page,
 /// with 0 being the top edge and 1 being the bottom edge.
 final double y;
 /// An array of color strings.
 final List<Color> colors;
 /// Scale factor for each confetti particle.
 /// Use decimals to make the confetti smaller.
 final double scalar;
 const ConfettiOptions(
 {this.colors = defaultColors,
 this.particleCount = 50,
 this.angle = 90,
 this.spread = 45,
 this.startVelocity = 45,
 this.decay = 0.9,
 this.gravity = 1,
 this.drift = 0,
 this.flat = false,
 this.scalar = 1,
 this.x = 0.5,
 this.y = 0.5,
 this.ticks = 200})
 : assert(decay >= 0 && decay <= 1),
 assert(ticks > 0);
}

particleBuilder

 Confetti.launch(context,
 ///...

 particleBuilder: (index) => Star()
 ///...
 );

/// 1. Inherit from ConfettiParticle
class Circle extends ConfettiParticle {
 /// 2. Override paint
 @override
 void paint({
 /// The physics instance stored all the properties about the position, color, and so on of the particle.
 required ConfettiPhysics physics,
 required Canvas canvas,
 }) {
 /// 3. Paint your shape here

 canvas.save();
 canvas.translate(physics.x, physics.y);
 canvas.rotate(pi / 10 * physics.wobble);
 canvas.scale(
 (physics.x2 - physics.x1).abs() * physics.ovalScalar,
 (physics.y2 - physics.y1).abs() * physics.ovalScalar,
 );
 final paint = Paint()
 ..color = physics.color.withOpacity(1 - physics.progress);
 canvas.drawArc(Rect.fromCircle(center: const Offset(0, 0), radius: 1), 0,
 2 * pi, true, paint);
 canvas.restore();
 }
}

Thanks