flip_card

Description:

flip card

flip_card #
A component that provides a flip card animation. It could be used for hiding and showing details of a product.




How to use #
import 'package:flip_card/flip_card.dart';
copied to clipboard
Create a flip card. The card will flip when touched
FlipCard(
fill: Fill.fillBack, // Fill the back side of the card to make in the same size as the front.
direction: FlipDirection.HORIZONTAL, // default
side: CardSide.FRONT, // The side to initially display.
front: Container(
child: Text('Front'),
),
back: Container(
child: Text('Back'),
),
);
copied to clipboard
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'),
),
);
}
copied to clipboard
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();
}
copied to clipboard
You can auto-flip the widget after a certain delay without any external triggering.
FlipCard(
fill: Fill.fillBack, // Fill the back side of the card to make in the same size as the front.
direction: FlipDirection.HORIZONTAL, // default
side: CardSide.FRONT, // The side to initially display.
front: Container(
child: Text('Front'),
),
back: Container(
child: Text('Back'),
),
autoFlipDuration: const Duration(seconds: 2), // The flip effect will work automatically after the 2 seconds
);
copied to clipboard