Confetti Animation in Flutter.

Flutter Queen✨
3 min readApr 29, 2023

--

Blast some confetti all over the screen and celebrate user achievements!

Preview

Import the confetti dependency in your pubspec.YAML file

To begin you need to instantiate a ConfettiController variable and pass in a Duration argument. The ConfettiController can be instantiated in the initstate method and disposed of in the dispose method.

Create a boolean variable if the confetti isPlaying.

Wrap around a scaffold widget a stack and inside it, we place ConfettiWidget to display the confetti.

Let’s create a Button, and if we click on it, we start or stop playing with the confetti.

To make it work we need to update this bool variable isPlaying by adding a listener to initstate to update this playing field.

Next, you could shoot the confetti in the direction

  • up
  • right
  • down
  • left
  • all

Example:

You could emit 4 confetti particles for every shot or 30 particles for every shot. Increase the emission frequency to shoot particles more often and set this value even higher.

Example:

And you can set each shot to allow the intensity or set it to a higher intensity by increasing the numbers.

And finally, use gravity to set the speed of the confetti if you set this number higher then the confetti falls down more quickly.

You can change the confetti shape or the size of the confetti.

Also, change the colors of the confetti.

Use stack alignment to choose from where the confetti is shooting.

I hope this article was helpful to you. Thank you for taking the time to read it. Your feedback and suggestions are always welcome.

Support Me:

--

--