stacked_animated_list 1.0.2
stacked_animated_list: ^1.0.2 copied to clipboard
Create visually stunning animated stacked lists. Transform your static lists into engaging, swipable card views.
Stacked Animated List View flutter #

Features #
Create visually stunning animated stacked lists. Transform your static lists into engaging, swipable card views.

Getting started #
add dependency to your pubspec.yaml
file
dependencies:
stacked_animated_list: ^1.0.2
copied to clipboard
import package in your dart file
import 'package:stacked_animated_list/ui/stacked_list_widget.dart';
copied to clipboard
Usage #
Add StackedListWidget
to your widget and pass the list of widget that you want to display.
import 'package:stacked_animated_list/ui/stacked_list_widget.dart';
const images = [
Assets.imagesOnepeice,
Assets.imagesNarutoi,
Assets.imagesStone,
Assets.imagesWindbreaker,
];
class HomeScreenWidget extends StatelessWidget {
const HomeScreenWidget({super.key});
@override
Widget build(BuildContext context) {
const cardWidth = 220.0;
final listItems = images.mapIndexed((index, image) {
return SizedBox(
width: cardWidth,
child: AspectRatio(
aspectRatio: .66,
child: Image.asset(
image,
fit: BoxFit.cover,
),
),
);
}).toList();
return Scaffold(
body: StackedListWidget(
listItems: listItems,
listItemWidth: cardWidth,
),
);
}
}
copied to clipboard
Additional configuration available #
StackedListWidget(
listItems: listItems,
listItemWidth: cardWidth,
animationDuration: const Duration(milliseconds: 350),
borderRadius: BorderRadius.circular(16),
rotationAngle: 10,
additionalTranslateOffsetBeyondScreen: 50,
longPressDelay: 300,
onCenterCardClick: (index) {
print('Center card clicked: $index');
},
focusedItemShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.26),
blurRadius: 28,
spreadRadius: 8,
offset: const Offset(8, 16),
),
BoxShadow(
color: Colors.black.withOpacity(0.26),
blurRadius: 28,
spreadRadius: 8,
offset: const Offset(-8, 2),
),
],
)
copied to clipboard
Parameter | Description |
---|---|
animationDuration |
The animation duration of card movement. |
borderRadius |
Border radius of the card in the stacked list. |
rotationAngle |
Rotation angle at which the card should be rotated. Higher the angle, higher the card rotation. |
additionalTranslateOffsetBeyondScreen |
Additional horizontal offset of unfocused card. This will move the unfocused card outside of screen as per the provided value. |
focusedItemShadow |
Focused card shadow customization parameter. |
longPressDelay |
Long press delay to trigger the card movement. |
onCenterCardClick |
Callback when the center card is clicked. |