Flutter –刮刮卡查看应用

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

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类具有以下属性：

划痕器的性质

• child：用于声明Container和其他Widget。
• brushSize：用于在刮擦过程中提供不同大小的画笔。
• 阈值：用于给出划痕区域的百分比级别。
• onChange：当显示该区域的新部分时，将调用回叫。
• 颜色：设置刮擦器的颜色。
• 图片：在刮刮卡上声明图片。
• onThreshold：用于调用回调。
• onChange：用于显示区域的新部分(0.1％或更高)时调用回调。

现在，按照步骤在我们的Flutter应用中实施刮刮卡视图

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

dependencies:
 scratcher: "^1.4.0"

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

步骤2：将依赖项导入到主体中。使用以下代码的dart文件：

import 'package:scratcher/scratcher.dart';

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

首先，我们在main函数中运行App时声明了MyApp() 。然后，我们为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：现在为主页声明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),),
  
      ),
    );
  }

步骤5：在单击按钮时，生成刮刮卡

对于创建刮刮卡，我们在StatelessWidget()的Future方法中声明了scratchDialoge 。在此scratchDialoge中，我们返回具有圆形边框的Alert对话框。在该警报对话框中，我们给出了标题并将其居中对齐。然后，我们在内容中提供了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),
                  ),
  
  
                ),
              ),
  
          );
        }),
      );
    }
    );
  
  }

步骤6：将Scratch卡dart文件导入到main。 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的基础知识吗?

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