Animation Module

A lightweight and reusable animation module for Flutter. This package provides a collection of pre-built, easy-to-use, and customizable animation widgets to bring your app to life.

Features

  • AnimatedItem: A versatile widget for applying various animations like fade, slide, and scale to any widget.
  • AnimatedStyleItem & AnimatedGridItem: Widgets for creating staggered animations in lists and grids.
  • showBaseSnackBar: A function to display a simple, iOS-style top snackbar.
  • Highly customizable duration, delay, curves, and animation types.

Getting Started

Add this to your package's pubspec.yaml file:

dependencies:
  animation_module:
    path: ../

Then, import the package in your Dart code:

import 'package:animation_module/animation_module.dart';

AnimatedItem Widget

This is a flexible wrapper widget that can apply various animations to its child.

Usage

AnimatedItem(
  animationType: AnimationType.fadeAndSlide,
  slideDirection: SlideDirection.fromLeft,
  duration: const Duration(milliseconds: 500),
  child: const Card(
    child: ListTile(
      title: Text('Hello, Animations!'),
    ),
  ),
)

Parameters

Parameter Type Description Default
child Widget The widget to be animated. Required
animationType AnimationType The type of animation to apply. AnimationType.fadeAndSlide
slideDirection SlideDirection The direction from which the widget should slide in. SlideDirection.fromBottom
duration Duration The duration of the animation. Duration(milliseconds: 300)
delay Duration The delay before the animation starts. Duration.zero
curve Curve The animation curve. Curves.easeInOut

Animation Types

  • AnimationType.fade
  • AnimationType.slide
  • AnimationType.scale
  • AnimationType.fadeAndSlide

Slide Directions

  • SlideDirection.fromTop
  • SlideDirection.fromBottom
  • SlideDirection.fromLeft
  • SlideDirection.fromRight

List & Grid Animations

For staggered animations in lists and grids, you can use AnimatedStyleItem and AnimatedGridItem.

AnimatedStyleItem (for Lists)

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return AnimatedStyleItem(
      index: index,
      child: ListTile(
        title: Text(items[index]),
      ),
    );
  },
)

AnimatedGridItem (for Grids)

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemCount: items.length,
  itemBuilder: (context, index) {
    return AnimatedGridItem(
      index: index,
      child: Card(
        child: Center(
          child: Text(items[index]),
        ),
      ),
    );
  },
)

showBaseSnackBar

A simple function to show a notification from the top of the screen.

Usage

showBaseSnackBar(
  context,
  message: 'This is an info message!',
  type: SnackBarType.info,
);

SnackBar Types

  • SnackBarType.success
  • SnackBarType.error
  • SnackBarType.info
  • SnackBarType.warning

Libraries

anim_list/animated_grid_item
anim_list/animated_item
anim_list/animated_style_item
animation_module
snack_bar/show_base_snack_bar