Scratch Card View in Flutter App

This article explains you how to create scratch card view in flutter applications using scratcher flutter package. You can also check out flutter card view related articles.

Scratch Card is most popular in shopping mobile applications to give some rewards or cashback to users on purchase something. We will display dialog to scratch the area on click of button in this flutter example. Scratcher widget has many different properties.

color property is used to change color of scratcher widget. We can also display image on scratch card UI using image property. accuracy attribute is used to detect progress. Lower accuracy indicates higher performance. child property is used to use other widgets as child of scratcher widget.

We can also set size of brush to scratch the card using brushSize property. threshold attribute is used to set percentage level of scratch area. onChange callback is used to detect new area. onThreshold attribute is used to evoke callback.

To display scratch view in dialog, we will use AnimatedOpacity widget. We will also use duration, opacity parameters of AnimatedOpacity widget to scratch area. We will set width and height of scratch dialog dynamic.

 

Add required package in your pubspec.yaml file

scratcher: ^2.1.0
 
 

Scratch Card Button UI

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Scratch Card View Sample’)),
body: Container(
alignment: Alignment.center,
child: FlatButton(
onPressed: (){
scratchCardDialogWidget(context);
},
padding: EdgeInsets.symmetric(horizontal: 25, vertical: 15),
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
borderSide: BorderSide.none,
),
color: Colors.orangeAccent,
child: Text(“Scratch Card”,
style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 22),),
),
));
}
 
 

Flutter Scratch Card View

double opacity = 0.0;

Future<void> scratchCardDialogWidget(BuildContext context) {
return showDialog(context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
title: Column(
children: [
SizedBox(height: 15),
Align(
alignment: Alignment.center,
child: Text(“Congratulations!”,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold),
),
),
],
),

content: StatefulBuilder(builder: (context, StateSetter setState) {
return Scratcher(
color: Colors.orangeAccent,
accuracy: ScratchAccuracy.low,
threshold: 25,
brushSize: 50,
onThreshold: () {
setState(() {
opacity = 1;
});
},
child: AnimatedOpacity(
duration: Duration(milliseconds: 100),
opacity: opacity,
child: Container(
height: MediaQuery.of(context).size.height*0.4,
width: MediaQuery.of(context).size.width*0.6,
child: Column(
children: [
SizedBox(height: 50),
Text(“You Have Earned”,style: TextStyle(fontSize: 20),),
SizedBox(height: 50),
Text(“143”,style: TextStyle(fontSize: 50, fontWeight: FontWeight.bold),),
],
),
),
),
);
}),
);
}
);
}

 
 
 
scratch card
 

2 thoughts on “Scratch Card View in Flutter App

Leave a Reply