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 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: