Quiere agregar confeti en la pantalla en Flutter. Supongamos que si un usuario ganó un juego o alguna recompensa, debería haber una explosión de confeti en la pantalla. Antes no era una tarea fácil, pero ahora lo es con la biblioteca Flutter: confetti. En este artículo, veremos cómo implementar confeti en Flutter, luego se puede personalizar según los requisitos.
Implementación:
Siga los pasos a continuación para implementar Confetti en Flutter:
Paso 1: agregue la dependencia en pubspec.yaml ejecutando el siguiente comando en la terminal IDE,
Dart
flutter pub add confetti
Paso 2: importa la dependencia de confeti a main.dart.
Dart
import 'package:confetti/confetti.dart';
Paso 3: En CofettiWidget(), debemos agregar confettiController , blastDirection , emitFrequency , gravity, numberOfPartices, etc. Podemos agregar parámetros y modificarlos según nuestros requisitos. También agregamos fuerza de explosión máxima y mínima con partículas que deberían emerger.
Dart
ConfettiWidget( confettiController: _centerController, blastDirection: pi / 2, maxBlastForce: 5, minBlastForce: 1, emissionFrequency: 0.03, numberOfParticles: 10, shouldLoop:true, gravity: 0, ),
Código fuente del confeti central:
Necesitamos inicializar cofettiController en initState() y, después de su uso, debemos desecharlo en el método dispose() . Cuando hagamos clic en Center TextButton, invocará _centerController que iniciará la animación en la pantalla. Si queremos una animación continua en la pantalla, debemos establecer shouldLoop en verdadero.
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))),
),
],
),
),
),
);
}
}
Producción:
También podemos agregar formas personalizadas como estrellas, círculos, etc. junto con diferentes colores en ConfettiWidget. La creatividad no se limita, juega con el Confetti y dale vida a las aplicaciones.
Confeti de 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))),
),
],
),
),
),
);
}
}
Producción:
