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:
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()
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.
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.
Step 6: Import the Scratch card dart file to main.dart file as shown below: