Confetti Animation Flutter Example

This article explains you how to create confetti animation in flutter application using confetti flutter package. You can also check out flutter animations related articles.

This type of animation is generally used to display colorful blast after user completed all steps for some process or registration in mobile application. Using confetti flutter package, we can control blast angle, speed, measure, type etc. In this flutter application, we will display confetti animation on tap of button.

There are many properties in ConfettiWidget class. confettiController property is required and must not be null. shouldLoop property is used to display particles continuously or not. We can also set number of particles to emit at once using numberOfParticles property. Default value is 10.

blastDirection property is used to set direction of particle emission using radial value. Default value is ‘PI'(180 degrees). maxBlastForce attribute is used set maximum blast force applied to particle. Default value is ’20’. We can set blastDirectionality value directional or explosive. Default value is directional.


Add required library in your pubspec.yaml file

confetti: ^0.5.5

Initialize Confetti Controller

ConfettiController myConfettiController;

void initState() {
setState(() {
myConfettiController = ConfettiController(duration: Duration(seconds: 5));


Create Confetti Animation Flutter

Widget buildConfettiWidget(controller, double blastDirection) {
return Container(
alignment: Alignment.topCenter,
child: ConfettiWidget(
maximumSize: Size(35, 35),
shouldLoop: false,
confettiController: controller,
blastDirection: blastDirection,
blastDirectionality: BlastDirectionality.directional,
maxBlastForce: 20,
minBlastForce: 10,
emissionFrequency: 1,
numberOfParticles: 10,
gravity: 1,

Integrate Confetti Animation Flutter

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Flutter Confetti Animation Sample’),
body: Container(
color: Colors.greenAccent,
child: Stack(
children: [
buildConfettiWidget(myConfettiController, pi / 1),
buildConfettiWidget(myConfettiController, pi / 4),
children: [
Text(‘You are a Winner!’, style: TextStyle(fontSize: 35,fontWeight: FontWeight.bold, color: Colors.white)),
SizedBox(height: 200),
style: ElevatedButton.styleFrom(primary: Colors.orangeAccent),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
style: TextStyle(
fontSize: 30,
color: Colors.white,
onPressed: () {;
confetti animation

One thought on “Confetti Animation Flutter Example

Leave a Reply