Flutter – 刮刮卡查看应用

刮刮卡是您可以在各种购物应用程序和支付应用程序上看到的流行事物之一。这些刮刮卡用于向用户提供奖励和现金返还。它可以有广泛的用例，但主要用于为应用程序的用户生成随机奖励。在本文中，我们将看到如何在Flutter实现 Scratch Card。

Scratcher Card Widget 的构造函数：

Scratcher(
  brushSize: 30,
  threshold: 50,
  color: Colors.red,
  onChange: (value) => print("Generating Value: $value%"),
  onThreshold: () => print("Threshold reached"),
  child: Container(
    height: 300,
    width: 300,
    color: Colors.green,
  ),
)

Scratcher 库用于开发预先设计的 Scratcher 小部件。 Scratcher 类具有以下属性：

Scratcher的属性

• child：用于声明 Container 和不同的 Widget。
• BrushSize：用于在划痕过程中给出不同大小的画笔。
• 阈值：用于给出划痕区域的百分比级别。
• onChange：当显示区域的新部分时调用回调。
• 颜色：设置刮板的颜色。
• 图像：在刮刮卡上声明图像。
• onThreshold：用于调用回调。
• onChange：用于在显示区域的新部分(0.1% 或更高)时调用回调。

现在，按照步骤在我们的Flutter App 中实现 Scratch Card View

步骤 1：将依赖项添加到pubspec.yaml文件中，如下所示：

dependencies:
 scratcher: "^1.4.0"

现在点击pub.get进行配置。

第二步：将依赖导入到main中。 dart文件使用以下代码：

import 'package:scratcher/scratcher.dart';

第 3 步：现在导航到 main。 dart() 文件并返回 Material App()

首先，我们在 main函数声明了MyApp() in running App。然后我们为 MyApp 创建了 StatelessWidget，其中我们返回了MaterialApp()。在这个MaterialApp() 中，我们给出了我们的应用程序的标题，然后将我们的应用程序的主题声明为primarySwatch为绿色。然后我们在家里给出了我们的第一个屏幕或滑块应用程序： Scratch_Card()

Dart

void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
  
      // Title of our App
      title: 'Scratch Card',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
       primarySwatch: Colors.green,
      ),
  
      // First page of our App
      home: Scratch_Card(),
    );
  }
}

第 4 步：现在为 HomePage 声明 StatelessWidget()

在StatelessWidget() 中返回Container()小部件。在这个StatelessWidget() 中，我们将不透明度设置为 0。在那个Container() 中，我们已经提供了FlatButton()并在中心对齐，现在我们已经为此按钮提供了边框半径并为此按钮指定了名称。我们已经为这个按钮提供了onPressed()方法。在这个方法中，我们声明了scratchDialoge()方法。

Dart

// We have declared Container
Container(
      alignment: Alignment.center,
  
      // Created Button
      child: FlatButton(
  
        // On Press method
        onPressed: (){
          scratchDialog(context);
        },
        padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
          
        // Circular border to the button
        shape: OutlineInputBorder(
          borderRadius: BorderRadius.circular(20),
          borderSide: BorderSide.none,
        ),
        color: Colors.green,
  
        // Text on Button
        child: Text("Get a Scratch Card",
                    style: TextStyle(color: Colors.white,
                                     fontWeight: FontWeight.bold,
                                     fontSize: 20),),
  
      ),
    );
  }

第五步：点击按钮，生成刮刮卡

对于创建刮刮卡，我们在StatelessWidget() 的Future 方法中声明了scratchDialoge 。在这个scratchDialoge 中，我们返回了一个带有圆形边框的Alert Dialog 。在那个警报对话框中，我们给出了标题并将其居中对齐。然后我们在内容中给了StatefulBuilder并返回了 Scratcher。这个 Scratcher 是从Scratcher库中导入的。它有助于刮刮卡。在这个 Scratcher 中，我们给出了它的属性，例如我们设置的低精度。我们还给出了一个阈值，我们在其中设置了不透明度。我们提供了有助于轻松刮刮卡的画笔大小。之后，我们在 Scratcher 中将AnimatedOpacity()作为一个孩子。其中我们以毫秒为单位给出了划痕的持续时间。

现在，我们已经声明了我们在StatelessWidget() 中给出的不透明度。之后，我们给出了特定高度和宽度的Container() 。我们已将此Container()对齐在中心并在其中指定文本。并为文本赋予颜色。

Dart

import 'package:flutter/material.dart';
import 'package:scratcher/scratcher.dart';
  
class Scratch_Card extends StatelessWidget {
  double _opacity = 0.0;
  
// scratchDialog method created
  FuturescratchDialog(BuildContext context){
    return showDialog(context: context,
    builder: (BuildContext context){
        
      // Alert Dialog given
      return AlertDialog(
  
        //Having Border
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30),
        ),
  
        // Align in center
        title: Align(
          alignment: Alignment.center,
          child: Text("You Earned Gift Card",
            style: TextStyle(
                color: Colors.green,
                fontSize: 20,
                fontWeight: FontWeight.bold),
          ),
        ),
        content: StatefulBuilder(builder: (context, StateSetter setState){
            
          // Scratch card created
          return Scratcher(
            accuracy: ScratchAccuracy.low,
              threshold: 25,
              brushSize: 40,
              onThreshold: (){
              setState((){
                _opacity = 1;
              });
              },
  
            // Given Animated Opacity
              child: AnimatedOpacity(
                duration: Duration(milliseconds: 250),
                opacity: _opacity,
                  
                // Having Container
                child: Container(
                  height: 300,
                  width: 300,
                  alignment: Alignment.center,
                  child: Text("You earned 100\$",
                  style: TextStyle(fontWeight: FontWeight.bold,fontSize: 40, color: Colors.green),
                  ),
  
  
                ),
              ),
  
          );
        }),
      );
    }
    );
  
  }

第六步：将刮刮卡dart文件导入到main.c中。 dart文件如下图所示：

Dart

import 'package:flutter/material.dart';
import 'package:pdfviewerapp/scratch_card.dart';
  
  
void main() {
  runApp(MyApp());
}
  
// stateless widget
class MyApp extends StatelessWidget {
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
       primarySwatch: Colors.green,
      ),
  
      // first screen of app
      home: Scratch_Card(),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！