How to implement Confetti Animation into flutter

Hi guys, I think you all are fine and doing something creative and interesting in your life. So today we create and learn how to implement Confetti Animation into your Flutter project. First, you understand what is Confetti Animation and why we need to add it.

Introduction:

Confetti animations in the Flutter app can bring a little happiness and excitement to the user experience when they are used to celebrate milestones or special occasions. A straightforward yet effective method for adding vibrant confetti animations to Flutter applications is provided by the Confetti package. We’ll discuss the Confetti package, its advantages, and how to install it in this Story article.

What is the Confetti Package?

The Confetti package offers a simple yet powerful way to create colorful confetti animations to Flutter applications. These animations provide a lovely approximation of falling confetti, making them perfect for celebrating achievements, milestones, or special occasions within your Flutter app.

Link to the package: https://pub.dev/packages/confetti/install

How to Integrate the Confetti Package:

Four simple steps you can use to implement Confetti Animation into your project. follow our step-by-step, and you will see how you build your amazing Flutter animation project.

Step 1: Add Dependency Open your pubspec.yaml file and add the Confetti package as a dependency:

dependencies:
  confetti: ^0.7.0

Step 2: Install Dependencies Run the following command in your terminal to fetch and install the package and its dependencies:

flutter pub add confetti

Step 3: Import the Package Import the Confetti package in your Dart file into top like:

import 'package:confetti/confetti.dart';

Step 4:  You know they in Flutter everything is a Widget so Use the Confetti Widget to Create a ConfettiWidget and add it to your Flutter UI to display confetti animations:

ConfettiWidget(
          confettiController: controller,
          shouldLoop: true,

          //set Direction
         // blastDirection: 0, //right
         // blastDirection: pi/2,  //down
         // blastDirection: -pi/2,  //up
         // blastDirection: pi,  //left
          blastDirectionality: BlastDirectionality.explosive, // for explore

          //Set emition count
          emissionFrequency: 0.00,  //0.0 -> 1.0
          numberOfParticles: 4,

          //Set speed
         // gravity: 0.2,

          //set intensity
          minBlastForce: 1,
          maxBlastForce: 20,  //you can increase to 100

        )

You can experiment with various options, like leaving a comment, to observe varying outcomes.

Here’s the complete example:

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


class ConfettiAnimation extends StatefulWidget {
  const ConfettiAnimation({super.key});

  @override
  State<ConfettiAnimation> createState() => _ConfettiAnimationState();
}

class _ConfettiAnimationState extends State<ConfettiAnimation> {


  final controller = ConfettiController();
  bool isPlaying = false;

  @override
  void initState() {
    super.initState();
    controller.addListener(() {
      setState(() {
        isPlaying = controller.state == ConfettiControllerState.playing;
      });
    });
  }

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


  @override
  Widget build(BuildContext context) {
    return  Stack(
      alignment: Alignment.center,
     // alignment: Alignment.topCenter,  //top of screen
      children: [
        Scaffold(
          backgroundColor: Colors.black,
          appBar: AppBar(
        title: Text('Confetti Animation'),
      ),
          body: Center(
            child: ElevatedButton(
              onPressed: (){
                if(isPlaying){
                  controller.stop();
                }else{
                  controller.play();
                }
              },
              child: Text(isPlaying ? 'Stop' : 'Celebrating'),
            ),
          ),

        ),
        ConfettiWidget(
          confettiController: controller,
          shouldLoop: true,

          //set Direction
         // blastDirection: 0, //right
         // blastDirection: pi/2,  //down
         // blastDirection: -pi/2,  //up
         // blastDirection: pi,  //left
          blastDirectionality: BlastDirectionality.explosive, // for explore

          //Set emition count
          emissionFrequency: 0.00,  //0.0 -> 1.0
          numberOfParticles: 4,

          //Set speed
         // gravity: 0.2,

          //set intensity
          minBlastForce: 1,
          maxBlastForce: 20,  //you can increase to 100

        )

      ],
    );
  }
}

❤️❤️ Thanks for reading this article ❤️❤️

If I got something wrong? Let me know in the comments. I would love to improve 🥰🥰🥰.

Clap 👏👏👏 If this article helps you,

if you like our work, please follow us on this Dosomthings