Flutter: How to make Flip-Card animation in flutter. Flip card animation tutorial.

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
• Import dependencies
• 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 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 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 value and make list of it 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 build method.

So the main thing that we are going to use in our app is 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 in back side capital name. So to do this we are going to use 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]),
    );
  },
)

In the main method in MaterialApp home field call the CardScreen class.

home: CardScreen(),

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

flutter run

in the Terminal/Command Prompt.

If followed your app should look like

Design of app

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

First lets set alignment of our ListView contents to center. On order to do that we are going to wrap our Text widget in Container widget both for front and back of 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 center.

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 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.

So we have completed our small tutorial but some topics are not yet discussed.

There are some fields that are alignment, direction, speed, onFlip, onFlipDone and flipOnTouch.

Let's discuss one by one:-

1. alignment: This field sets the alignment of the card. By default the alignment is to center.
2. direction: This field sets the flip direction of  card. By default the flip direction FlipDirection.HORIZONTAL.
3. speed: This field sets the speed with which the card turns. The speed is in integer and by default 500 milliseconds.
4. onFlip: This function is called when you touch on card.
5. onFlipDone: This function is called when the flipping of card ends.
6. flipOnTouch: This field sets whether you want to flip your card or not. This field takes a boolean field.

Thank you for viewing my blog.