Scratch card animation in flutter

Afzal Mehndi

10 May 2024

Introducing scratch card animations to your Flutter app can be just the unique touch you need to captivate users and enhance engagement. Imagine the anticipation as users swipe away to reveal hidden content, reminiscent of lottery scratch cards. In this blog, we’ll explore how you can effortlessly integrate Scratch card animation into your Flutter app, creating an immersive and interactive user experience.

Before starting with the blog, if you are looking to develop Mobile Apps, you can check out Flutter development services offered by Mobikul.

Why Scratch Card Animation?

Scratch cards are synonymous with excitement and mystery. By incorporating this familiar concept into your app, you instantly create a sense of anticipation and delight for users.
Scratch cards revealing discounts, special offers, or exclusive content, scratch card animations offer a fun and engaging way to interact with your app.

Implementation

Firstly, Create A New Project And Add dependencies Into Pubspec.yaml file as

  scratcher: ^2.5.0
  confetti: ^0.7.0

1 2	scratcher: ^2.5.0 confetti: ^0.7.0

2. Create new stateful class (ScratchCard) and add code for UI as showing below :-

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

  @override
  State<ScratchCard> createState() => _ScratchCardState();
}

class _ScratchCardState extends State<ScratchCard> {
  late ConfettiController _controller;

  @override
  void initState() {
    super.initState();
    _controller =  ConfettiController(
      duration:  const Duration(seconds: 2),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Scratch card")),
      body: Center(
        child: Scratcher(
          brushSize: 50,
          threshold: 75,
          color: Colors.red,
          image: Image.asset(
            "assets/images/outerImage.png",
            fit: BoxFit.fill,
          ),
          onChange: (value) => print("Scratch progress: $value%"),
          onThreshold: () => _controller.play(),
          child: Container(
            height: 300,
            width: 300,
            color: Colors.purple,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset(
                  "assets/images/newImage.png",
                  fit: BoxFit.contain,
                  width: 250,
                  height: 250,
                ),
                Column(
                  children: [
                    ConfettiWidget(
                      blastDirectionality: BlastDirectionality.explosive,
                      confettiController: _controller,
                      particleDrag: 0.05,
                      emissionFrequency: 0.05,
                      numberOfParticles: 100,
                      gravity: 0.05,
                      shouldLoop: false,
                      colors: const [
                        Colors.green,
                        Colors.red,
                        Colors.yellow,
                        Colors.blue,
                        Colors.purple
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class ScratchCard extends StatefulWidget {

const ScratchCard({Key? key}) : super(key: key);

@override

State<ScratchCard> createState() => _ScratchCardState();

}

class _ScratchCardState extends State<ScratchCard> {

late ConfettiController _controller;

@override

void initState() {

super.initState();

_controller = ConfettiController(

duration: const Duration(seconds: 2),

);

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text("Scratch card")),

body: Center(

child: Scratcher(

brushSize: 50,

threshold: 75,

color: Colors.red,

image: Image.asset(

"assets/images/outerImage.png",

fit: BoxFit.fill,

onChange: (value) => print("Scratch progress: $value%"),

onThreshold: () => _controller.play(),

child: Container(

height: 300,

width: 300,

color: Colors.purple,

child: Column(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

crossAxisAlignment: CrossAxisAlignment.center,

children: [

Image.asset(

"assets/images/newImage.png",

fit: BoxFit.contain,

width: 250,

height: 250,

Column(

children: [

ConfettiWidget(

blastDirectionality: BlastDirectionality.explosive,

confettiController: _controller,

particleDrag: 0.05,

emissionFrequency: 0.05,

numberOfParticles: 100,

gravity: 0.05,

shouldLoop: false,

colors: const [

Colors.green,

Colors.red,

Colors.yellow,

Colors.blue,

Colors.purple

);

}

In above example code we have create basic UI to display two asses images to add scratch animation in app as :-

The scratch is finished and reaches the threshold value, ConfettiController will create a confetti animation. Scratcher widget has property “onThreshold” to play confetti animation within the app.
ConfettiWidget and reward image add as child of Scratcher widget to show the rewards.
Customize the confetti animation using properties in ConfettiWidget as we have added some properties in our example.

SlimyCard Animation in Flutter

Output of example code

Scratch card animation

Conclusion

Thanks for reading this article ❤️

I hope this blog will help you to learn about scratch card animation in flutter and you will be able to implement it. For more updates, make sure to keep following Mobikul Blogs to learn more about mobile app development.

Happy Learning ✍️

Other blogs you may like…

Zoom network image

Flip Card Animation in Android

Reference

https://pub.dev/packages/scratcher