作者：Shaiq khan
原文鏈接：https://medium.com/flutterdevs/scratch-card-in-flutter-8e8c6f335be2
我們拿起手機，然後把錢寄給我們的朋友，以獲得一些現金返還。現金返還是一種提高使用戶粘度的有效舉動。
對於普通用戶來說，這簡直就是彩票，無論如何，您是否會說您是一位被UI驚呆了並且需要在您的應用程序中實現等效功能的應用程序開發人員？屆時，您將是一個完美的選擇。
在這個博客，我們將探討 Flutter 中 刮刮卡 效果。我們將瞭解如何在flutter應用程序中使用scratcher包實現刮板卡。
目錄
-
刮刮卡 -
屬性 -
引入 -
如何在dart文件中實現代碼 -
代碼文件 -
結論
刮刮卡
刮刮卡是您在不同的購物應用程序和支付應用程序上可以看到的著名事物之一。這些刮刮卡用於爲用戶提供獎品和現金返還。它可以具有廣泛的使用案例；但是，它基本上用於爲應用程序用戶創建隨機獎品。
該演示視頻演示瞭如何在Flutter中創建刮刮卡。它顯示了刮卡將如何工作使用scratcher在Flutter應用程序包。它顯示打開的對話框，然後顯示刮刮卡，您將獲得收入。它會顯示在您的設備上。
屬性
scratcher的一些屬性是：
-
**child：**此屬性用於聲明容器和不同的Widget。 -
**brushSize：**此屬性用於在劃痕期間提供不同大小的畫筆。 -
**threshold：**此屬性用於給出劃痕區域的百分比級別。 -
**onChange：**顯示該區域的新部分時，將使用此屬性進行回調。 -
**color：**此屬性用於設置刮板卡的顏色。 -
**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的一個小介紹，並且正在使用它。
本文分享自微信公衆號 - 老孟Flutter（lao_meng_qd）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。