Overview:

Create a Card Scratch in Flutter Application. In this tutorial i'll share how to create a Scratch card in your Flutter Applications. Mostly peoples use this Scratch card in Application to give some giveaways to peoples to give some gift in Application sharing some promo codes in ecommerce apps. So Scratch card has multiple uses in App development. 


Setup some Important things for Scratch Card:

Creat a Project or Open your old project than go to Pub.dev official site and get this package. I am sharing the current version of this package. But go to official site and use the latest version of this Package. Official Developer of this Package is rykowski

  scratcher: ^2.3.0

Add this package in Pub Spec file. Than save the Pubspec file. When this package is successfully installed in your Project than follow next steps.

Writing Code for Scratch Card in Flutter:

Open the dart file where you want to create Scratch Card. First of all import the Scratcher Package by using this line of code.

import 'package:scratcher/scratcher.dart';


After importing this package write this code for scratch card. First write this code than i will explain how this code is actually working and what is the logic behind this code. This code is from Pub.dev official site (dev name)

Scratcher(
  brushSize: 30,
  threshold: 50,
  color: Colors.red,
  onChange: (value) => print("Scratch progress: $value%"),
  onThreshold: () => print("Threshold reached, you won!"),
  child: Container(
    height: 300,
    width: 300,
    color: Colors.blue,
  ),
)

Explanation of Flutter Scratch Card Code:

In this code we are using the Scratch package and than we are using some required properties of this package. First of we call the package using Scratch. 
I will explain the usage of this package properties in steps so it's easy for you to understand this logic. One by One All used properties are explained below.



Brush Size:

When user will scratch the card then while scratching how much scratch done on one rub. Try to understand this in real life. We use small and large brushes for painting so same situation is here we are providing the brush size to user for scratching.


Threshold:

We are using this Scratch box to reveal something like when user completely scratch the card then we show some redeem codes, Show some gifts or whatever thing you want to show when scratch is finish. In this code 50% Threshold is set by developer so it mean when scratch card is 50% scratched by the users than he will reveal the Prize.

Color:

This is a color that we can used to hide the prize. And user will scratch this red color to get prize.


On Change:

This method will called multiple times when user is scratching in this above example developer is showing the Scratch percentage mean if 10% card is scratch by users than he will show in console 10% card is scratch after every scratch this method will be called.

On Threshold:

On Threshold method in Flutter scratch card is very important method the reason is inside this method you will show your price when threshold is completed (When user completely scratch the card or reached the threshold that you set). In this method show some prize , Coupon codes, or perform any other action that you want to do. But this method is very important you can't skip this.


Child:

Every widget in Flutter require one child widget so same situation is here you have to add one child in this case developer add the blue colors container. So it totally depends on you how you can use this. This code is just a Example so change this code according to your need.

Ideas to Use Flutter Scratch Card:


Different developers use this Flutter Scratch card for prize revealing but i'll share some best unique ideas with you to use Flutter Scratch card. Some uses of Flutter Scratch card are given below:

Scratch Card Game:

Create a simple game in Flutter and generate one Random number named A. In Scratch card threshold also generate one another Random number named B when user reveal the flutter scratch card than show if Random numbers A and B than give some prize to user like some virtual gifts if A and B does not match than show the Try Again or better luck next time Alert Dialog.

Match Similar Things:

Create 5 or 10 different scratch cards and than set the logic when two reveal scratch card match with each other than give some points to user or anything that you want to do. This is like a Image Matching Game.

Find the Image:

In this app first of all show one random image to the user and after some time hide the image and allow user to scratch the card and find the exact image. In flutter scratch card reveal time show similar images with very little difference if user find the actual image than he is the winner.