Skip to content
Blog

Confetti Animations in Flutter with the confetti Package

Celebrate successes in your Flutter UI with confetti — ConfettiController, emission options, gravity, and performance guidance.

Published on • November 4, 2026

AI Assistant

A small burst of confetti turns a mundane success into a moment. The confetti package (v0.8.0 on pub.dev) renders a particle system as a widget you can drop anywhere in your tree, driven by a ConfettiController.

Basic usage

import 'package:confetti/confetti.dart';

class Celebration extends StatefulWidget {
  const Celebration({super.key});
  @override
  State<Celebration> createState() => _CelebrationState();
}

class _CelebrationState extends State<Celebration> {
  late final ConfettiController _controller =
      ConfettiController(duration: const Duration(seconds: 2));

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        ConfettiWidget(
          confettiController: _controller,
          blastDirectionality: BlastDirectionality.explosive,
          numberOfParticles: 30,
        ),
        FilledButton(
          onPressed: _controller.play,
          child: const Text('Done!'),
        ),
      ],
    );
  }
}

Call _controller.play() to fire a burst; stop() halts emission.

Emission control

ConfettiController.play() accepts an optional duration. For continuous emission (a looping celebration), call play() with a long duration or replay on completion. The widget’s shouldLoop parameter keeps particles flowing until stopped.

Shaping the burst

Key ConfettiWidget parameters:

  • blastDirectionality — BlastDirectionality.explosive radiates in all directions; directional uses blastDirection (radians, 0 = right, π/2 = down).
  • gravity — fall speed; higher values drop faster.
  • emissionFrequency — 0 (rare) to 1 (constant).
  • minimumSize / maximumSize — particle size range.
  • colors — the palette; match your theme for a branded celebration.
ConfettiWidget(
  confettiController: _controller,
  blastDirectionality: BlastDirectionality.directional,
  blastDirection: 3 * pi / 2, // upward
  emissionFrequency: 0.6,
  gravity: 0.4,
  colors: const [Colors.blue, Colors.teal, Colors.amber],
)

Performance note

The package README warns that particle count is the main cost — every particle is a widget. Keep numberOfParticles modest (20–50), fire confetti on real milestones rather than frequently, and stop the controller when it’s done.

Takeaway: confetti gives you a themeable particle burst from a single ConfettiController — shape the blast with blastDirectionality, gravity, and emissionFrequency, keep particle counts low for performance, and always dispose the controller.