export const metadata = { title: "Creating a Poker Card Flip Animation in Flutter", description: "Learn how to create an interactive poker card flip animation in Flutter, featuring random cards with a consistent back design and dynamic sizing.", alternates: { canonical: "/p/create-flutter-card-flip", }, }; import { CustomImage as Image } from "@/app/components/Posts/CustomComponents/Image"; import { P, H2 } from "@/components/ui/typography"; import { GithubLink } from "@/app/components/Posts/CustomComponents/GithubLink";

Interactive animations are essential for creating engaging applications. In this tutorial, you'll learn how to create a dynamic poker card flip animation in Flutter. We'll display 5 cards in a row, dynamically resize them to fit any screen size, and allow users to flip each card by tapping.

Setting Up the Project

First, let’s set up the project and include the necessary dependencies and assets.

Adding Dependencies

Include the following dependencies in your `pubspec.yaml` file: ```yaml dependencies: flutter: sdk: flutter flutter_svg: ^1.0.3 ``` ```bash flutter pub get ```

Downloading Card Assets

To enhance your blog post on creating a poker card flip animation in Flutter, you can include a detailed and ornate card back design. A suitable option is available on Vecteezy: Game Card Background Vector Art

This vector art provides an intricate and decorative design ideal for the back of your cards. You can download it directly from Vecteezy. Ensure you adhere to Vecteezy’s licensing requirements, which may include providing proper attribution. By incorporating this design, your card flip animation will feature a visually appealing and detailed card back, enhancing the overall aesthetic of your Flutter application. [Back Card Design](https://www.vecteezy.com/vector-art/7072382-game-card-background)

We'll use a set of pre-designed SVG card assets from [Matt Cain's SVG Playing Cards repository](https://github.com/MattCain/svg-playing-cards). Follow these steps to download and organize the assets:

You can click this link to download the playing cards assets [Playing Cards Assets](https://github.com/MattCain/svg-playing-cards/archive/refs/heads/master.zip)

``` assets/ ace_of_clubs.svg ace_of_diamonds.svg ... back.svg ``` ```yaml flutter: assets: - assets/ ``` ```bash flutter pub get ```

Creating the Flipping Card Animation

We’ll create a reusable FlippingCard widget to handle the flip animation between the front and back of a card.

I like to organize my files this way, create it in `lib/widgets/flipping_card.dart`

```dart import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; class FlippingCard extends StatefulWidget { final String frontAsset; final String backAsset; const FlippingCard({ Key? key, required this.frontAsset, required this.backAsset, }) : super(key: key); @override _FlippingCardState createState() => _FlippingCardState(); } class _FlippingCardState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _animation; bool _isFront = true; @override void initState() { super.initState(); _controller = AnimationController( vsync: this, duration: const Duration(milliseconds: 600), ); _animation = Tween(begin: 0, end: 1).animate(_controller); } void _flipCard() { if (_isFront) { _controller.forward(); } else { _controller.reverse(); } setState(() { _isFront = !_isFront; }); } @override Widget build(BuildContext context) { return GestureDetector( onTap: _flipCard, child: AnimatedBuilder( animation: _animation, builder: (context, child) { final angle = _animation.value * 3.14; final isFrontVisible = angle < 3.14 / 2; return Transform( alignment: Alignment.center, transform: Matrix4.identity() ..setEntry(3, 2, 0.001) ..rotateY(angle), child: isFrontVisible ? SvgPicture.asset(widget.frontAsset) : Transform( alignment: Alignment.center, transform: Matrix4.identity()..rotateY(3.14), child: SvgPicture.asset(widget.backAsset), ), ); }, ), ); } @override void dispose() { _controller.dispose(); super.dispose(); } } ```

Displaying the Cards

Now let’s create a screen that displays five randomly selected cards, ensuring they are dynamically resized to fit in a single row with consistent gaps. This should go in `lib/widgets/card_flip_game.dart`

```dart import 'package:flutter/material.dart'; import 'flipping_card.dart'; final List cardAssets = [ 'assets/ace_of_clubs.svg', 'assets/ace_of_diamonds.svg', // Add all your card assets here ]; List getRandomCards(int count) { cardAssets.shuffle(); return cardAssets.take(count).toList(); } class CardFlipGame extends StatelessWidget { final List cards = getRandomCards(5); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Poker Card Flip Animation')), body: LayoutBuilder( builder: (context, constraints) { final totalGap = 16 * 4; // Gap between cards final cardWidth = (constraints.maxWidth - totalGap - 32) / 5; // Dynamic width final cardHeight = cardWidth * 1.5; // Maintain aspect ratio return Padding( padding: const EdgeInsets.all(16), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: cards.map((card) { return SizedBox( width: cardWidth, height: cardHeight, child: FlippingCard( frontAsset: card, backAsset: 'assets/back.svg', ), ); }).toList(), ), ); }, ), ); } } ```

Attribution

The back design of the cards was sourced from **Vecteezy.com**. To give proper credit:

- Video: Add “Vecteezy.com” in the final credits. - Print: Add “Vecteezy.com” in the final copy. - Merch: Include “Vecteezy.com” in the final design. - Web: Include this attribution link in your project: ```html Playing Card Back Vectors by Vecteezy ```

Wrap Up

{" "}

You’ve successfully created a Flutter app with a poker card flip animation! This interactive and dynamic feature can be used in card games or other creative applications.

Source Code

The full source code for this project is available on GitHub: