Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brunojurkovic/flip_card
A Flutter widget that easily adds the flipping animation to any widget
https://github.com/brunojurkovic/flip_card
card dart flutter flutter-package
Last synced: 4 days ago
JSON representation
A Flutter widget that easily adds the flipping animation to any widget
- Host: GitHub
- URL: https://github.com/brunojurkovic/flip_card
- Owner: BrunoJurkovic
- License: bsd-3-clause
- Created: 2018-09-21T01:31:14.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-17T19:06:14.000Z (7 months ago)
- Last Synced: 2024-12-11T06:05:24.404Z (11 days ago)
- Topics: card, dart, flutter, flutter-package
- Language: Dart
- Homepage:
- Size: 1.39 MB
- Stars: 345
- Watchers: 10
- Forks: 103
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# flip_card [](https://github.com/fedeoo/flip_card/pulls) [](https://pub.dartlang.org/packages/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 the package
```dart
import 'package:flip_card/flip_card.dart';
```
### Default
Create a flip card as shown below. By default the card is touch controlled.
You can turn off touch control by setting `flipOnTouch` to `false`.
```dart
FlipCard(
fill: Fill.fillBack, // Fill the back side of the card to make in the same size as the front.
direction: Axis.horizontal, // default
initialSide: CardSide.front, // The side to initially display.
front: Container(
child: Text('Front'),
),
back: Container(
child: Text('Back'),
),
)
```
### Programmatically
#### Controller (Recommended)
To control the card programmatically, you can pass a controller
when creating the card.
```dart
late FlipCardController _controller = FlipCardController();
@override
Widget build(BuildContext context) {
return FlipCard(
controller: _controller,
front: ...,
back: ...,
);
}
void doStuff() {
// Flip the card a bit and back to indicate that it can be flipped (for example on page load)
_controller.hint(
duration: const Duration(milliseconds: 400),
);
// Tilt the card a bit (for example when hovering)
_controller.skew(0.2);
// Flip the card programmatically
_controller.flip();
// Flip the card to front specifically
_controller.flip(CardSide.front);
// Flip the card without animation
_controller.flipWithoutAnimation();
}
```
#### Global Key
You can also control the card via a global key as shown below.
This is not the recommended way.
```dart
final cardKey = GlobalKey();
@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'),
),
);
}
```
### Timed
You can auto-flip the widget after a certain delay without any external triggering.
```dart
FlipCard(
fill: Fill.back, // Fill the back side of the card to make in the same size as the front.
direction: Axis.horizontal, // default
initialSide: 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
)
```