staggered_animated_widget 2.0.3

A Flutter package that provides staggered animations for widgets.

Staggered Animated Widget

A Flutter package that provides staggered animations for widgets.

Features

• Provides a simple way to add staggered animations to your Flutter widgets.
• Supports multiple animation directions: from top, bottom, left, or right.
• Easy to use with customizable delay.
• Added support for customizable duration and curve properties.

Getting Started

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

dependencies:
  staggered_animated_widget: ^2.0.2 

Usage

Here’s a simple example of how to use the StaggeredAnimatedWidget:

import 'package:flutter/material.dart';
import 'package:staggered_animated_widget/animation_direction.dart';
import 'package:staggered_animated_widget/staggered_animated_widget.dart';

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

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

  @override
  State<StaggeredAnimatedWidgetExample> createState() => _StaggeredAnimatedWidgetExampleState();
}

class _StaggeredAnimatedWidgetExampleState extends State<StaggeredAnimatedWidgetExample> {
  late bool _showSecond = false;
  late bool _showThird = false;
  late bool _showFourth = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                StaggeredAnimatedWidget(
                  delay: 200,
                  curve: Curves.fastLinearToSlowEaseIn,
                  direction: AnimationDirection.fromTop,
                  duration: Duration(milliseconds: 1000),
                  child: SizedBox(
                    height: 70,
                    width: double.infinity,
                    child: MaterialButton(
                      onPressed: () {
                        setState(() {
                          _showSecond = true;
                        });
                      },
                      color: Colors.blue,
                      child: Text(
                        'Show Second ^_^',
                        style: TextStyle(fontSize: 18),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 20),
                _showSecond
                    ? StaggeredAnimatedWidget(
                        delay: 200,
                        curve: Curves.linearToEaseOut,
                        direction: AnimationDirection.fromRight,
                        duration: Duration(milliseconds: 1000),
                        child: SizedBox(
                          height: 70,
                          width: double.infinity,
                          child: MaterialButton(
                            onPressed: () {
                              setState(() {
                                _showThird = true;
                              });
                            },
                            color: Colors.red,
                            child: Text(
                              'Show Third',
                              style: TextStyle(fontSize: 18),
                            ),
                          ),
                        ),
                      )
                    : SizedBox(),
                SizedBox(height: 20),
                _showThird
                    ? StaggeredAnimatedWidget(
                        delay: 200,
                        curve: Curves.easeInCubic,
                        direction: AnimationDirection.fromLeft,
                        duration: Duration(milliseconds: 1000),
                        child: SizedBox(
                          height: 70,
                          width: double.infinity,
                          child: MaterialButton(
                            onPressed: () {
                              setState(() {
                                _showFourth = true;
                              });
                            },
                            color: Colors.yellow,
                            child: Text(
                              'Show Last',
                              style: TextStyle(fontSize: 18),
                            ),
                          ),
                        ),
                      )
                    : SizedBox(),
                SizedBox(height: 20),
                _showFourth
                    ? StaggeredAnimatedWidget(
                        delay: 200,
                        curve: Curves.bounceIn,
                        direction: AnimationDirection.fromBottom,
                        duration: Duration(milliseconds: 200),
                        child: SizedBox(
                          height: 70,
                          width: double.infinity,
                          child: MaterialButton(
                            onPressed: () {},
                            color: Colors.green,
                            child: Text(
                              'Last ^_^',
                              style: TextStyle(fontSize: 18),
                            ),
                          ),
                        ),
                      )
                    : SizedBox(),
                SizedBox(height: 20),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Parameters

• child: The widget to animate.
• delay: The delay before the animation starts (in milliseconds).
• direction: The direction from which the widget will enter. Can be one of the following:
  • AnimationDirection.fromTop
  • AnimationDirection.fromBottom
  • AnimationDirection.fromLeft
  • AnimationDirection.fromRight
• duration: The duration of the animation (default is 800 milliseconds).
• curve: The curve used for the animation (default is Curves.easeInOut).

Additional Information

For more complex animations, you can customize the duration and curve properties inside the StaggeredAnimatedWidget. For detailed usage, consider adding more examples to the /example folder of your package.

License

This package is licensed under the MIT License.

Contact

• YouTube Channel: Just4Flutter
• Email: [e-mail]