Confetti Package

Introduction of Confetti Package

The confetti package in Flutter provides a way to add festive confetti effects to your applications, making celebrations, achievements, or any joyful moment in your app more lively and visually appealing. This package allows you to create customizable confetti bursts that can be triggered by various user interactions or events, adding a fun and interactive element to your app.

Key Features:

• Customizable Confetti: Tailor colors, shapes, and sizes to create the perfect effect.
• Easy Integration: Simple API for quick and easy confetti setup.
• Smooth Animations: Ensures fluid, visually appealing animations.
• Flexible Triggers: Activate confetti on button presses, taps, or automatically.

Installation
To use the package, add it to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  confetti: ^0.6.0  # Use the latest version

Run ‘flutter pub get’ to install the package.

Importing the Package

import 'package:confetti/confetti.dart';

Basic Usage
Here’s an example of how to use the ‘ConfettiWidget’ in a Flutter application:

import 'package:flutter/material.dart';
import 'package:confetti/confetti.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ConfettiExample(),
    );
  }
}

class ConfettiExample extends StatefulWidget {
  @override
  _ConfettiExampleState createState() => _ConfettiExampleState();
}

class _ConfettiExampleState extends State<ConfettiExample> {
  late ConfettiController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ConfettiController(duration: const Duration(seconds: 10));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Confetti Example'),
      ),
      body: Stack(
        children: [
          Center(
            child: ElevatedButton(
              onPressed: () {
                _controller.play();
              },
              child: Text('Celebrate!'),
            ),
          ),
          ConfettiWidget(
            confettiController: _controller,
            blastDirectionality: BlastDirectionality.explosive, // Shoot in all directions
            shouldLoop: false, // Do not loop the animation
            colors: [Colors.red, Colors.blue, Colors.green, Colors.yellow], // Custom colors
          ),
        ],
      ),
    );
  }
}

Properties:

confettiController: The controller to manage the state and behavior of the confetti animation.

confettiController: _controller,

blastDirectionality: Controls the direction of the confetti blast. Can be set to BlastDirectionality.explosive for all directions or BlastDirectionality.directional for a specific direction.

blastDirectionality: BlastDirectionality.explosive,

shouldLoop: Determines if the confetti animation should loop continuously.

shouldLoop: false,

colors: A list of colors for the confetti particles.

colors: A list of colors for the confetti particles.

Example of Confetti Package Usage

ConfettiWidget(
  confettiController: _controller,
  blastDirectionality: BlastDirectionality.explosive,
  shouldLoop: false,
  colors: [Colors.red, Colors.blue, Colors.green, Colors.yellow],
)

Final Code: This is the final code with the combination of some above Flutter Confetti package properties.

import 'package:flutter/material.dart';
import 'package:confetti/confetti.dart';
import 'dart:math';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _controler = ConfettiController();
  bool isPlaying = false;

  @override
  void dispose() {
    super.dispose();
    _controler.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.teal.shade900,
            title: Center(
              child: Text(
                'C O N F E T T I',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
              ),
            ),
          ),
          body: Center(
            child: MaterialButton(
              onPressed: () {
                if(isPlaying){
                  _controler.stop();
                }else{
                  _controler.play();
                }
                isPlaying = !isPlaying;

              },
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'Party Time',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              color: Colors.teal,
            ),
          ),
        ),
        ConfettiWidget(
          confettiController: _controler,
          blastDirection: -pi/2,
        ),
      ],
    );
  }
}

The confetti package provides a fun and interactive way to celebrate moments in your Flutter app with customizable confetti effects, making any occasion feel special and engaging.

Thank for visiting Hybrid App Development
Posted by Hussam HM