Confetti Animation In Flutter Example With Source Code
Confetti Animation In Flutter Example With Source Code
Example:
import 'dart:math';
import 'package:confetti/confetti.dart';
import 'package:flutter/material.dart';
class Confettiex extends StatelessWidget {
const Confettiex({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Confetti',
home: Scaffold(
backgroundColor: Colors.grey[900],
body: MyApp(),
));
}
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
ConfettiController _controllerCenter;
ConfettiController _controllerCenterRight;
ConfettiController _controllerCenterLeft;
ConfettiController _controllerTopCenter;
ConfettiController _controllerBottomCenter;
@override
void initState() {
_controllerCenter =
ConfettiController(duration: const Duration(seconds: 10));
_controllerCenterRight =
ConfettiController(duration: const Duration(seconds: 10));
_controllerCenterLeft =
ConfettiController(duration: const Duration(seconds: 10));
_controllerTopCenter =
ConfettiController(duration: const Duration(seconds: 10));
_controllerBottomCenter =
ConfettiController(duration: const Duration(seconds: 10));
super.initState();
}
@override
void dispose() {
_controllerCenter.dispose();
_controllerCenterRight.dispose();
_controllerCenterLeft.dispose();
_controllerTopCenter.dispose();
_controllerBottomCenter.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.center,
child: ConfettiWidget(
confettiController: _controllerCenter,
blastDirectionality: BlastDirectionality
.explosive,
shouldLoop:
true,
colors: const [
Colors.green,
Colors.blue,
Colors.pink,
Colors.orange,
Colors.purple
],
),
),
Align(
alignment: Alignment.center,
child: FlatButton(
onPressed: () {
_controllerCenter.play();
},
child: _display('blast')),
),
Align(
alignment: Alignment.centerRight,
child: ConfettiWidget(
confettiController: _controllerCenterRight,
blastDirection: pi,
particleDrag: 0.05,
emissionFrequency: 0.05,
numberOfParticles: 20,
gravity: 0.05,
shouldLoop: false,
colors: const [
Colors.green,
Colors.blue,
Colors.pink
],
),
),
Align(
alignment: Alignment.centerRight,
child: FlatButton(
onPressed: () {
_controllerCenterRight.play();
},
child: _display('pump left')),
),
Align(
alignment: Alignment.centerLeft,
child: ConfettiWidget(
confettiController: _controllerCenterLeft,
blastDirection: 0,
emissionFrequency: 0.6,
minimumSize: const Size(10,
10),
maximumSize: const Size(50,
50),
numberOfParticles: 1,
gravity: 0.1,
),
),
Align(
alignment: Alignment.centerLeft,
child: FlatButton(
onPressed: () {
_controllerCenterLeft.play();
},
child: _display('singles')),
),
Align(
alignment: Alignment.topCenter,
child: ConfettiWidget(
confettiController: _controllerTopCenter,
blastDirection: pi / 2,
maxBlastForce: 5,
minBlastForce: 2,
emissionFrequency: 0.05,
numberOfParticles: 50,
gravity: 1,
),
),
Align(
alignment: Alignment.topCenter,
child: FlatButton(
onPressed: () {
_controllerTopCenter.play();
},
child: _display('goliath')),
),
Align(
alignment: Alignment.bottomCenter,
child: ConfettiWidget(
confettiController: _controllerBottomCenter,
blastDirection: -pi / 2,
emissionFrequency: 0.01,
numberOfParticles: 20,
maxBlastForce: 100,
minBlastForce: 80,
gravity: 0.3,
),
),
Align(
alignment: Alignment.bottomCenter,
child: FlatButton(
onPressed: () {
_controllerBottomCenter.play();
},
child: _display('hard and infrequent')),
),
],
);
}
Text _display(String text) {
return Text(
text,
style: const TextStyle(color: Colors.white, fontSize: 20),
);
}
}
