flutterfx_meteors 1.0.0

A Flutter widget that creates an animated meteor shower effect with customizable meteors falling across your UI. Part of the FlutterFX collection of animated widgets.

MeteorShower

A Flutter widget that creates an animated meteor shower effect with beautiful falling meteors. Part of the FlutterFX collection.

Features

• 🌠 Beautiful animated meteors with trail effects
• ⚡ Zero external dependencies - just Flutter
• 🎛️ Customizable number of meteors and duration
• 📱 Works on all platforms (iOS, Android, Web, Desktop)

Installation

flutter pub add flutterfx_meteors

Or add to your pubspec.yaml:

dependencies:
  flutterfx_meteors: ^1.0.0

Usage

Basic Usage

import 'package:flutterfx_meteors/flutterfx_meteors.dart';

MeteorShower(
  child: YourContentWidget(),
)

With Customization

MeteorShower(
  numberOfMeteors: 15,
  duration: Duration(seconds: 8),
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      borderRadius: BorderRadius.circular(10),
    ),
    child: Center(
      child: Text('Meteor shower'),
    ),
  ),
)

Card with Meteor Effect

Container(
  width: 300,
  height: 200,
  child: MeteorShower(
    numberOfMeteors: 10,
    duration: Duration(seconds: 5),
    child: Card(
      color: Colors.black,
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text(
          'Your content here',
          style: TextStyle(color: Colors.white),
        ),
      ),
    ),
  ),
)

Parameters

Parameter	Type	Default	Description
child	Widget	required	The widget to display behind the meteor animation
numberOfMeteors	int	10	Number of meteors to display
duration	Duration	10s	Duration of the complete animation cycle

How It Works

The animation creates meteors that:

1. Spawn at random positions in the upper-left area
2. Fall diagonally at a 45° angle
3. Fade out as they travel
4. Each meteor has its own random delay and speed

More FlutterFX Widgets

Check out other widgets in the FlutterFX collection:

• flutterfx_blur_fade - Animated blur and fade effect
• flutterfx_border_beam - Animated border beam effect
• View all at flutterfx.com

Contributing

Found a bug? Have a suggestion? Feel free to open a PR at the FlutterFX repository.

License

MIT License - see the LICENSE file for details.

---

Built with ❤️ by Amal Chandran | FlutterFX