Flutter Confetti Animation Tutorial For Absolute Beginners

flutterfun image placeholder

Hey there, fellow Flutter enthusiast! Today, we’re going to explore a fantastic way to bring joy and excitement to your Flutter app. Imagine your users experiencing a virtual confetti explosion to celebrate their achievements and special moments while using your app. Sounds fun, right? Well, you can make it happen with Flutter Confetti Animation!

Before we start sprinkling confetti all over the place, make sure you have Flutter installed on your system. Don’t worry if you haven’t installed it yet; simply visit the official Flutter website, and they’ll guide you through the setup process. Once Flutter is up and running, create a new Flutter project with a single command:

Setting Up a New Flutter Project

flutter create my_confetti_app
cd my_confetti_app

Installing Dependencies

Alright, now that our Flutter project is set up, it’s time to get the party started! We’ll need to add the magical Flutter Confetti Animation package to our project. No worries, it’s super easy! Open your project’s pubspec.yaml file, and under the dependencies section, add the following line:

    sdk: flutter
  flutter_confetti: ^2.0.0

Now that we’ve added the dependency, just run this command, and it will fetch and install the package for us:

Creating the Confetti Animation Widget

Now comes the exciting part – creating the actual Flutter Confetti Animation! Locate the screen or widget in your Flutter app where you want the confetti to fall, and let’s get started. At the beginning of the file, make sure to import the Flutter Confetti package:

import 'package:flutter_confetti/flutter_confetti.dart';

Next, we need to create a ConfettiWidget instance within our widget:

ConfettiWidget confettiWidget;

Configuring Confetti Colors and Shapes

Ah, the colors and shapes of confetti – the key to creating a stunning confetti shower! We can customize the appearance of our confetti particles to match our app’s theme or the specific celebration we’re highlighting. Inside your widget’s build method, let’s add this code snippet:

confettiWidget = ConfettiWidget(
  confettiController: ConfettiController(duration: Duration(seconds: 5)),
  colors: [Colors.red, Colors.blue, Colors.green, Colors.yellow],
  shouldLoop: true,

By using the confettiController, we can manage the duration of the confetti animation. The colors list allows us to choose from an array of colors to make our confetti pop with vibrancy.

Triggering the Confetti Effect

Alright, we’ve got our confetti set up and ready to go, but what good is it if it doesn’t burst into action when we want it to? To make our confetti animation interactive, we’ll wrap the confettiWidget with a GestureDetector. In this example, we’ll trigger the confetti when the user taps on a specific widget. Feel free to customize it according to your app’s needs:

  onTap: () {
  child: YourWidget(),

With a simple tap, the confetti will burst into life, raining down colorful joy and excitement on your users!

Controlling the Animation

Hey, we understand that sometimes you might want to be the master of your confetti universe! You can easily take control of the confetti animation by pausing or resuming it at your command. For instance, when something important is happening, you can pause the confetti with this code:


And when it’s time to keep the party going, simply call the resume() method:


Customizing Confetti Burst

Flutter Confetti Animation is all about flexibility and personalization. You can fine-tune the confetti burst to your liking by adjusting the numberOfParticles and emissionFrequency parameters:


By playing around with numberOfParticles, you can control how many confetti pieces are in each burst. The emissionFrequency will determine how often the confetti is emitted, giving you the perfect confetti effect for your app.

Performance Optimization

While we’re all about celebrating good times with confetti, it’s essential to use it wisely to avoid any performance hiccups. Remember, too much confetti can weigh down your app, especially on less powerful devices. So, reserve the confetti extravaganza for special moments and ensure that the animation duration and particle count are just right!



Congratulations! You’ve successfully added Flutter Confetti Animation to your app. Your users will now enjoy a delightful and celebratory experience while using your Flutter application. Remember to use confetti animations thoughtfully to enhance your app’s user experience.

Happy coding and happy confetti celebrations! 🎉


Can I use Flutter Confetti Animation in my existing Flutter app?

Absolutely! Flutter Confetti Animation is designed to be easy to integrate into any Flutter app, whether it’s new or already existing.

How do I change the shape of the confetti particles?

Currently, Flutter Confetti Animation supports only rectangular and circular confetti particles. The shapes can be further customized with different colors to match your app’s theme.

Can I trigger the confetti effect on events other than user taps?

Certainly! While we used a GestureDetector in our example, you can trigger the confetti effect on various events, such as button presses, countdown completions, or user achievements.

Is Flutter Confetti Animation performance-friendly?

Yes, Flutter Confetti Animation is optimized for performance. However, it’s essential to use it judiciously and avoid excessive particle counts or prolonged animation durations.

Can I adjust the speed of the confetti animation?

As of the current version, Flutter Confetti Animation doesn’t provide direct speed control. However, you can adjust the duration and emission frequency to create different effects.

Can I use my app’s custom images as confetti?

As of now, Flutter Confetti Animation doesn’t support custom images for confetti particles. You can use the provided shapes and customize them with colors.

Is it possible to add sound effects to the confetti animation?

Flutter Confetti Animation focuses on visuals only and doesn’t have built-in sound support. However, you can easily combine it with other Flutter packages that handle sound effects.

How can I add Flutter Confetti Animation to a specific screen in my app?

You can wrap the ConfettiWidget in the desired screen or widget where you want the confetti to appear. It can be a congratulatory screen, a victory screen, or any other celebration-related section of your app.

Are there any limitations on the number of confetti particles?

While Flutter Confetti Animation can handle a significant number of confetti particles, keep in mind that too many particles might lead to performance issues on low-end devices.

Can I use Flutter Confetti Animation on both Android and iOS?

Yes, Flutter Confetti Animation works seamlessly on both Android and iOS devices. Flutter’s cross-platform nature ensures a consistent experience across platforms.

5/5 (1 vote)
Share to:
Scroll to Top