FlipCard in Flutter

Last Updated : 25 Oct, 2022

flip_card is a component that provides a flip card animation. It could be used for hiding and showing details of a product. A sample video is given below to get an idea about what we are going to do in this article.

Installing

Add the dependency into pubspec.yaml file.

dependencies:
 flip_card: ^0.6.0

Syntax of usage

Create a FlipCard. The card will flip when touched. Touch property is true by default.

Dart

FlipCard(
  fill: Fill.fillBack, 
  direction: FlipDirection.HORIZONTAL, // default
  front: Container(   // required
        child: Text('Front'),
    ),
    back: Container(   // required 
        child: Text('Back'),
    ),
);

Properties

Property	Description
front	This is required property that show the front content.
back	This is required property that show the back content.
speed	Speed of flip of card.
flipOnTouch	Enable the card to flip when touched.
direction	Enable the direction in which card can flip, Horizontal or vertical.
alignment	Set the alignment of the content.
fill	Fill the back side of the card to make in the same size as the front.
void Function()? onFlip,	Function to implement task during flipping.
void Function(bool)? onFlipDone,	Function to implement task after the flip done.

To use it import the package.

import 'package:flip_card/flip_card.dart';

Code Example

Dart

import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';

// main function calling
// to the MyFlipCard class.
void main() {
  runApp(MyFlipCard());
}

// Class MyFlipCard is stateful class.
class MyFlipCard extends StatefulWidget {
  const MyFlipCard({Key? key}) : super(key: key);

  @override
  State<MyFlipCard> createState() => _MyFlipCardState();
}

class _MyFlipCardState extends State<MyFlipCard> {
  @override
  Widget build(BuildContext context) {
    // returning MaterialApp 
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flip Card"),
        ),
        // body has a center with row child.
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Flipcard with vertical
              // direction when flip
              FlipCard( 
                direction: FlipDirection.VERTICAL,
                // front of the card
                front: Container( 
                  alignment: Alignment.center,
                  width: 200,
                  height: 200,
                  color: Colors.red,
                  child: Text("Front"),
                ),
                // back of the card
                back: Container(  
                  alignment: Alignment.center,
                  width: 200,
                  height: 200,
                  color: Colors.teal,
                  child: Text("Back"),
                ),
              ),
              SizedBox(width: 30,),
              // 2nd card showing Horizontal FlipDirection
              FlipCard(  
                direction: FlipDirection.HORIZONTAL,
                // front of the card
                front: Container( 
                  alignment: Alignment.center,
                  width: 200,
                  height: 200,
                  color: Colors.red,
                  child: Text("Front"),
                ),
                // back of the card
                back: Container( 
                  alignment: Alignment.center,
                  width: 200,
                  height: 200,
                  color: Colors.teal,
                  child: Text("Back"),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Explanation

main method is the principal method called once the program is loaded.
Once program is loaded runApp will run and call our class that we created MyFlipCard to be runned.
This class is stateful widget to detect FlipCard state.
Creating a MaterialApp that allow us to use Scaffold.
Scaffold allow us to use the appbar and body.
The appbar have simple title.
Body contains centered row.
A row allows us to have multiple child that is children with mainAxisAlignment to center.
Row have three children, Two FlipCard and sizedbox.
FlipCard Direction set Vertically and Horizontally respectively.
Front show a container 200x200 red having text front.
Back show a container 200x200 teal having text back.