Scratch Card In Flutter | How To Make Scratch Card In Flutter

Scratch Card In Flutter

• Google Pay has been giving similar rewards to customers from time to time. 
• On the occasion of Diwali also, the company had introduced fun reward features. 
• Read Utility News. Download Hindi News App for Hindi News.

• Scratch card is the famous things that you can see on various shopping applications and payment applications. 
• These scratch cards are used to give rewards and cashback to the users. 
• It can have a wide scope of use cases; However, it is basically used to create random rewards for the application users.

• A Scratch Card is mostly used to excite or make user feel enthusiastic to know the offer prizes or cashback reward given to the user.

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

         dependencies:
             scratcher: 2.1.0

Step 2: Import the library

import 'package:scratcher/scratcher.dart';

Scratcher Snippet Code

 

 Scratcher(
  color: Colors.orangeAccent,
  brushSize: 35,
  threshold: 40,
  onChange: (value) => print(" Progresing $value% "),
  child: Container(
    height: 300,
    width: 300,
    child: const Image(
           image: AssetImage('assets/images/rw.png'))),
   ),
  ),
)

Complete Source Code

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Scratcher Demo',
      theme: ThemeData(
        brightness: Brightness.dark
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  final scratchKey = GlobalKey();

  double _opacity = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Scratcher"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: 200,
              height: 150,
              child: ElevatedButton(
                  onPressed: () {
                    scratchDialog(context);
                  },
                  style:ElevatedButton.styleFrom(
                primary: Colors.orangeAccent,
                  ),
                  child: Text('Tap to scratch',style: TextStyle(
                    fontSize: 20,fontWeight: FontWeight.bold,color: Colors.black
                  ),)),
            ),

          ],
        ),
      ),
    );
  }

  Future scratchDialog(BuildContext context) async {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30)),
              title: const Align(
                alignment: Alignment.center,
                child: Text('Swipe Back & Fort'),
              ),
              content: StatefulBuilder(
                builder: (context, StateSetter setState) {
                  return Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20)
                    ),
                    child: Scratcher(
                      accuracy: ScratchAccuracy.medium,
                      threshold: 50,
                      onThreshold: () {
                        setState(() {
                          _opacity = 1;
                        });
                      },
                      color: Colors.orangeAccent,
                      onChange: (value) => print('Progresing $value%'),
                      brushSize: 30,
                      child: AnimatedOpacity(
                        duration: Duration(milliseconds: 1000),
                        opacity: _opacity,
                        child: Container(

                            width: 150,
                            height: 150,
                            child: const Image(
                                image: AssetImage('assets/images/rw.png'))),
                      ),
                    ),
                  );
                },
              ));
        });
  }
}

OUTPUT