zeba_academy_flip_widgets 0.0.1

Advanced 3D flip animations, cube transitions, interactive drag flips, and multi-face widgets for Flutter.

zeba_academy_flip_widgets

Advanced 3D flip animations, cube transitions, interactive drag flips, perspective depth, and multi-face widgets for Flutter.

---

✨ Features

✅ 3D Card Flips
✅ Cube Transitions
✅ Interactive Drag Flipping
✅ Perspective Depth
✅ Multi-Face Widgets
✅ Gesture-Based Animations
✅ Controller Support
✅ Smooth Hardware Accelerated Animations
✅ Highly Customizable
✅ Production Ready

---

📸 Preview

Flip Card	Multi Face	Cube Transition
3D card flip animations	Rotate between multiple faces	Smooth cube-like page transitions

---

🚀 Installation

Add dependency to your pubspec.yaml:

dependencies:
  zeba_academy_flip_widgets: latest_version

Then run:

flutter pub get

---

📦 Import

import 'package:zeba_academy_flip_widgets/zeba_academy_flip_widgets.dart';

---

🎴 FlipCard

A beautiful 3D animated flip card widget.

---

Basic Example

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FlipCard(
          front: Container(
            width: 220,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(20),
            ),
            alignment: Alignment.center,
            child: const Text(
              'Front',
              style: TextStyle(
                color: Colors.white,
                fontSize: 30,
              ),
            ),
          ),
          back: Container(
            width: 220,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(20),
            ),
            alignment: Alignment.center,
            child: const Text(
              'Back',
              style: TextStyle(
                color: Colors.white,
                fontSize: 30,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

---

🎮 Flip Controller

Control card flips programmatically.

---

Example

final controller = FlipController();

FlipCard(
  controller: controller,
  front: const FrontWidget(),
  back: const BackWidget(),
)

controller.flip();

---

🔄 Flip Direction

Supports:

• Horizontal flipping
• Vertical flipping

---

Example

FlipCard(
  direction: FlipDirection.vertical,
  front: const FrontWidget(),
  back: const BackWidget(),
)

---

🖱 InteractiveFlip

Interactive drag-based flipping widget.

---

Example

InteractiveFlip(
  front: Container(
    color: Colors.blue,
    child: const Center(
      child: Text('Front'),
    ),
  ),
  back: Container(
    color: Colors.red,
    child: const Center(
      child: Text('Back'),
    ),
  ),
)

---

🧊 CubeTransition

Beautiful cube-style page transitions.

---

Example

AnimationController controller;

CubeTransition(
  animation: controller,
  child: Container(
    color: Colors.orange,
  ),
)

---

🪞 MultiFaceFlip

Flip through multiple faces/widgets.

---

Example

MultiFaceFlip(
  faces: [
    Container(
      color: Colors.blue,
      child: const Center(
        child: Text('Face 1'),
      ),
    ),
    Container(
      color: Colors.green,
      child: const Center(
        child: Text('Face 2'),
      ),
    ),
    Container(
      color: Colors.red,
      child: const Center(
        child: Text('Face 3'),
      ),
    ),
  ],
)

---

⚙️ API Overview

Widget	Description
FlipCard	Animated 3D flip card
InteractiveFlip	Gesture-controlled flipping
CubeTransition	Cube rotation transitions
MultiFaceFlip	Multiple face rotating widget
FlipController	Programmatic flip controller

---

🎨 Customization

Animation Duration

FlipCard(
  duration: const Duration(milliseconds: 1200),
  front: frontWidget,
  back: backWidget,
)

---

Perspective Depth

FlipCard(
  perspective: 0.003,
  front: frontWidget,
  back: backWidget,
)

---

🧪 Testing

Run tests using:

flutter test

---

📱 Platform Support

✅ Android
✅ iOS
✅ Web
✅ Windows
✅ macOS
✅ Linux

---

🛣 Roadmap

Upcoming features:

• Physics-based flips
• Book page animations
• 3D carousel widgets
• Tinder-style swipe cards
• Hero flip transitions
• Nested 3D transforms
• Flip grids
• Lighting and shadow effects

---

🤝 Contributing

Contributions are welcome!

Feel free to:

• Report bugs
• Suggest new features
• Improve documentation
• 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! 💻✨

---

🌐 Links

➡ Visit our main site: https://zeba.academy
➡ Explore courses and resources: https://code.zeba.academy
➡ YouTube: https://www.youtube.com/@zeba.academy
➡ 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

Thank you for using zeba_academy_flip_widgets!