flutter_balloons

A Flutter package that provides a simple way to add animated floating balloons to your application. This widget is perfect for celebrating events, user achievements, or just adding a visual flair to your app.

Demo

Try it here: flutter_balloons demo

alt text

Installation

Add the following to your pubspec.yaml file:

dependencies:
  flutter_balloons: ^1.0.0

Then, run flutter pub get in your terminal.

Usage

The BalloonOverlay widget should be placed within a Stack to ensure the balloons appear over your main content. It's a single, self-contained widget.

Here's an example of how to use it:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        // Your main UI content goes here
        Center(
          child: ElevatedButton(
            onPressed: () {
              // Your button logic to show/hide the balloons
            },
            child: const Text('Toggle Balloons'),
          ),
        ),

        // The BalloonOverlay is placed on top of the main UI
        if (showBalloons)
          const BalloonOverlay(
            totalBalloons: 30,
            spawnInterval: Duration(milliseconds: 500),
          ),
      ],
    ),
  );
}

Parameters

You can customize the appearance and behavior of the balloons using the following parameters:

Parameter	Type	Default Value	Description
`totalBalloons`	`int?`	`50`	The total number of balloons to spawn. If `null`, it will spawn indefinitely.
`spawnInterval`	`Duration`	`Duration(milliseconds: 800)`	The time between spawning each balloon.
`colors`	`List<Color>`	`[Colors.red, ...]`	A list of colors for the balloons.
`minSize`	`double`	`60.0`	The minimum size (diameter) for a balloon.
`maxSize`	`double`	`100.0`	The maximum size (diameter) for a balloon.
`minDuration`	`Duration`	`Duration(seconds: 8)`	The minimum animation duration for a balloon.
`maxDuration`	`Duration`	`Duration(seconds: 12)`	The maximum animation duration for a balloon.

Important Note

The BalloonOverlay is designed to work exclusively within a Stack widget. Placing it in a Column or Row will not work as intended and may cause layout overflow errors, as the widget requires an unconstrained area to render its animations.