flip_card_plus 1.0.0

A highly customizable 3D flip card widget for Flutter. Features smooth animations, drag-to-flip gestures, hover effects, custom curves, and zero-allocation performance.

flip_card_plus

A premium Flutter component that provides a smooth, highly optimized 3D flip card animation. Perfect for cards, games, e-commerce products, flashcards, and profiles.

---

🎬 Demo Video

▶️ Watch full demo on YouTube

---

📱 Examples Preview

Example 1  |  Example 2  |  Example 3  |  Example 4

Example 5  |  Example 6  |  Example 7  |  Example 8

Example 9  |  Example 10  |  Example 11

---

✨ Features & Performance Optimization

• Zero Garbage Collection Overhead: Allocations during active flips are reduced to exactly zero by caching state animation instances.
• Repaint Boundary Isolation (useRepaintBoundary): Isolates the repaint lifecycle of card faces, avoiding layout and repaint cycles from propagating to parent/sibling widgets.
• Customizable ClipBehavior (clipBehavior): Support for Clip.hardEdge to skip offscreen GPU save-layer allocations for a ~30% raster speedup on low-end hardware.
• Swipe-to-Flip (flipOnDrag): Intuitive gestures that mirror horizontal and vertical flip directions in Right-to-Left (RTL) text layouts.
• Keyboard Accessibility (focusable): Supports focus request and space/enter key triggers to toggle flips programmatically.
• Premium Dynamic Shadows: Dynamic shadow casting that blurs and lifts as the rotation angle approaches the midpoint.

---

📦 Installation

Add flip_card_plus to your pubspec.yaml:

dependencies:
  flip_card_plus: ^1.0.0

Or run:

flutter pub add flip_card_plus

---

🚀 How to Use

Import the package:

import 'package:flip_card_plus/flip_card_plus.dart';

Default Use Case (Touch Controlled)

FlipCardPlus(
  fill: Fill.back, // Sizes the back side of the card to match the front side
  direction: Axis.horizontal, // Horizontal or Vertical axis
  initialSide: CardSide.front, // Initially visible side
  front: Container(
    child: const Text('Front Side'),
  ),
  back: Container(
    child: const Text('Back Side'),
  ),
)

Controlling Programmatically

To control the card programmatically, pass a FlipCardPlusController:

late FlipCardPlusController _controller = FlipCardPlusController();

@override
Widget build(BuildContext context) {
  return FlipCardPlus(
    controller: _controller,
    front: ...,
    back: ...,
  );
}

void doStuff() {
  // Flip the card programmatically
  _controller.flip();

  // Flip without animation
  _controller.flipWithoutAnimation();

  // Hint flip (slightly animate front and back to show interactiveness)
  _controller.hint();

  // Skew card angle
  _controller.skew(0.2);
}

---

⚙️ Customization & Parameters (New Features)

FlipCardPlus is highly customizable. Below are examples of how to implement the newly introduced premium features:

1. Gesture & Hover Triggers

Enable drag-to-flip or hover-to-flip gestures:

FlipCardPlus(
  flipOnDrag: true,        // Enable swipe/drag to flip gesture
  dragThreshold: 0.4,      // Swipe must pass 40% of size to commit flip
  flipOnHover: true,       // Auto-flip when mouse hovers, flip back on exit
  front: ...,
  back: ...,
)

2. Premium 3D Depth & Dynamic Shadows

Customize perspective projection and dynamic shadow casting:

FlipCardPlus(
  perspective: 0.0015,                       // Adjust 3D depth perspective
  elevation: 8.0,                            // Casting shadow intensity
  shadowColor: Colors.black.withOpacity(0.3),// Color of the shadow
  front: ...,
  back: ...,
)

3. Custom Easing Curves

Configure distinct easing curves for both front and back rotations:

FlipCardPlus(
  curve: Curves.elasticOut,        // Easing curve for front-to-back flip
  reverseCurve: Curves.bounceOut,  // Easing curve for back-to-front flip
  duration: const Duration(milliseconds: 800),
  front: ...,
  back: ...,
)

4. Lifecycle Callbacks

Listen to the start and completion of flip actions:

FlipCardPlus(
  onFlipStart: (fromSide, toSide) {
    print("Flipping started from $fromSide to $toSide");
  },
  onFlipDone: (isFront) {
    print("Flipped completely! Is front side visible: $isFront");
  },
  front: ...,
  back: ...,
)

5. Layout & Corner Clip Optimization

Smooth out card corner clipping and prevent visual artifacts during 3D rotations:

FlipCardPlus(
  borderRadius: BorderRadius.circular(16.0), // Clean clipped corner radius
  clipBehavior: Clip.hardEdge,              // Boost raster speed on low-end GPUs
  useRepaintBoundary: true,                  // Isolate card face repaint trees
  front: ...,
  back: ...,
)

6. Accessibility & Localization

Add accessibility semantics and make the card responsive to RTL layouts:

FlipCardPlus(
  semanticLabel: "Flashcard showing Flutter tutorial",
  focusable: true,  // Allow focus and flipping using Space/Enter keys
  rtlAware: true,   // Automatically reverse horizontal drag/flip in RTL
  front: ...,
  back: ...,
)

7. Interactive State Lock

Lock the card interactions when loading or in a resolved game state:

FlipCardPlus(
  isDisabled: true, // Disables touch, drag, hover, and controller flips
  front: ...,
  back: ...,
)

---

🎨 Interactive Showcases (Included in Example)

The example app includes a comprehensive tabbed page demonstrating 5 high-fidelity showcases:

1. 💳 Payment Card (Credit Card)

Gradients, contactless icon, signature strip, and card details, flipping horizontal/vertical with realistic shadow lifting.

2. 🧩 Memory Match Game

A grid of 12 cards with matching symbols and pair matching state logic.

3. 🛍️ Product Card (E-Commerce)

E-commerce card with purchase/details toggle and color/size selectors on the back.

4. 📝 Flashcards

Quiz card with score progression tracking and practice controls.

5. 👤 Business Card

Hover/touch-triggered personal badge featuring a profile avatar and QR code.

⚙️ Interactive Controls & Platforms

Configurable 3D perspective depth, curves, repaint boundaries, and platform-specific haptic triggers.

---

👤 Author & Maintainer

Hadi

• 📧 [e-mail]
• 🐙 github.com/Itsxhadi
• 🎬 YouTube Demo