zeba_academy_flip_widgets

pub package likes popularity

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!

Libraries

zeba_academy_flip_widgets