There are loads of ways Flutter makes it simple to make animations, from essential Tweens to Implicit Animations that are incorporated directly into the structure. Furthermore, assuming those don’t meet your requirements, there are third-party solutions that do almost anything you can envision. From rotations to blurs, size changes, and even animations where one Widget flies, starting with one page then onto the next, Flutter makes it simple!
In any case, simple can now and again be excessively simple. Try not to wrongly settle on the most effortless methodology without looking at how it functions. A few things are more costly than others, and on the off chance that you utilize one of those everywhere when something less difficult would work similarly also, at that point, you could drag your application’s presentation down to a creep.
In this blog, we will Explore Confetti Animation In Flutter. We will see how to implement a demo program of the confetti animation and show a colorful blast using the confetti package in your flutter applications.
confetti | Flutter Package
Blast some confetti all over the screen and celebrate user achievements! A video walkthrough is available here. To use…pub.dev
Table Of Contents::
Confetti:
Confetti is an impact of colorful confetti everywhere on the screen. Praise application accomplishments with style. Control the speed, angle, gravity, and measure of confetti. They will show an impact when the user taps a button then colorful confetti will happen.
Demo Module :
This demo video shows how to create confetti animation in a flutter. It shows how the confetti animation will work using the confetti package in your flutter applications. It shows a colorful confetti blast when the user taps a button, then occurs, and the user can handle blast types, angle, etc. Celebrate application achievements with style. It will be shown on your device.
Attributes:
There are some attributes of confetti are:
- > ConfettiController: This attribute is must not be null. The only attribute that is required is the
ConfettiController. - > blastDirectionality: This attribute is used to an enum that takes one of the two values — directional or explosive. The default is set to directional.
- > shouldLoop: This attribute is used to determines if the emissionDuration will reset, which will result in continuous particles being emitted.
- > maxBlastForce: This attribute is used to determine the maximum blast force applied to a particle within its first 5 frames of life. The default maxBlastForce is set to `20`.
- > blastDirection: This attribute is used to the radial value to determine the particle emission direction. The default is set to `PI` (180 degrees). A value of `PI` will emit to the left of the canvas/screen.
- > numberOfParticles: This attribute is used to be emitted per emission. Default is set to `10`.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
confetti:
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 3: Import
import 'package:confetti/confetti.dart';
Step 4: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called slimy_card_demo.dart inside the lib folder.
First, we will need to instantiate a ConfettiController variable.
ConfettiController controllerTopCenter;
The ConfettiController can be instantiated in the initState method. We will add setState(). Inside setState, we will add initController() method.
@override
void initState() {
// TODO: implement initState
super.initState();
setState(() {
initController();
});
}
We will create a void initController() method. In this method, we will add a controllerTopCenter that is equal to the ConffettiController. In bracket, we will addDuration an argument.
void initController() {
controllerTopCenter =
ConfettiController(duration: const Duration(seconds: 1));
}
In the body, we will add a stack widget. In this widget, we will add an image with height and width. Also, add a buildButton() method. We will deeply define below.
SafeArea(
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Image.asset(
"assets/trophy.png",
width: MediaQuery.of(context).size.width*0.5,
height: MediaQuery.of(context).size.height*0.5,
),
],
),
),
buildButton()
],
),
We will define buildButton() method:
We will create a button, return an Align() widget. Inside the widget, we will create a RaisedButton(). In this button, we will add shape, text, color, and onPressed method.
Align buildButton() {
return Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 100),
child: RaisedButton(
onPressed: (){},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
color: Colors.red,
textColor: Colors.white,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Congratulations!",
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
),
),
);
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
We will create a buildConfettiWidget(). Inside the widget, we will return Align widget. We will add a ConfettiWidget. In this widget, we will add maximumSize mean set the maximum potential size for the confetti. Must be bigger than the minimumSize attribute and cannot be null. We will add gravity, which means is the speed at which the confetti will fall. Can set it to a value between `0` and `1`.
Align buildConfettiWidget(controller, double blastDirection) {
return Align(
alignment: Alignment.topCenter,
child: ConfettiWidget(
maximumSize: Size(30, 30),
shouldLoop: false,
confettiController: controller,
blastDirection: blastDirection,
blastDirectionality: BlastDirectionality.directional,
maxBlastForce: 20, // set a lower max blast force
minBlastForce: 8, // set a lower min blast force
emissionFrequency: 1,
minBlastForce: 8, // a lot of particles at once
gravity: 1,
),
);
}
We will add an emissionFrequency mean should be a value between 0 and 1. The higher the value that will emit particles on a single frame. Also, we will add confettiController, blastDirection, maxBlastForce, minBlastForce, minBlastForce.
We will add buildConfettiWidget() method on the body. Inside the stack widget, add the controllerTopCenter and pi in a bracket.
buildConfettiWidget(controllerTopCenter, pi / 1),
buildConfettiWidget(controllerTopCenter, pi / 4),
Now, we will add play for confetti animation. We will add controllerTopCenter.play() on button onPressed function.
onPressed: (){
controllerTopCenter.play();
},
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'dart:math';
import 'package:confetti/confetti.dart';
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ConfettiController controllerTopCenter;
@override
void initState() {
// TODO: implement initState
super.initState();
setState(() {
initController();
});
}
void initController() {
controllerTopCenter =
ConfettiController(duration: const Duration(seconds: 1));
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink[50],
appBar: AppBar(
backgroundColor: Colors.cyan,
title: Text("Flutter Confetti Animation Demo"),
automaticallyImplyLeading: false,
),
body: SafeArea(
child: Stack(
children: <Widget>[
buildConfettiWidget(controllerTopCenter, pi / 1),
buildConfettiWidget(controllerTopCenter, pi / 4),
Align(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Image.asset(
"assets/trophy.png",
width: MediaQuery.of(context).size.width*0.5,
height: MediaQuery.of(context).size.height*0.5,
),
],
),
),
buildButton()
],
),
),
);
}
Align buildButton() {
return Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 100),
child: RaisedButton(
onPressed: (){
controllerTopCenter.play();
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
color: Colors.red,
textColor: Colors.white,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
"Congratulations!",
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
),
),
);
}
Align buildConfettiWidget(controller, double blastDirection) {
return Align(
alignment: Alignment.topCenter,
child: ConfettiWidget(
maximumSize: Size(30, 30),
shouldLoop: false,
confettiController: controller,
blastDirection: blastDirection,
blastDirectionality: BlastDirectionality.directional,
maxBlastForce: 20, // set a lower max blast force
minBlastForce: 8, // set a lower min blast force
emissionFrequency: 1,
numberOfParticles: 8, // a lot of particles at once
gravity: 1,
),
);
}
}
Conclusion:
In the article, I have explained the Confetti Animation basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Confetti Animation On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Confetti Animation in your flutter projects. We will show you what the Confetti is?. Some confetti attributes, make a demo program for working Confetti Animation and show a colorful confetti blast when the user taps a button then occurs. The user can handle blast types, angles, etc. Celebrate application achievements with style using the confetti package in your flutter applications. So please try it.
❤ ❤ 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.
find the source code of the Flutter Confetti Animation Demo:
flutter-devs/flutter_confetti_animation_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
