zeba_academy_foldable_cards #

A powerful Flutter package for creating beautiful 3D foldable cards with smooth unfolding animations, gesture interactions, perspective transforms, and expandable ticket/card styles.

Perfect for:

• Interactive UI cards
• Event tickets
• Product showcases
• Foldable onboarding
• Animated information panels
• Creative mobile interfaces

✨ Features #

✅ Smooth 3D fold animations
✅ Multi-step unfolding effects
✅ Gesture-controlled folds
✅ Perspective transform support
✅ Expandable ticket/card styles
✅ Custom fold controllers
✅ Reusable and customizable widgets
✅ Lightweight and easy to integrate
✅ Flutter Material 3 compatible

📸 Preview #

Add GIF/screenshots here before publishing to pub.dev.

🚀 Installation #

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_foldable_cards: ^0.0.1

Run:

flutter pub get

📦 Import #

import 'package:zeba_academy_foldable_cards/zeba_academy_foldable_cards.dart';

🧩 Basic Usage #

FoldableCard(
  header: const Center(
    child: Text(
      'Tap To Expand',
      style: TextStyle(
        color: Colors.white,
        fontSize: 22,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),

  body: Padding(
    padding: const EdgeInsets.all(20),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text(
          'Foldable Content',
          style: TextStyle(
            fontSize: 22,
            fontWeight: FontWeight.bold,
          ),
        ),

        SizedBox(height: 16),

        Text(
          'Beautiful animated foldable card widget.',
        ),
      ],
    ),
  ),
)

🎮 Gesture Controls #

The package supports:

• Tap to toggle folds
• Vertical drag gestures
• Smooth interactive unfolding

FoldableCard(
  enableGesture: true,
  header: headerWidget,
  body: bodyWidget,
)

🎟 Ticket Fold Style #

TicketFoldCard(
  header: headerWidget,
  body: bodyWidget,
)

🎛 Using FoldController #

Control cards programmatically.

final controller = FoldController();

Open Card #

controller.open();

Close Card #

controller.close();

Toggle Card #

controller.toggle();

🛠 Full Example #

import 'package:flutter/material.dart';
import 'package:zeba_academy_foldable_cards/zeba_academy_foldable_cards.dart';

void main() {
  runApp(const DemoApp());
}

class DemoApp extends StatelessWidget {
  const DemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,

      home: Scaffold(
        backgroundColor: Colors.grey.shade200,

        appBar: AppBar(
          title: const Text('Foldable Cards'),
        ),

        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(20),

            child: FoldableCard(
              header: Container(
                alignment: Alignment.center,
                color: Colors.blue,

                child: const Text(
                  'Tap To Fold',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),

              body: Container(
                padding: const EdgeInsets.all(20),

                child: const Column(
                  crossAxisAlignment:
                      CrossAxisAlignment.start,

                  children: [
                    Text(
                      'Amazing Fold Animation',
                      style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                      ),
                    ),

                    SizedBox(height: 20),

                    Text(
                      'Create beautiful foldable interfaces easily.',
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

⚙️ FoldableCard Parameters #

🎨 Fold Styles #

FoldStyle.card
FoldStyle.ticket

🧪 Testing #

Run package tests:

flutter test

Analyze package:

flutter analyze

📁 Package Structure #

lib/
│
├── zeba_academy_foldable_cards.dart
│
└── src/
    ├── foldable_card.dart
    ├── fold_section.dart
    ├── fold_controller.dart
    ├── fold_style.dart
    ├── ticket_fold_card.dart
    └── utils/
        └── perspective_utils.dart

🚀 Roadmap #

Upcoming features planned:

• Physics-based fold animations
• Horizontal folding
• Accordion folds
• Dynamic fold sections
• Custom shadow rendering
• SVG support
• Glassmorphism fold cards
• Fold callbacks
• Nested fold support
• Haptic feedback
• Sliver fold cards

🤝 Contributing #

Contributions are welcome!

Feel free to:

• Open issues
• Suggest improvements
• Submit pull requests

📄 License #

This project is licensed under the MIT License.

👨‍💻 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 at: https://code.zeba.academy
➡ Check out our YouTube for more tutorials: https://www.youtube.com/@zeba.academy
➡ Follow us on Instagram: https://www.instagram.com/zeba.academy/

❤️ Support #

If you like this package, please give it a ⭐ on GitHub and share it with the Flutter community!

Thank you for visiting!