Flutter 实现刮刮卡效果
作者：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的一个小介绍，并且正在使用它。