stacked_animated_list 1.0.2 copy "stacked_animated_list: ^1.0.2" to clipboard
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 #

pub.dev

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.
10
likes
130
points
49
downloads
screenshot

Publisher

unverified uploader

Weekly Downloads

2024.08.11 - 2025.02.23

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

Repository (GitHub)
View/report issues

Topics

#animation #list #stacked #animated #listview

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

collection, flutter

More

Packages that depend on stacked_animated_list