Hi guys, today, I’ll show you how to create a simple puzzle card game. With Flutter, we can easily got it.

1. Define model class:

The first, we need prepare image source and define a model class, saving data of a card:

Image source: You can collect any images, if you like. In my case, I loved it and chose 20 trading cards at https://www.db.yugioh-card.com and one card backing. And they are named according to the image below.

Define a model class: We need build a class with attributes: id, image, status, a variable detect card is need close effect and key of card item.

2. Create card item:

The next, we will create a basic stateful-widget, CardItem, which contain model of card, function control flip animations. In the state class, we define and initState:

We need build layout of card by image and animation defined above:

3. Create card board:

In step 3, we will create a CardBoard, which contain all data of card and decide on winning, during the time we play. we create random cards:

At this class, we should define an array save id of opened-cards, handle when card flipped. It will help us close cards not match and scoring if we win.

Finally, we can build a card board with flutter gridview:

And my repository, you can read and share, if you love it:

Thanks for reading !