In this article, we will Explore Scratch Card Animation In Flutter. We see how to execute a demo program. We will tell you the best way how to make an interactive and immersive scratch card animation using the scratcher package in your Flutter applications.
For Scratcher
scratcher | Flutter package
Scratch card widget which temporarily hides content from the user.pub.dev
For Confetti
confetti | Flutter package
Blast colorful confetti all over the screen. Celebrate in app achievements with style. Control the velocity, angle…pub.dev
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction
A scratch card animation to your Flutter application can be only the remarkable touch you want to enamor users and upgrade engagement. Envision the expectation as clients swipe away to uncover stowed away satisfied, suggestive of lottery scratch cards. Scratch cards are inseparable from fervor and secret.
Scratch cards uncover discounts, extraordinary offers, or selective content, scratch card animations offer a tomfoolery and connecting method for interfacing with your application.
The below demo video shows how to make a scratch card animation in Flutter and how a scratch card animation will work using the scratcher package in your Flutter applications. We will make a scratch card for users when users swipe the card to reveal hidden prices. It will be shown on your device.
Demo Module::
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
scratcher: ^2.5.0
confetti: ^0.7.0Step 2: Import
import 'package:scratcher/scratcher.dart';
import 'package:confetti/confetti.dart';Step 3: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/Step 4: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main.dart file, we will create a new class ScratchCard() in the same dart file. In this class, we will make a late ConfettiController variable was _controller.
late ConfettiController _controller;Now, we will add the initState() method. In this method, we will add the _controller is equal to the ConfettiController(). Inside the bracket we will add a duration was 2 seconds.
@override
void initState() {
super.initState();
_controller = ConfettiController(
duration: const Duration(seconds: 2),
);
}In the body, we will add a Scratcher() method. In this method, we will add brushSize was 50 means the size of the brush. The bigger it is the faster the user can scratch the card, a threshold was 75 means the percentage level of the scratch area that should be revealed to complete. The scratch is finished and reaches the threshold value, ConfettiController will create a confetti animation.
Center(
child: Scratcher(
brushSize: 50,
threshold: 75,
color: Colors.blue,
image: Image.asset(
"assets/scratch.jpeg",
fit: BoxFit.fill,
),
onChange: (value) => print("Scratch progress: $value%"),
onThreshold: () => _controller.play(),
child: SizedBox(
height: MediaQuery.of(context).size.height*0.3,
width: MediaQuery.of(context).size.width*0.6,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(
"assets/reward.png",
fit: BoxFit.cover,
width: MediaQuery.of(context).size.height*0.25,
height: MediaQuery.of(context).size.height*0.25,
),
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
],
),
],
),
],
),
),
),
)The Scratcher widget has the property “onThreshold” to play confetti animation inside the application. ConfettiWidget and reward picture are added as a child of the Scratcher widget to show the prizes. Modify the confetti animation involving properties in ConfettiWidget as we have added a few properties in our model.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:confetti/confetti.dart';
import 'package:flutter/material.dart';
import 'package:flutter_scratch_card_demo/splash_screen.dart';
import 'package:scratcher/scratcher.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const Splash(),
);
}
}
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(
backgroundColor: Colors.white,
appBar: AppBar(title: const Text("Flutter Scratch Card Demo"),
automaticallyImplyLeading: false,
centerTitle: true,
backgroundColor: Colors.tealAccent,),
body: Center(
child: Scratcher(
brushSize: 50,
threshold: 75,
color: Colors.blue,
image: Image.asset(
"assets/scratch.jpeg",
fit: BoxFit.fill,
),
onChange: (value) => print("Scratch progress: $value%"),
onThreshold: () => _controller.play(),
child: SizedBox(
height: MediaQuery.of(context).size.height*0.3,
width: MediaQuery.of(context).size.width*0.6,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(
"assets/reward.png",
fit: BoxFit.cover,
width: MediaQuery.of(context).size.height*0.25,
height: MediaQuery.of(context).size.height*0.25,
),
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
],
),
],
),
],
),
),
),
),
);
}
}Conclusion:
In the article, I have explained the scratch card animation in Flutter; you can modify this code according to your choice. This was a small introduction to the scratch card animation in Flutter User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying Scratch Card Animation in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on the Scratch Card Animation using the scratcher package in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I need to correct something? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
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! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
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.
[…] In this article, we will Explore Scratch Card Animation In Flutter. We see how to execute a demo program. We will tell you the best way how to make an […]