Flutter – Scratch Card View App

Scratch Card is one of the popular things that you can get to see on various shopping apps and payment apps. These Scratch Cards are used to offer rewards and cashback to users. It can have a wide range of use cases but it is primarily used to generate random rewards for the users of the application. In this article we are going to see how to implement Scratch Card in Flutter.

Constructor of Scratcher Card Widget:

Scratcher(
  brushSize: 30,
  threshold: 50,
  color: Colors.red,
  onChange: (value) => print("Generating Value: $value%"),
  onThreshold: () => print("Threshold reached"),
  child: Container(
    height: 300,
    width: 300,
    color: Colors.green,
  ),
)

The Scratcher library is used for developing pre-designed scratcher widgets. The Scratcher Class has the following properties:

Properties of Scratcher

• child: This is used to declare Container and different Widgets.
• brushSize: Used to give the different sizes of the brush during the scratch.
• threshold: Used to give percentage level of the scratch area.
• onChange: Call back is called when a new part of the area is revealed.
• color: To set the color of the scratcher.
• Image:  To declare image on the scratch card.
• onThreshold: It is used to evoke the callback.
• onChange: It is used to call the Callback when a new part of the area is revealed (0.1% or higher).

Now, follow the steps to implement Scratch Card View in our Flutter App

Step 1: Add the dependency to pubspec.yaml file as shown below:

dependencies:
 scratcher: "^1.4.0"

Now click on pub.get to configure.

Step 2: Import the dependency to the main.dart file using the below code:

import 'package:scratcher/scratcher.dart';

Step 3: Now navigate to main.dart() file and return Material App()

First, we have declared MyApp() in running App in the main function. Then we have created StatelessWidget for MyApp in which we have returned MaterialApp(). In this MaterialApp() we have given the title of our App then declared the theme of our App as primarySwatch as green. Then we have given our first screen of or slider app in the home: Scratch_Card()

Dart

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      // Title of our App
      title: 'Scratch Card',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
       primarySwatch: Colors.green,
      ),

      // First page of our App
      home: Scratch_Card(),
    );
  }
}

Step 4: Now declare StatelessWidget() for HomePage

In StatelessWidget() return Container() widget. In this StatelessWidget() we have given opacity to 0. In that Container() we have given FlatButton() and align in the center now we have given border-radius to this button and given name to this button. We have given onPressed() method to this button. In this method, we have declared scratchDialoge() method.

Dart

// We have declared Container
Container(
      alignment: Alignment.center,

      // Created Button
      child: FlatButton(

        // On Press method
        onPressed: (){
          scratchDialog(context);
        },
        padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),

        // Circular border to the button
        shape: OutlineInputBorder(
          borderRadius: BorderRadius.circular(20),
          borderSide: BorderSide.none,
        ),
        color: Colors.green,

        // Text on Button
        child: Text("Get a Scratch Card",
                    style: TextStyle(color: Colors.white,
                                     fontWeight: FontWeight.bold,
                                     fontSize: 20),),

      ),
    );
  }

Step 5: On clicking Button, generate the Scratch Card

For Creating Scratch Card we have declared scratchDialoge in Future method in StatelessWidget(). In this scratchDialoge we have return Alert Dialog that has a circular border. In that Alert Dialog, we have given the title and Align it in Center. Then we have given StatefulBuilder in content and returned Scratcher. This Scratcher is imported from Scratcher library. It helps to scratch the card. In this Scratcher we have given its properties such as accuracy which we have set low. We have also given a threshold in which we have set an opacity. We have given brush size which helps to scratch cards easily. After that, we have given AnimatedOpacity() as a child in Scratcher. In which we have given the duration of scratch in milliseconds.

Now, we have declared opacity which we have given in StatelessWidget(). After that, we have given a Container() of specific height and width. We have aligned this Container() in the center and given text in it. And give color to the text.

Dart

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

class Scratch_Card extends StatelessWidget {
  double _opacity = 0.0;

// scratchDialog method created
  Future<void>scratchDialog(BuildContext context){
    return showDialog(context: context,
    builder: (BuildContext context){

      // Alert Dialog given
      return AlertDialog(

        //Having Border
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30),
        ),

        // Align in center
        title: Align(
          alignment: Alignment.center,
          child: Text("You Earned Gift Card",
            style: TextStyle(
                color: Colors.green,
                fontSize: 20,
                fontWeight: FontWeight.bold),
          ),
        ),
        content: StatefulBuilder(builder: (context, StateSetter setState){

          // Scratch card created
          return Scratcher(
            accuracy: ScratchAccuracy.low,
              threshold: 25,
              brushSize: 40,
              onThreshold: (){
              setState((){
                _opacity = 1;
              });
              },

            // Given Animated Opacity
              child: AnimatedOpacity(
                duration: Duration(milliseconds: 250),
                opacity: _opacity,

                // Having Container
                child: Container(
                  height: 300,
                  width: 300,
                  alignment: Alignment.center,
                  child: Text("You earned 100\$",
                  style: TextStyle(fontWeight: FontWeight.bold,fontSize: 40, color: Colors.green),
                  ),


                ),
              ),

          );
        }),
      );
    }
    );

  }

Step 6: Import the Scratch card dart file to main.dart file as shown below:

Dart

import 'package:flutter/material.dart';
import 'package:pdfviewerapp/scratch_card.dart';


void main() {
  runApp(MyApp());
}

// stateless widget
class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
       primarySwatch: Colors.green,
      ),

      // first screen of app
      home: Scratch_Card(),
    );
  }
}

Output: