animation_module 0.0.2
animation_module: ^0.0.2 copied to clipboard
A reusable animation module for Flutter
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.fadeAnimationType.slideAnimationType.scaleAnimationType.fadeAndSlide
Slide Directions #
SlideDirection.fromTopSlideDirection.fromBottomSlideDirection.fromLeftSlideDirection.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.successSnackBarType.errorSnackBarType.infoSnackBarType.warning