stacked_animated_list

Description:

stacked animated list

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.