作者：Shaiq khan
原文連結：https://medium.com/flutterdevs/scratch-card-in-flutter-8e8c6f335be2
我們拿起手機，然後把錢寄給我們的朋友，以獲得一些現金返還。現金返還是一種提高使用戶粘度的有效舉動。
對於普通用戶來說，這簡直就是彩票，無論如何，您是否會說您是一位被UI驚呆了並且需要在您的應用程式中實現等效功能的應用程式開發人員？屆時，您將是一個完美的選擇。
在這個博客，我們將探討 Flutter 中 刮刮卡 效果。我們將了解如何在flutter應用程式中使用scratcher包實現刮板卡。
目錄
刮刮卡刮刮卡是您在不同的購物應用程式和支付應用程式上可以看到的著名事物之一。這些刮刮卡用於為用戶提供獎品和現金返還。它可以具有廣泛的使用案例；但是，它基本上用於為應用程式用戶創建隨機獎品。
該演示視頻演示了如何在Flutter中創建刮刮卡。它顯示了刮卡將如何工作使用scratcher在Flutter應用程式包。它顯示打開的對話框，然後顯示刮刮卡，您將獲得收入。它會顯示在您的設備上。
scratcher的一些屬性是：
**child：**此屬性用於聲明容器和不同的Widget。**brushSize：**此屬性用於在劃痕期間提供不同大小的畫筆。**threshold：**此屬性用於給出劃痕區域的百分比級別。**onChange：**顯示該區域的新部分時，將使用此屬性進行回調。**image：**此屬性用於在刮刮卡上聲明圖片。**onThreshold：**此屬性用於調用回調。> **accuracy：**此屬性用於確定報告應進行的準確性。較低的精度意味著較高的性能。引入步驟1：添加依賴項，將依賴項添加到pubspec-yaml文件。
scratcher: ^1.4.1步驟2：添加asset
assets:
- assets/步驟3：導入包
import 'package:scratcher/scratcher.dart';第4步：在應用程式的根目錄中執行命令
flutter packages get步驟5：啟用AndriodX
將此添加到您的gradle.properties文件：
org.gradle.jvmargs = -Xmx1536M
android.enableR8 = true
android.useAndroidX = true
android.enableJetifier = true
如何在dart文件中實現代碼在lib文件夾內創建一個名為scratch_card.dart的dart文件。
在此屏幕中，我們將創建一個Container，並將對齊方式設置為中心。內部子屬性添加一個**FlatButton。在FlatButton中，我們將添加文本，顏色，形狀，填充和onPressed（）方法。我們將添加一個scratchDialog（context）**函數。
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),),
),
),現在，我們將深入定義**scratchDialog（）**函數：
我們將創建一個矩形對話框。在標題中，我們將在中心添加一個列小部件和對齊方式。在該列內，我們將添加文本和一個分隔符。
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",))
],
),
),
),
);
}),
);
}
);
}在content方法中，我們將返回Scratcher（）。在刮板內部，我們將添加刮板卡的顏色，增加刮板的精度以提高性能，為刮板區域的百分比級別添加閾值，並為刮板在刮擦期間的不同尺寸添加brushSize。在子屬性中，添加一個**AnimatedOpacity（），**我們將添加一個duration，opacity和child屬性，以添加具有高度和寬度的conatiner。在容器內，我們將文本，圖像和自動換行添加到列窗口小部件。運行應用程式時，我們應該獲得屏幕輸出，如屏幕下方的捕獲。
代碼文件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",))
],
),
),
),
);
}),
);
}
);
}
}
結論在這篇文章中，解釋了刮刮卡的基本結構。您可以根據自己的選擇修改此代碼。這是 我對Scratch Card On User Interaction的一個小介紹，並且正在使用它。