zeba_academy_stack_cards

pub package License: GPL-3.0

A powerful and customizable Flutter package for creating beautiful stacked cards with smooth swipe animations, overlapping layouts, and controller support.

Perfect for onboarding screens, profile cards, product showcases, recommendation systems, flash cards, Tinder-style interfaces, and interactive card stacks.

āœØ Features

  • šŸ“š Beautiful stacked card layout
  • šŸŽ“ Overlapping card design
  • šŸ‘† Swipe cards left and right
  • šŸŽÆ Drag gesture support
  • āš” Smooth animations
  • šŸŽ® Programmatic swipe controller
  • šŸ”„ Reset card stack anytime
  • šŸ“ Custom swipe threshold
  • šŸ“¦ Adjustable visible cards
  • šŸ“ Custom overlap spacing
  • šŸŽØ Scale effect for background cards
  • šŸ”„ Swipe callbacks
  • āœ… Stack completion callback
  • šŸš€ Lightweight and dependency-free
  • šŸ’™ Fully customizable
  • šŸ“± Supports Android, iOS, Web, Windows, macOS, and Linux

Screenshots

Add screenshots or GIFs here.

example/screenshots/stack_cards.gif

Installation

Add the package to your pubspec.yaml.

dependencies:
  zeba_academy_stack_cards: ^0.1.0

Install it.

flutter pub get

Import it.

import 'package:zeba_academy_stack_cards/zeba_academy_stack_cards.dart';

Quick Start

ZebaStackCards(
  cards: [
    Card(child: Center(child: Text("Card 1"))),
    Card(child: Center(child: Text("Card 2"))),
    Card(child: Center(child: Text("Card 3"))),
  ],
)

Basic Example

ZebaStackCards(
  cards: [
    Card(child: Center(child: Text("First"))),
    Card(child: Center(child: Text("Second"))),
    Card(child: Center(child: Text("Third"))),
  ],
  onSwipe: (index, direction) {
    print(index);
    print(direction);
  },
)

Using a Controller

final controller = StackCardsController();

ZebaStackCards(
  controller: controller,
  cards: cards,
)

Swipe left

controller.swipeLeft();

Swipe right

controller.swipeRight();

Reset stack

controller.reset();

Callbacks

Card Swiped

onSwipe: (index, direction) {
  print(index);
}

Card Changed

onCardChanged: (index) {
  print(index);
}

Stack Completed

onStackCompleted: () {
  print("Finished");
}

Customization

ZebaStackCards(
  cards: cards,

  visibleCards: 4,

  cardSpacing: 20,

  scaleFactor: 0.08,

  swipeThreshold: 140,

  maxRotation: 0.2,
)

Allow Only Right Swipe

ZebaStackCards(
  cards: cards,
  swipeDirections: {
    StackCardDirection.right,
  },
)

Allow Only Left Swipe

ZebaStackCards(
  cards: cards,
  swipeDirections: {
    StackCardDirection.left,
  },
)

API Reference

ZebaStackCards

Property Description
cards Cards displayed in the stack
controller Stack controller
visibleCards Number of visible cards
cardSpacing Space between stacked cards
scaleFactor Background card scale
swipeThreshold Swipe distance required
maxRotation Maximum drag rotation
animationDuration Animation duration
enableSwipe Enable/disable swipe
swipeDirections Allowed swipe directions
onSwipe Swipe callback
onCardChanged Active card callback
onStackCompleted Completion callback

StackCardsController

Method Description
swipeLeft() Swipe current card left
swipeRight() Swipe current card right
reset() Reset to first card

StackCardDirection

StackCardDirection.left

StackCardDirection.right

Example Applications

This package works great for:

  • Tinder-style interfaces
  • Flash cards
  • Product showcases
  • Travel destinations
  • News cards
  • Movie recommendations
  • Learning apps
  • Quiz apps
  • Onboarding screens
  • Food menus
  • Shopping apps
  • Portfolio cards
  • Business cards
  • Event listings
  • Social media feeds

Platform Support

Platform Supported
Android āœ…
iOS āœ…
Web āœ…
Windows āœ…
macOS āœ…
Linux āœ…

Performance

  • Optimized animations
  • Lightweight implementation
  • Minimal rebuilds
  • Smooth drag interactions
  • Responsive layout
  • No third-party dependencies

Contributing

Contributions are welcome.

  1. Fork the repository.
  2. Create a feature branch.
  3. Commit your changes.
  4. Push your branch.
  5. Open a Pull Request.

License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

See the LICENSE file for details.

About Me

āœØ Iā€™m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at sufyanism.com or connect with me on LinkedIn.

Your all-in-one learning hub!

šŸš€ Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy. Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! šŸ’»āœØ

Zeba Academy is a learning platform dedicated to coding, technology, and development.

āž” Visit our main site: https://zeba.academy

āž” Explore hands-on courses and resources: https://code.zeba.academy

āž” YouTube: https://www.youtube.com/@zeba.academy

āž” Instagram: https://www.instagram.com/zeba.academy/

Support

If you find this package useful, consider:

  • ā­ Starring the repository
  • šŸ‘ Liking and sharing the project
  • šŸž Reporting bugs
  • šŸ’” Suggesting new features
  • šŸ¤ Contributing improvements

Author

Developed with ā¤ļø by Sufyan bin Uzayr

Thank You

Thank you for using zeba_academy_stack_cards.

If this package helps you, please consider giving it a ā­ on GitHub and sharing it with the Flutter community.

Happy Coding! šŸš€

Libraries

zeba_academy_stack_cards