rjsuzuki / flip_card

A flutter flip card

flip_card

A component that provides flip card animation. It could be used for hide and show details of a product.

How to use

import 'package:flip_card/flip_card.dart';

Create a flip card. The card will flip when touched

FlipCard(
  direction: FlipDirection.HORIZONTAL, // default
  front: Container(
        child: Text('Front'),
    ),
    back: Container(
        child: Text('Back'),
    ),
);

You can also configure the card to only flip when desired by using a GlobalKey to toggle the cards (not recommended):

GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

@override
Widget build(BuildContext context) {
  return FlipCard(
    key: cardKey,
    flipOnTouch: false,
    front: Container(
      child: RaisedButton(
        onPressed: () => cardKey.currentState.toggleCard(),
        child: Text('Toggle'),
      ),
    ),
    back: Container(
      child: Text('Back'),
    ),
  );
}

Recommended way to flip the card to avoid creating GlobalKeys:

FlipCardController _controller;

@override
void initState() {
  super.initState();
  _controller = FlipCardController();
}

child: FlipCard(
  controller: _controller,
)

void doStuff() {
  // Flip the card a bit and back to indicate that it can be flipped (for example on page load)
  _controller.hint(
    duration: UIConfig.projectFlipHintDuration,
    total: UIConfig.projectFlipHintTotal,
  );

  // Tilt the card a bit (for example when hovering)
  _controller.hint(
    duration: UIConfig.projectFlipHintDuration,
    total: UIConfig.projectFlipHintTotal,
  );

  // Flip the card programmatically
  _controller.toggleCard();
}