Scratch Card In Flutter
Consistently we get our cell phones and send money to our friends to acquire some cash back. Cashback is a keen move to keep the user occupied with the application and keep up user maintenance.
For a typical user, it’s simply a lottery. In any case, would you say you are an application developer who is stunned by the UI and needs to implement the equivalent in your application? At that point, you are in the perfect spot.
In this blog, we will explore the Scratch Card In Flutter. We are going to see how to implement Scratch Card using the scratcher package in your flutter applications.
scratcher | Flutter Package
Scratch card widget, which temporarily hides content from the user. Android and iOS support Cover content with full color or…pub.dev
Table Of Contents::
Scratch Card :
Scratch Card is one of the famous things you can see on different shopping applications and payment applications. These Scratch Cards are utilized to offer prizes and cashback to users. It can have a wide scope of utilization cases; however, it is basically used to create random prizes for the application users.
Demo Module :
This demo video shows how to create a scratch card in a flutter. It shows how the scratch card will work using the scratcher package in your flutter applications. It shows a dialog open and then a scratch card, and you will earn money. It will be shown on your device.
Properties:
There are some properties of scratcher are:
- > child: This property is used to declare the container and different Widgets.
- > brushSize: This property is used to give the different sizes of the brush during the scratch.
- > threshold: This property is used to give the percentage level of the scratch area.
- > onChange: This property is used to call back is called when a new part of the area is revealed.
- > color: This property is used to set the color of the scratcher card.
- > Image: This property is used to declare an image on the scratch card.
- > onThreshold: This property is used to evoke the callback.
- > accuracy: This property is used to determines how accurate the report should progress. Lower accuracy means higher performance.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
scratcher:
Step 2: Add the assets
Add assets to pubspec — yaml file.
assets:
assets:
- assets/
Step 3: Import
import 'package:scratcher/scratcher.dart';
Step 4: Run flutter packages get in the root directory of your app.
Step 5: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called scratch_card.dart inside the lib folder.
In this screen, we will make a Container and set alignment to the center. Inside child property adds a FlatButton. In FlatButton, we will add text, color, shape, padding, and onPressed() method. We will add a scratchDialog(context) function.
Container(
alignment: Alignment.center,
child: FlatButton(
onPressed: (){
scratchDialog(context);
},
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide.none,
),
color: Colors.cyan[300],
child: Text("Scratch Card",
style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),),
),
),
Now, we will deeply define scratchDialog() function:
We will create a dialog with a rectangle shape. In the title, we will add a column widget and alignment in the center. Inside the column, we will add text and a divider.
Future<void> scratchDialog(BuildContext context) {
return showDialog(context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
title: Column(
children: [
Align(
alignment: Alignment.center,
child: Text("You Earned Gift",
style: TextStyle(
color: Colors.red,
fontSize: 25,
fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(left: 25,right: 25),
child: Divider(
color: Colors.black,
),
),
],In
),
content: StatefulBuilder(builder: (context, StateSetter setState) {
return Scratcher(
color: Colors.cyan,
accuracy: ScratchAccuracy.low,
threshold: 30,
brushSize: 40,
onThreshold: () {
setState(() {
_opacity = 1;
});
},
child: AnimatedOpacity(
duration: Duration(milliseconds: 100),
opacity: _opacity,
child: Container(
height: MediaQuery.of(context).size.height*0.2,
width: MediaQuery.of(context).size.width*0.6,
child: Column(
children: [
Text("Hurray! you won",
style:TextStyle(fontSize: 20),),
Expanded(child: Image.asset("assets/gift.png",))
],
),
),
),
);
}),
);
}
);
}
In the content method, we will return Scratcher(). Inside scratcher, we will add a color of scratcher card, add an accuracy of scratch for better performance, add a threshold for the scratch area’s percentage level, and add a brushSize for the brush’s different sizes during the scratch. Inside child property, add an AnimatedOpacity(), we will add a duration, opacity, and child property to add conatiner with height and width. Inside the container, we will add text, image, and wrap to the column widget. When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:scratcher/scratcher.dart';
class ScratchCard extends StatefulWidget {
@override
_ScratchCardState createState() => _ScratchCardState();
}
class _ScratchCardState extends State<ScratchCard> {
double _opacity = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Scratch Card In Flutter",
style: TextStyle(color: Colors.white),),
automaticallyImplyLeading: false,
),
body: Container(
alignment: Alignment.center,
child: FlatButton(
onPressed: (){
scratchDialog(context);
},
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
borderSide: BorderSide.none,
),
color: Colors.cyan[300],
child: Text("Scratch Card",
style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20),),
),
),
);
}
Future<void> scratchDialog(BuildContext context) {
return showDialog(context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
title: Column(
children: [
Align(
alignment: Alignment.center,
child: Text("You Earned Gift",
style: TextStyle(
color: Colors.red,
fontSize: 25,
fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(left: 25,right: 25),
child: Divider(
color: Colors.black,
),
),
],
),
content: StatefulBuilder(builder: (context, StateSetter setState) {
return Scratcher(
color: Colors.cyan,
accuracy: ScratchAccuracy.low,
threshold: 30,
brushSize: 40,
onThreshold: () {
setState(() {
_opacity = 1;
});
},
child: AnimatedOpacity(
duration: Duration(milliseconds: 100),
opacity: _opacity,
child: Container(
height: MediaQuery.of(context).size.height*0.2,
width: MediaQuery.of(context).size.width*0.6,
child: Column(
children: [
Text("Hurray! you won",style: TextStyle(fontSize: 20),),
Expanded(child: Image.asset("assets/gift.png",))
],
),
),
),
);
}),
);
}
);
}
}
Conclusion:
In the article, I have explained the Scratch Card of basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Scratch Card On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the Scratch Card in your flutter projects. We will show you what the Scratch Card is?. Some scratcher properties, make a demo program for working Scratch Card and show a beautiful dialog open and scratch your card, and you will earn money/price using the scratcher package in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Scratch Card Demo:
flutter-devs/flutter_scratch_card_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
