zeba_academy_stack_cards 0.1.0

A customizable Flutter package for creating stacked, overlapping, and swipeable cards with smooth animations and programmatic controls.

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

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