Confetti Animation Flutter Example
This article explains you how to create confetti animation in flutter application using confetti flutter package. You can also check out flutter animations related articles.
This type of animation is generally used to display colorful blast after user completed all steps for some process or registration in mobile application. Using confetti flutter package, we can control blast angle, speed, measure, type etc. In this flutter application, we will display confetti animation on tap of button.
There are many properties in ConfettiWidget class. confettiController property is required and must not be null. shouldLoop property is used to display particles continuously or not. We can also set number of particles to emit at once using numberOfParticles property. Default value is 10.
blastDirection property is used to set direction of particle emission using radial value. Default value is ‘PI'(180 degrees). maxBlastForce attribute is used set maximum blast force applied to particle. Default value is ’20’. We can set blastDirectionality value directional or explosive. Default value is directional.
Add required library in your pubspec.yaml file
Initialize Confetti Controller
@override
void initState() {
super.initState();
setState(() {
myConfettiController = ConfettiController(duration: Duration(seconds: 5));
});
}
Create Confetti Animation Flutter
return Container(
alignment: Alignment.topCenter,
child: ConfettiWidget(
maximumSize: Size(35, 35),
shouldLoop: false,
confettiController: controller,
blastDirection: blastDirection,
blastDirectionality: BlastDirectionality.directional,
maxBlastForce: 20,
minBlastForce: 10,
emissionFrequency: 1,
numberOfParticles: 10,
gravity: 1,
),
);
}
Integrate Confetti Animation Flutter
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Flutter Confetti Animation Sample’),
),
body: Container(
color: Colors.greenAccent,
child: Stack(
alignment: Alignment.center,
children: [
buildConfettiWidget(myConfettiController, pi / 1),
buildConfettiWidget(myConfettiController, pi / 4),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(‘You are a Winner!’, style: TextStyle(fontSize: 35,fontWeight: FontWeight.bold, color: Colors.white)),
SizedBox(height: 200),
ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.orangeAccent),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
“Congratulations!”,
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
onPressed: () {
myConfettiController.play();
},
)
],
),
],
),
),
);
}
Pingback: Concentric Animation in Flutter App - CodingWithDhrumil