Flutter – Confetti Library

Want to add confetti on the screen in Flutter. Suppose if a user won a game or any reward, there should be some confetti blast on the screen. Was not an easy task before, but it is now with Flutter library – confetti. In this article, we will look at how to implement confetti in Flutter, then it can be customized as per the requirements.

Implementation:

Follow the below steps to implement Confetti in Flutter:

Step 1: Add dependency in pubspec.yaml by running the following command in IDE terminal,

Dart

flutter pub add confetti

Step 2: Import confetti dependency into main.dart.

Dart

import 'package:confetti/confetti.dart';

Step 3:  In the CofettiWidget(), we need to add the confettiController, blastDirection, emissionFrequency, gravity, numberOfPartices, etc. We can add parameters and modify them as per our requirements. We also added maximum and minimum blast force with particles that should pop up.

Dart

ConfettiWidget(
                  confettiController: _centerController,
                  blastDirection: pi / 2,
                  maxBlastForce: 5,
                  minBlastForce: 1,
                  emissionFrequency: 0.03,
                  numberOfParticles: 10,
                  shouldLoop:true,
                  gravity: 0,
 ),

Center Confetti Source Code:

We need to initialize the cofettiController in the initState(), and after its use, we need to dispose of it in dispose() method. When we will click Center TextButton, it will invoke _centerController which will start the animation on the screen. If we want continuous animation on the screen we need to set shouldLoop to true.

Dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  // declare confettiController;
  late ConfettiController _centerController;

  @override
  void initState() {
    super.initState();

    // initialize confettiController
    _centerController =
        ConfettiController(duration: const Duration(seconds: 10));
  }

  @override
  void dispose() {

    // dispose the controller
    _centerController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          backgroundColor: Colors.green,
          centerTitle: true,
        ),
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Stack(
            children: <Widget>[

              // align the confetti on the screen
              Align(
                alignment: Alignment.center,
                child: ConfettiWidget(
                  confettiController: _centerController,
                  blastDirection: pi / 2,
                  maxBlastForce: 5,
                  minBlastForce: 1,
                  emissionFrequency: 0.03,

                  // 10 paticles will pop-up at a time
                  numberOfParticles: 10,

                  // particles will pop-up
                  gravity: 0,
                ),
              ),
              Align(
                alignment: Alignment.topCenter,
                child: TextButton(
                    onPressed: () {

                      // invoking confettiController to come into play
                      _centerController.play();
                    },
                    child: Text('Center',
                        style: const TextStyle(
                            color: Colors.white, fontSize: 20))),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output:

We can also add custom shapes like stars, circles, etc along with different colors in the ConfettiWidget. Creativity is not limited, play with the Confetti and bring life to the applications.

Confetti from Top-Center:

Dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  // declare confettiController;
  late ConfettiController _topController;

  @override
  void initState() {
    super.initState();

     // initialize confettiController
    _topController = ConfettiController(duration: const Duration(seconds: 10));
  }

  @override
  void dispose() {

    // dispose the controller
    _topController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          backgroundColor: Colors.green,
          centerTitle: true,
        ),
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Stack(
            children: <Widget>[

              // align the confetti on the screen
              Align(
                alignment:

                    // confetti will pop from top-center
                    Alignment.topCenter,
                child: ConfettiWidget(
                  confettiController: _topController,
                  blastDirection: pi / 2,
                  maxBlastForce: 5,
                  minBlastForce: 1,
                  emissionFrequency: 0.01,

                  // 10 paticles will pop-up at a time
                  numberOfParticles: 20,

                  // particles will come down
                  gravity: 1,

                  // start again as soon as the
                  // animation is finished
                  shouldLoop:
                      true,

                  // assign colors of any choice
                  colors: const [
                    Colors.green,
                    Colors.yellow,
                    Colors.pink,
                    Colors.orange,
                    Colors.blue
                  ],
                ),
              ),
              Center(
                child: TextButton(
                    onPressed: () {

                      // invoking confettiController
                      // to come into play
                      _topController.play();
                    },
                    child: Text('Top',
                        style: const TextStyle(
                            color: Colors.white, fontSize: 20))),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output: