In this tutorial, we will learn to create Flip Card animation in Flutter. We will be using a package called flip_card for this tutorial.

Contents:

• Create a project

• Logic code

• Design of app

• Result

Create a project

Open Android Studio or Visual Studio Code whichever is preferred and create a project and name simply flip_list_card or something else.
You can use the command prompt/terminal to create the project.

flutter create flip_list_card
cd flip_list_card

You can also use your existing project.

Import dependencies
The only dependency required is flip_card dependency from the pub.dev.
You can search for it on pub.dev or click here.

Open your pubspec.yaml file and in the dependencies section add

flip_card: ^0.5.0

After that click on Get Dependencies or in terminal write

flutter pub get

and press Enter key.

Logic code

Open your lib folder and create a new file and call it card_screen.dart

Make a stateful class in the current file and name it CardScreen so you can follow along easily.

We will make two dummy lists with some string values and make a list of them accordingly using ListView.builder.

Let us make two lists and name them country and capital respectively. Write them as shown below.

List<String> country = ["India", "USA", "Canada", "United Kingdom"]; List<String> capital = ["New Delhi", "Washington DC", "Ottawa", "London"];

Now let us come to the build method.

So the main thing that we are going to use in our app is the FlipCard widget.

FlipCard()

In the FlipCard we have two required arguments and that is front and back.

FlipCard(
  front: front,
  back: back,
)

In the front, we are going to use the front view of our card that is the country name and on the backside capital name. So to do this we are going to use the Text widget.

FlipCard(
  front:Text(country[index]),
  back: Text(capital[index]),
)

We are using a ListView.builder so in the itemBuilder field we are going to place our FlipCard widget.

ListView.builder(
  itemCount: country.length,
  itemBuilder: (BuildContext context, int index) {
    return FlipCard(
      front: Text(country[index]),
      back: Text(capital[index]),
    );
  },
)

Inside the main method in the MaterialApp home-field call the CardScreen class.

home: CardScreen(),

For now, build and run the app in your IDE or enter

flutter run

If followed your app should look like

Design of app

Now our app does not look good so we are going to edit our code.

First, let's set the alignment of our ListView contents to the centre. To do that we are going to wrap our Text widget in the Container widget both for the front and back of the FlipCard widget.

Container(
  child: Text(country[index]),
)

We will add some decoration and some styles to our Text widget. But it will be simple. We are going to align our Text widget to the centre.

Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height / 4,
  margin: EdgeInsets.all(24),
  decoration: BoxDecoration(
    color: Colors.purple,
    borderRadius: BorderRadius.circular(25.0),
  ),
  child: Align(
    alignment: Alignment.center,
    child: Text(
      text,
      textAlign: TextAlign.center,
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.w800,
        fontSize: 48,
      ),
    ),
  ),
)

To make the code simple we are going to separate the above widget and what the whole CardScreen code should look like.

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

class CardScreen extends StatefulWidget {
  @override
  _CardScreenState createState() => _CardScreenState();
}

class _CardScreenState extends State<CardScreen> {
  List<String> country = ["India", "USA", "Canada", "United Kingdom"];
  List<String> capital = ["New Delhi", "Washington DC", "Ottawa", "London"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FLip Card"),
      ),
      body: ListView.builder(
        itemCount: country.length,
        itemBuilder: (BuildContext context, int index) {
          return FlipCard(
            front: card(country[index], context),
            back: card(capital[index], context),
          );
        },
      ),
    );
  }
}

Widget card(String text, BuildContext context) {
  return Container(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height / 4,
    margin: EdgeInsets.all(24),
    decoration: BoxDecoration(
      color: Colors.purple,
      borderRadius: BorderRadius.circular(25.0),
    ),
    child: Align(
      alignment: Alignment.center,
      child: Text(
        text,
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w800,
          fontSize: 48,
        ),
      ),
    ),
  );
}

Result

The final view of our app should be like this.