Example 2:
import 'package:confetti/confetti.dart';
import 'package:flutter/material.dart';
class AnimateScreen extends StatefulWidget {
const AnimateScreen({super.key});
@override
State<AnimateScreen> createState() => _AnimateScreenState();
}
class _AnimateScreenState extends State<AnimateScreen> {
final confettiController = ConfettiController();
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.center,
children: [
Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
confettiController.play();
dialogForWinner('The Codeme','assets.png');
}, child: Text('Tap To Animate'),
),
),
),
ConfettiWidget(
confettiController: confettiController,
shouldLoop: false,
blastDirectionality: BlastDirectionality.explosive,
),
],
);
}
void dialogForWinner(String name, String image) {
showDialog(
barrierColor: Colors.transparent,
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return WillPopScope(
onWillPop: () async {
return false;
},
child: AlertDialog(
contentPadding: const EdgeInsets.all(0.0),
content: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(5.0)),
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/winnn.jpg'),
fit: BoxFit.fill,
),
),
height: 220.0,
child: Padding(
padding: const EdgeInsets.only(
top: 2.0, right: 2.0, bottom: 10.0, left: 2.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
onTap: () {
confettiController.stop();
Navigator.pop(context);
},
child: Card(
elevation: 6.0,
color: Colors.grey.shade700,
child: Padding(
padding: EdgeInsets.all(3.0),
child: Icon(
Icons.close_rounded,
color: Colors.white,
),
),
),
),
],
),
Image.asset(
'assets/trophy.png',
height: 50,
width: 50,
),
Text(
'Congratulations',
style: TextStyle(color: Colors.white),
),
SizedBox(
height: 10.0,
),
ClipRRect(
borderRadius: BorderRadius.circular(50.0),
child: Image.asset(
'assets/no_profile_image.png',
height: 50,
width: 50,
),
),
SizedBox(
height: 5.0,
),
Text(
name,
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
),
);
},
);
}
}
import 'package:flutter/material.dart';
import 'confetti/AnimateScreen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: AnimateScreen(key: null,)
);
}
}
Example 1:
Pubspec.yaml
confetti: ^0.7.0import 'dart:math';
import 'package:confetti/confetti.dart';
import 'package:flutter/material.dart';
void main() => runApp(const ConfettiSample());
class ConfettiSample extends StatelessWidget {
const ConfettiSample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Confetti',
home: Scaffold(
backgroundColor: Colors.grey[900],
body: MyApp(),
));
}
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late ConfettiController _controllerCenter;
late ConfettiController _controllerCenterRight;
late ConfettiController _controllerCenterLeft;
late ConfettiController _controllerTopCenter;
late ConfettiController _controllerBottomCenter;
@override
void initState() {
super.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));
}
@override
void dispose() {
_controllerCenter.dispose();
_controllerCenterRight.dispose();
_controllerCenterLeft.dispose();
_controllerTopCenter.dispose();
_controllerBottomCenter.dispose();
super.dispose();
}
/// A custom Path to paint stars.
Path drawStar(Size size) {
// Method to convert degree to radians
double degToRad(double deg) => deg * (pi / 180.0);
const numberOfPoints = 5;
final halfWidth = size.width / 2;
final externalRadius = halfWidth;
final internalRadius = halfWidth / 2.5;
final degreesPerStep = degToRad(360 / numberOfPoints);
final halfDegreesPerStep = degreesPerStep / 2;
final path = Path();
final fullAngle = degToRad(360);
path.moveTo(size.width, halfWidth);
for (double step = 0; step < fullAngle; step += degreesPerStep) {
path.lineTo(halfWidth + externalRadius * cos(step),
halfWidth + externalRadius * sin(step));
path.lineTo(halfWidth + internalRadius * cos(step + halfDegreesPerStep),
halfWidth + internalRadius * sin(step + halfDegreesPerStep));
}
path.close();
return path;
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Stack(
children: <Widget>[
//CENTER -- Blast
Align(
alignment: Alignment.center,
child: ConfettiWidget(
confettiController: _controllerCenter,
blastDirectionality: BlastDirectionality
.explosive, // don't specify a direction, blast randomly
shouldLoop:
true, // start again as soon as the animation is finished
colors: const [
Colors.green,
Colors.blue,
Colors.pink,
Colors.orange,
Colors.purple
], // manually specify the colors to be used
createParticlePath: drawStar, // define a custom shape/path.
),
),
Align(
alignment: Alignment.center,
child: TextButton(
onPressed: () {
_controllerCenter.play();
},
child: _display('blast\nstars')),
),
//CENTER RIGHT -- Emit left
Align(
alignment: Alignment.centerRight,
child: ConfettiWidget(
confettiController: _controllerCenterRight,
blastDirection: pi, // radial value - LEFT
particleDrag: 0.05, // apply drag to the confetti
emissionFrequency: 0.05, // how often it should emit
numberOfParticles: 20, // number of particles to emit
gravity: 0.05, // gravity - or fall speed
shouldLoop: false,
colors: const [
Colors.green,
Colors.blue,
Colors.pink
], // manually specify the colors to be used
strokeWidth: 1,
strokeColor: Colors.white,
),
),
Align(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () {
_controllerCenterRight.play();
},
child: _display('pump left')),
),
//CENTER LEFT - Emit right
Align(
alignment: Alignment.centerLeft,
child: ConfettiWidget(
confettiController: _controllerCenterLeft,
blastDirection: 0, // radial value - RIGHT
emissionFrequency: 0.6,
minimumSize: const Size(10,
10), // set the minimum potential size for the confetti (width, height)
maximumSize: const Size(50,
50), // set the maximum potential size for the confetti (width, height)
numberOfParticles: 1,
gravity: 0.1,
),
),
Align(
alignment: Alignment.centerLeft,
child: TextButton(
onPressed: () {
_controllerCenterLeft.play();
},
child: _display('singles')),
),
//TOP CENTER - shoot down
Align(
alignment: Alignment.topCenter,
child: ConfettiWidget(
confettiController: _controllerTopCenter,
blastDirection: pi / 2,
maxBlastForce: 5, // set a lower max blast force
minBlastForce: 2, // set a lower min blast force
emissionFrequency: 0.05,
numberOfParticles: 50, // a lot of particles at once
gravity: 1,
),
),
Align(
alignment: Alignment.topCenter,
child: TextButton(
onPressed: () {
_controllerTopCenter.play();
},
child: _display('goliath')),
),
//BOTTOM CENTER
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: TextButton(
onPressed: () {
_controllerBottomCenter.play();
},
child: _display('hard and infrequent')),
),
],
),
);
}
Text _display(String text) {
return Text(
text,
style: const TextStyle(color: Colors.white, fontSize: 20),
);
}
}
Tags:
confetti