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';
import 'package:flutter/widgets.dart';

class ConfettiScreen extends StatefulWidget {

  const ConfettiScreen({super.key});
  
  @override
  State<ConfettiScreen> createState() => _ConfettiScreenState();
}

class _ConfettiScreenState extends State<ConfettiScreen> {
  late ConfettiController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = ConfettiController(duration: Duration(seconds: 4));
    _controller.play();
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ConfettiWidget(
        confettiController: _controller,
        blastDirectionality: BlastDirectionality.explosive,
        numberOfParticles: 100,
        maxBlastForce: 40,
        emissionFrequency: 0.05
      )
    );
  }
}

This creates a centered confetti explosion.

Confetti explosion animation in a Flutter\u00a0app — Confetti explosion animation in a Flutter app

Here is a machine gun like confetti animation:

import 'package:confetti/confetti.dart';
import 'package:flutter/widgets.dart';

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

class _ConfettiScreenState extends State<ConfettiScreen> {
  late ConfettiController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = ConfettiController(duration: Duration(seconds: 4));
    _controller.play();
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.centerLeft,
      child: ConfettiWidget(
        confettiController: _controller,
        blastDirectionality: BlastDirectionality.directional,
        blastDirection: 0,
        numberOfParticles: 1,
        maxBlastForce: 100,
        minBlastForce: 99,
        emissionFrequency: 1,
        gravity: 0.01)
    );
  }
}

Confetti machine gun animation in a Flutter\u00a0app — Confetti machine gun animation in a Flutter app

Or, if you want it more gentle, here is a subtle snowfall confetti animation:

import 'package:confetti/confetti.dart';
import 'package:flutter/widgets.dart';
import 'dart:math' as math;

class ConfettiScreen extends StatefulWidget {

  const ConfettiScreen({super.key});

  @override
  State<ConfettiScreen> createState() => _ConfettiScreenState();
}

class _ConfettiScreenState extends State<ConfettiScreen> {
  late ConfettiController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = ConfettiController(duration: Duration(seconds: 4));
    _controller.play();
  }

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

  @override
  Widget build(BuildContext context) {
  return Align(
  alignment: Alignment.topCenter,
    child: ConfettiWidget(
      confettiController: _controller,
      blastDirectionality: BlastDirectionality.directional,
      blastDirection: math.pi / 2,
      numberOfParticles: 1,
      maxBlastForce: 2,
      minBlastForce: 1,
      emissionFrequency: 1,
      gravity: 0.05,
      particleDrag: 0.1,
      ),
    );
  }
}

Confetti snowfall animation in a Flutter\u00a0app — Confetti snowfall animation in a Flutter app

It’s a great package for all kinds of confetti animations!

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.

Introduction#

Animation#

Conclusion#

Introduction

Animation

Conclusion