README.md

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

import package in your dart file

import 'package:stacked_animated_list/ui/stacked_list_widget.dart';

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,
      ),
    );
  }
}

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),
          ),
        ],
      )

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.