Beautiful Confetti Animation in Flutter using Confetti Widget

Hello! there, So you want to create Birthday app and want to throw some confetti on the user then Confetti widget is made for you.

Let’s set you up

Let’s add the package in your pubspec.yaml file

Dependencies

confetti: ^0.5.5

Run flutter pub get

Import The Package in Confetti.dart

import 'package:confetti/confetti.dart';

Implementation

First of all let’s add some ConfettiControllers in the file Confetti.dart

import 'package:confetti/confetti.dart';
import 'package:flutter/material.dart';
class Confetti extends StatefulWidget {
  @override
  _ConfettiState createState() => _ConfettiState();
}
class _ConfettiState extends State<Confetti> {
  ConfettiController _controllerCenterRight;
  ConfettiController _controllerCenterLeft;
@override
  Widget build(BuildContext context) {
    return Container();
  }
}

To throw the confetti from both sides of screen , we created two ConfettiControllers named as _controllerCenterRight and _controllerCenterLeft. Now , we want the animation to start when user navigate to this screen. Therefore, we will initialise the controllers in init method of class Confetti. To start the animation we will call the play() on the controllers .

_controllerCenterRight.play();
_controllerCenterLeft.play();

Complete initState() method:

 @override
  void initState() {
    _controllerCenterRight =
        ConfettiController(duration: const Duration(seconds: 4));
    _controllerCenterLeft =
        ConfettiController(duration: const Duration(seconds: 4));
    _controllerCenterLeft.play();
    _controllerCenterRight.play();
    super.initState();
  }

Remember to dispose them:

@override
  void dispose() {
    _controllerCenterRight.dispose();
    _controllerCenterLeft.dispose();
    super.dispose();
  }

Now ,Let’s add a button in the center of the screen of file named main.dart which will help us to navigate to the other page

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner:false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHome()
    );
  }
}
class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: FlatButton(
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (context)=>Confetti()));
        },
        color: Colors.deepPurpleAccent,
        child: Text("Press Me",
          style: TextStyle(
            color: Colors.white,
          ),),
      )),
    );
  }
}

After that in Confetti.dart , we will return a Stack with Text and Two Align Widgets for our ConfettiWidget (If we Column instead of Stack then the Confetti widget will be shown below Text only, but we want the Confetti to pop over the Text).

Confetti.dart

import 'package:confetti/confetti.dart';
import 'package:flutter/material.dart';
class Confetti extends StatefulWidget {
  @override
  _ConfettiState createState() => _ConfettiState();
}
class _ConfettiState extends State<Confetti> {
  ConfettiController _controllerCenterRight;
  ConfettiController _controllerCenterLeft;
@override
  void initState() {
    _controllerCenterRight =
        ConfettiController(duration: const Duration(seconds: 4));
    _controllerCenterLeft =
        ConfettiController(duration: const Duration(seconds: 4));
    _controllerCenterLeft.play();
    _controllerCenterRight.play();
    super.initState();
  }
@override
  void dispose() {
    _controllerCenterRight.dispose();
    _controllerCenterLeft.dispose();
    super.dispose();
  }
@override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
          body: Container(
            margin: EdgeInsets.only(top: 50.0),
            child: Stack(
                children: <Widget>[
                  Text("HELLO! THERE",textAlign:TextAlign.center,style: TextStyle(fontSize: 100.0,color: Colors.black54),),
                  Align(
                          alignment: Alignment.centerLeft,
                          child: ConfettiWidget(
                            blastDirectionality: BlastDirectionality.explosive,
                            maxBlastForce: 15,
                            confettiController: _controllerCenterLeft,
                            blastDirection: 170,
                            particleDrag: 0.05,
                            emissionFrequency: 0.05,
                            numberOfParticles: 20,
                            gravity: 0.2,
                          ),
                        ),
                        Align(
                          alignment: Alignment.centerRight,
                          child: ConfettiWidget(
                            blastDirectionality: BlastDirectionality.explosive,
                            maxBlastForce: 15,
                            confettiController: _controllerCenterRight,
                            blastDirection: 350,
                            particleDrag: 0.05,
                            emissionFrequency: 0.05,
                            numberOfParticles: 40,
                            gravity: 0.2,
                          ),
                        ),
                      ]
            ),
          ),
        ),
    );
  }
}

Here we used Align widget to align the ConfettiWidget on our screen i.e. here we want confetti to originate from centerLeft and centerRight of our screen.

Also , in blastDirectionality: BlastDirectionality.explosive, we set the blast to explode. In blastDirection property of ConfettiWidget , we have specified the direction for confetti widget to move. We can also set particle count in numberOfParticles property and maximum blast force in maxBlastForce property.

The final result:

Full github code link: https://github.com/Gautam-Goyal/Medium-Confetti_Widget

Thanks! for reading. More Articles are coming soon!