AmazingAnimatedWidget

This package provides a AmazingAnimatedWidget widget for Flutter apps. It allows users to add dynamic animations to any widget in Flutter. Whether you're working with lists, grids, or standalone widgets, AmazingAnimatedWidget makes it easy to create engaging and captivating interfaces with animations like spirals, explosions, scaling, flips, and more.

Features

• Easy integration with any widget.
• Customizable animation types: Spiral, Explosion, Circular, Fade, Flip, Scale.
• Supports both entry and exit animations.
• Smooth animation curves for realistic transitions.

Installation

Add the amazing_animated_widget package as a dependency in your pubspec.yaml file:

dependencies:
  amazing_animated_widget: ^latest_version # Replace with the latest version available on pub.flutter-io.cn

Import the package in your Flutter project:

import 'package:amazing_animated_widget/amazing_animated_widget.dart';

Usage

Basic ListView with Default Spiral Animation:

ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
        return AnimatedWidgetItem(
            index: index,
            animationType: AnimationType.spiral,
            child: Container(
                padding: EdgeInsets.all(16.0),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20.0),
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [
                            Colors.purpleAccent.withOpacity(0.6),
                            Colors.pinkAccent.withOpacity(0.6),
                        ],
                    ),
                    boxShadow: [
                        BoxShadow(
                            blurRadius: 10,
                            offset: Offset(2, 4),
                            color: Colors.black26,
                        ),
                    ],
                ),
                margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                child: ListTile(
                    subtitle: Text(
                        'Subtitle for ${items[index]}',
                        style: TextStyle(
                            color: Colors.white70,
                            fontStyle: FontStyle.italic,
                        ),
                    ),
                    title: Text(
                        items[index],
                        style: TextStyle(
                            fontSize: 18,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                        ),
                    ),
                    leading: Icon(Icons.star, size: 30, color: Colors.amber),
                    trailing: Icon(Icons.favorite, size: 30, color: Colors.pink),
                ),
            ),
        );
    },
)

Custom Spiral Animation (With Speed and Exit Effects):

ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
        return AnimatedWidgetItem(
            index: index,
            speedFactor: 1.0,
            exitAnimation: true,
            curve: Curves.easeOutBack,
            animationType: AnimationType.spiral,
            duration: const Duration(milliseconds: 600),
            animationDirection: index.isEven
                ? AnimationDirection.left
                : AnimationDirection.right,
            child: YourWidget(),
        );
    }
),

Custom Circular Animation:

ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
        return AnimatedWidgetItem(
            index: index,
            speedFactor: 1.0,
            exitAnimation: true,
            curve: Curves.easeOutCirc,
            animationType: AnimationType.circular,
            duration: const Duration(milliseconds: 600),
            animationDirection: index.isEven
                ? AnimationDirection.left
                : AnimationDirection.right,
            child: YourWidget(),
        );
    }
),

Grid View Example with Spiral Animation:

GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
    ),
    itemCount: items.length,
    itemBuilder: (context, index) {
        return AmazingAnimatedWidget(
            index: index,
            speedFactor: 1.0,
            exitAnimation: true,
            curve: Curves.easeInCubic,
            animationType: AnimationType.spiral,
            duration: const Duration(milliseconds: 600),
            animationDirection: index.isEven
                ? AnimationDirection.left
                : AnimationDirection.right,
            child: YourWidget(),
        );
    },
),

Standalone animations

• SpiralAnimation:

SpiralAnimation(
    duration: const Duration(milliseconds: 600),
    direction: AnimationDirection.left,
    curve: Curves.easeOutBack,
    speedFactor: 1.0,
    child: YourWidget(),
),

• CircularAnimation:

CircularAnimation(
    duration: const Duration(milliseconds: 600),
    direction: AnimationDirection.left,
    curve: Curves.easeOutCirc,
    speedFactor: 1.0,
    child: YourWidget(),
),

• ExplosionAnimation:

ExplosionAnimation(
    duration: const Duration(milliseconds: 600),
    direction: AnimationDirection.left,
    curve: Curves.easeOutCubic,
    speedFactor: 1.0,
    child: YourWidget(),
),

• FadeAnimation:

FadeAnimation(
    duration: const Duration(milliseconds: 600),
    direction: AnimationDirection.left,
    curve: Curves.easeIn,
    speedFactor: 3.0,
    child: YourWidget(),
),

• FlipAnimation:

FlipAnimation(
    duration: const Duration(milliseconds: 600),
    direction: AnimationDirection.left,
    curve: Curves.easeOut,
    speedFactor: 1.0,
    child: YourWidget(),
),

• ScaleAnimation:

ScaleAnimation(
    duration: const Duration(milliseconds: 600),
    curve: Curves.ease,
    speedFactor: 1.0,
    child: YourWidget(),
),

Customization

The AnimatedWidgetItem widget offers various customization options to match your app's design:

• child: The widget to animate (e.g., Text, Container, ListTile,...).
• index: An identifier used for animation sequencing and exit animations.
• speedFactor: Allows finer control over the animation speed.
• exitAnimation: When set to true, applies the animation to the widget's exit as well.
• curve: Defines the animation curve (e.g., Curves.easeIn, Curves.bounceOut).
• animationType: The type of animation (spiral, explosion, flip, fade, circular, scale).
• duration: The duration of the animation.
• animationDirection: Specifies the direction for directional animations (not required for scale).

Support

If you like this project, please leave a ⭐️. It helps and motivates us to continue working on it!

Contributions

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request.

License

This project is MIT licensed.