Introduction
Celebrating user achievements is a great way to boost engagement in your Flutter apps. In this article, we’ll discover how to add simple confetti animations in Flutter apps . But since we are lazy developers, we use a package instead of creating the animation on our own. With the code examples and demo videos, you’ll be ready to blast your users away with confetti!
Animation
A proper confetti animation can be a challenge. Lucky for us, there is a package on pub.dev that helps us here.
Here are some examples of what you can build with it:
import 'package:confetti/confetti.dart';<br>import 'package:flutter/widgets.dart';<br><br>class ConfettiScreen extends StatefulWidget {<br> const ConfettiScreen({super.key});<br><br> @override<br> State<ConfettiScreen> createState() => _ConfettiScreenState();<br>}<br><br>class _ConfettiScreenState extends State<ConfettiScreen> {<br> late ConfettiController _controller;<br><br> @override<br> void initState() {<br> super.initState();<br> _controller = ConfettiController(duration: Duration(seconds: 4));<br> _controller.play();<br> }<br><br> @override<br> void dispose() {<br> _controller.dispose();<br> super.dispose();<br> }<br><br> @override<br> Widget build(BuildContext context) {<br> return Center(<br> child: ConfettiWidget(<br> confettiController: _controller,<br> blastDirectionality: BlastDirectionality.explosive,<br> numberOfParticles: 100,<br> maxBlastForce: 40,<br> emissionFrequency: 0.05,<br> ),<br> );<br> }<br>}This creates a centered confetti explosion.
Here is a machine gun like confetti animation:
import 'package:confetti/confetti.dart';<br>import 'package:flutter/widgets.dart';<br><br>class ConfettiScreen extends StatefulWidget {<br> const ConfettiScreen({super.key});<br><br> @override<br> State<ConfettiScreen> createState() => _ConfettiScreenState();<br>}<br><br>class _ConfettiScreenState extends State<ConfettiScreen> {<br> late ConfettiController _controller;<br><br> @override<br> void initState() {<br> super.initState();<br> _controller = ConfettiController(duration: Duration(seconds: 4));<br> _controller.play();<br> }<br><br> @override<br> void dispose() {<br> _controller.dispose();<br> super.dispose();<br> }<br><br> @override<br> Widget build(BuildContext context) {<br> return Align(<br> alignment: Alignment.centerLeft,<br> child: ConfettiWidget(<br> confettiController: _controller,<br> blastDirectionality: BlastDirectionality.directional,<br> blastDirection: 0,<br> numberOfParticles: 1,<br> maxBlastForce: 100,<br> minBlastForce: 99,<br> emissionFrequency: 1,<br> gravity: 0.01,<br> ),<br> );<br> }<br>}
Or, if you want it more gentle, here is a subtle snowfall confetti animation:
import 'package:confetti/confetti.dart';<br>import 'package:flutter/widgets.dart';<br>import 'dart:math' as math;<br><br>class ConfettiScreen extends StatefulWidget {<br> const ConfettiScreen({super.key});<br><br> @override<br> State<ConfettiScreen> createState() => _ConfettiScreenState();<br>}<br><br>class _ConfettiScreenState extends State<ConfettiScreen> {<br> late ConfettiController _controller;<br><br> @override<br> void initState() {<br> super.initState();<br> _controller = ConfettiController(duration: Duration(seconds: 4));<br> _controller.play();<br> }<br><br> @override<br> void dispose() {<br> _controller.dispose();<br> super.dispose();<br> }<br><br> @override<br> Widget build(BuildContext context) {<br> return Align(<br> alignment: Alignment.topCenter,<br> child: ConfettiWidget(<br> confettiController: _controller,<br> blastDirectionality: BlastDirectionality.directional,<br> blastDirection: math.pi / 2,<br> numberOfParticles: 1,<br> maxBlastForce: 2,<br> minBlastForce: 1,<br> emissionFrequency: 1,<br> gravity: 0.05,<br> particleDrag: 0.1,<br> ),<br> );<br> }<br>}
It’s a great package for all kinds of confetti animations!
If you want to know more about creating animations in Flutter apps, check out this article:
Conclusion
In this article, you learned how to implement simple confetti animations in Flutter apps. The proposed package is reliable and provides lots of configuration options to make the animation look the way you want it to be.
Related articles
