Skip to main content

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
Live, try it

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

InputTypeDefaultRange
flippedBooleanfalse—
numberText4242 4242 4242 4242—
holderTextADA LOVELACE—
cvvText123—
accentText#0f766ehex colour
accent2Text#1d4ed8hex colour
bgText#0b1220hex colour

Events: flip

More Flutter animations

The same idea in other frameworks: React 3d flip card · SwiftUI flashcard deck