animated_list_item

Description:

animated list item

animated_list_item #
A flutter package whitch provide Animation of items in ListView, GridView, SliverList, etc.

Installing #
Depend on it #
Add this to your package's pubspec.yaml file:
dependencies:
animated_list_item: ^1.0.0
copied to clipboard
Import it #
Now in your code, you can use:
import 'package:animated_list_item/animated_list_item.dart';
copied to clipboard
AnimationType #
all types here 👇:
fade,
// flip
flipX,
flipXTop,
flipXBottom,
flipY,
flipYLeft,
flipYRight,
// zoom
zoom,
zoomLeft,
zoomRight,
// rotate
rotate,
rotateLeft,
rotateRight,
// translate
slide,
shakeX,
shakeY,
Example #
preparation 👇
late AnimationController _animationController;
List list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

Container item(int index) {
return Container(
color: Colors.blue,
margin: const EdgeInsets.all(8),
alignment: Alignment.center,
child: Text("$index"),
);
}

@override
void initState() {
super.initState();
_animationController = AnimationController(
duration: const Duration(milliseconds: 3000),
vsync: this,
);
_animationController.forward();
}
copied to clipboard
flipX #

ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) {
return AnimatedListItem(
index: index,
length: list.length,
aniController: _animationController,
animationType: AnimationType.flipX,
child: item(index),
);
},
);
copied to clipboard
flipY #

ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) {
return AnimatedListItem(
index: index,
length: list.length,
aniController: _animationController,
animationType: AnimationType.flipY,
child: item(index),
);
},
);
copied to clipboard
zoom #

ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) {
return AnimatedListItem(
index: index,
length: list.length,
aniController: _animationController,
animationType: AnimationType.zoom,
child: item(index),
);
},
);
copied to clipboard
slide #

ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) {
return AnimatedListItem(
index: index,
length: list.length,
aniController: _animationController,
animationType: AnimationType.slide,
startX: 40,
startY: 60,
child: item(index),
);
},
);
copied to clipboard
Note: If you want all items play animation at the same time, you can set their index same value.