Floating Animation Package #

A customizable Flutter package for creating animated and dynamic floating shapes as a background. Supports various shapes like circles, rectangles, triangles, and hearts with configurable properties like color, size, speed, direction, spawn rate, and opacity.

This widget also supports seamless state changes, allowing the shapes to adapt dynamically without disrupting the animation. For example, you can change the shape mid-program, and the widget will continue running smoothly with the newly selected shape.
Now with icon support and additional transformations such as slow rotation and pulsing opacity!

Here are some examples of how it works:

Circles with a background gradient: #

Hearts with a background gradient: #

Raining with a background gradient: #

Icon with Transformations #

Features #

• Multiple Shape Types: Circle, rectangle, triangle, heart, and more.
• Icon Support: Easily display custom icons instead of shapes.
• Customizable Colors: Define unique colors for each shape or icon.
• Dynamic Animations: Shapes and icons float with customizable speed, size, and direction.
• Layered Depth: Shapes render in layers based on their depth value.
• Seamless Transitions: Change properties on-the-fly without interrupting the animation.
• Adjustable Size: Control the size of shapes using a size multiplier.
• Floating Direction: Specify the direction in which shapes float (e.g., up, down, left, right).
• Spawn Rate Control: Set the rate at which new shapes are spawned.
• Additional Transformations:
  • Rotation: Slowly rotate shapes or icons for extra flair.
  • Pulsing Opacity: Make shapes or icons gently pulse in opacity.
• Scalable Design: Automatically adjusts to different screen sizes.

Installation #

Add the following line to your pubspec.yaml file:

dependencies:
  floating_animation: ^1.0.9

Then fetch the package by running:

flutter pub get

Usage #

Basic Example #

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

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

class ShapeFloatingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Floating Shapes')),
        body: FloatingAnimation(
          maxShapes: 50,
          speedMultiplier: 1.0,
          sizeMultiplier: 1.0,
          selectedShape: 'circle',
          shapeColors: {
            'circle': Colors.blue,
            'rectangle': Colors.green,
            'heart': Colors.pink,
            'triangle': Colors.purple,
          },
          direction: FloatingDirection.up,
          spawnRate: 10.0,
        ),
      ),
    );
  }
}

Icon with Transformations Example #

This example demonstrates how to have an icon (a star) fall from the top of the screen with a slow rotation and pulsing opacity. You can set the icon color using the selectedShape key in the shapeColors map.

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

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

class IconTransformationApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Icon with Transformations',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon with Transformations'),
        ),
        body: Container(
          color: Colors.black,
          child: FloatingAnimation(
            direction: FloatingDirection.down, // Icons fall from top to bottom.
            icon: Icons.star, // The icon to animate.
            selectedShape: 'icon', // Use a key that maps to icon-specific colors.
            shapeColors: {
              'icon': Colors.orange, // Icon color
              'circle': Colors.blue,
              'rectangle': Colors.green,
              'heart': Colors.pink,
              'triangle': Colors.purple,
            },
            spawnRate: 3.0,
            maxShapes: 20,
            enableRotation: true,         // Enable slow rotation.
            rotationSpeedMultiplier: 1.0,
            enablePulse: true,            // Enable pulsing in opacity.
            pulseSpeed: 2.0,              // 2 oscillations per second.
            pulseAmplitude: 0.3,          // Adjusts the opacity oscillation.
          ),
        ),
      ),
    );
  }
}

Customization #

Shape Types #

Specify the type of shapes to render using the selectedShape property. Supported values include:

• circle
• rectangle
• triangle
• heart
• icon (when using icons)

Colors #

Define custom colors for each shape or icon using the shapeColors property:

FloatingAnimation(
  shapeColors: {
    'circle': Colors.orange,
    'rectangle': Colors.teal,
    'heart': Colors.redAccent,
    'triangle': Colors.yellow,
    'icon': Colors.orange, // Set icon color
  },
)

Speed, Size, and Direction #

• Speed: Adjust the overall speed with speedMultiplier.
• Size: Use sizeMultiplier to scale the shapes.
• Direction: Set the floating direction (e.g., FloatingDirection.up, FloatingDirection.down, FloatingDirection.left, or FloatingDirection.right).

FloatingAnimation(
  speedMultiplier: 1.5,
  sizeMultiplier: 0.8,
  direction: FloatingDirection.left,
)

Spawn Rate #

Control the frequency of new shapes with spawnRate (shapes per second):

FloatingAnimation(
  spawnRate: 15.0, // 15 shapes per second
)

Transformations #

• Rotation: Enable rotation with enableRotation and control its speed using rotationSpeedMultiplier.
• Pulsing Opacity: Enable opacity pulsing with enablePulse, and adjust its behavior using pulseSpeed and pulseAmplitude.

FloatingAnimation(
  enableRotation: true,
  rotationSpeedMultiplier: 1.0,
  enablePulse: true,
  pulseSpeed: 2.0,
  pulseAmplitude: 0.3,
)

Reference #

FloatingAnimation Properties #

Shape Properties #

Example Use Cases #

• Floating bubbles as a background.
• Themed animations for holidays (e.g., hearts for Valentine's Day).
• Customizable visual effects for Flutter apps.
• Dynamic Icons with Transformations: Use icons with smooth rotation and pulsing opacity to add extra visual appeal.

Contributing #

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Submit a pull request.

License #

This project is licensed under the MIT License. See the LICENSE file for details.

Support #

If you encounter any issues or have questions, feel free to open an issue on the GitHub repository.