Flutter animation example
Flutter Flip Card: Credit Card Flip Animation
Payment forms often flip the card preview when the user reaches the CVV field. This card does that flip with real perspective: the near edge grows while the far edge shrinks, a sheen sweeps across the foil, and the back shows a magnetic stripe and signature panel with the CVV. Tap it or set the flipped input from your form.
- 4.5 KB file
- 7 live inputs
- Flutter runtime
How this credit card flip works
- The card is drawn as a trapezoid whose edge heights depend on the rotation angle, which gives true perspective.
- At 90 degrees the drawing switches to the back face so text is never mirrored.
- The flipped input lets your CVV field's focus drive the flip directly.
Add it to your Flutter app
Install exodeui_flutter, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:exodeui_flutter/exodeui_flutter.dart';
// Add assets/flutter-flip-card.exode to pubspec.yaml (download it below).
class FlutterFlipCard extends StatefulWidget {
const FlutterFlipCard({super.key});
@override
State<FlutterFlipCard> createState() => _FlutterFlipCardState();
}
class _FlutterFlipCardState extends State<FlutterFlipCard> {
final _canvas = GlobalKey<ExodeUICanvasState>();
late final Future<String> _json = rootBundle.loadString('assets/flutter-flip-card.exode');
@override
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: _json,
builder: (context, snap) => snap.hasData
? ExodeUICanvas(
key: _canvas,
artboardJson: snap.data!,
fit: 'Layout',
onReady: () { },
onTrigger: (name, _) {
// fires: 'flip'
},
)
: const SizedBox.shrink(),
);
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
flipped | Boolean | false | — |
number | Text | 4242 4242 4242 4242 | — |
holder | Text | ADA LOVELACE | — |
cvv | Text | 123 | — |
accent | Text | #0f766e | hex colour |
accent2 | Text | #1d4ed8 | hex colour |
bg | Text | #0b1220 | hex colour |
Events: flip
More Flutter animations
Bouncing Bars LoaderFive bars bouncing in a travelling wave with squash and stretch, plus rotating status messages.Speed Dial FABA floating action button that rotates to close while three labelled actions spring out in sequence.Hero Product TransitionA list item whose image arcs into the detail header while a circular reveal uncovers the page.3D Drawer MenuA side menu revealed by the page swinging back in 3D; open by tapping or dragging from the edge.Wavy TypewriterA typewriter whose letters drop in with a bounce; words type, hold, delete and cycle.Parallax Scroll ListA scrolling list of cards whose images shift at a slower rate, with momentum and edge bounce.
The same idea in other frameworks: React 3d flip card · SwiftUI flashcard deck