flip_card_plus 0.7.1

A component that provides premium flip card animations. Created by Hadi.

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.

[/screenshots/flip-h.gif?raw=true&v1] [/screenshots/flip-v.gif?raw=true&v1]

---

✨ 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.

---

🚀 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);
}

Auto-Flip Timer

FlipCardPlus(
  front: Text('Question'),
  back: Text('Answer'),
  autoFlipDuration: const Duration(seconds: 2), // Flips automatically after delay
)

---

🎨 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 (emojis) and pair matching state logic.
3. 🛍️ Product Card: 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.

---

👤 Author & Maintainer

Hadi

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