zeba_academy_stack_cards #

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 #

StackCardsController #

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 #

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! 🚀