Flutter: aplicación de visualización de tarjetas rasca y gana

Scratch Card es una de las cosas populares que puede ver en varias aplicaciones de compras y aplicaciones de pago. Estas tarjetas rasca y gana se utilizan para ofrecer recompensas y reembolsos a los usuarios. Puede tener una amplia gama de casos de uso, pero se usa principalmente para generar recompensas aleatorias para los usuarios de la aplicación. En este artículo vamos a ver cómo implementar Scratch Card en Flutter.

Constructor del widget de tarjeta Scratcher:

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,
  ),
)

La biblioteca Scratcher se utiliza para desarrollar widgets scratcher prediseñados. La Clase Scratcher tiene las siguientes propiedades:

Propiedades de Scratcher

• child: Esto se usa para declarar Container y diferentes Widgets.
• brushSize: Se usa para dar los diferentes tamaños del pincel durante el scratch.
• umbral: Se utiliza para dar el nivel porcentual del área de borrado.
• onChange: la devolución de llamada se realiza cuando se revela una nueva parte del área.
• color: Para establecer el color del rascador.
• Imagen:  Para declarar la imagen en la tarjeta de rascar.
• onThreshold: Se utiliza para evocar la devolución de llamada.
• onChange: se usa para llamar a Callback cuando se revela una nueva parte del área (0.1% o superior).

Ahora, sigue los pasos para implementar la vista de rasca y gana en nuestra aplicación Flutter

Paso 1: agregue la dependencia al archivo pubspec.yaml como se muestra a continuación:

dependencies:
 scratcher: "^1.4.0"

Ahora haga clic en pub.get para configurar.

Paso 2: importa la dependencia al archivo main.dart usando el siguiente código:

import 'package:scratcher/scratcher.dart';

Paso 3: ahora navegue hasta el archivo main.dart() y devuelva Material App()

Primero, hemos declarado MyApp() al ejecutar la aplicación en la función principal. Luego hemos creado StatelessWidget para MyApp en el que hemos devuelto MaterialApp(). En este MaterialApp() le hemos dado el título de nuestra aplicación y luego declaramos el tema de nuestra aplicación como primarioSwatch como verde. Entonces hemos dado nuestra primera aplicación de pantalla o control deslizante en el hogar: Scratch_Card()

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(),
    );
  }
}

Paso 4: Ahora declara StatelessWidget() para HomePage

En StatelessWidget() devuelve el widget Container() . En este StatelessWidget() le hemos dado opacidad a 0. En ese Container() le hemos dado FlatButton() y lo alineamos en el centro ahora le hemos dado border-radius a este botón y le hemos dado nombre. Le hemos dado el método onPressed() a este botón. En este método, hemos declarado el método scratchDialoge() .

// 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),),
  
      ),
    );
  }

Paso 5: al hacer clic en el botón, genere la tarjeta rasca y gana

Para crear una tarjeta rasca y gana, hemos declarado scratchDialoge en el método Future en StatelessWidget() . En este scratchDialoge tenemos un diálogo de alerta de retorno que tiene un borde circular. En ese cuadro de diálogo de alerta, le hemos dado el título y lo alineamos en el centro. Luego le dimos StatefulBuilder en el contenido y devolvimos Scratcher. Este Scratcher se importa de la biblioteca de Scratcher . Ayuda a rascar la tarjeta. En este Scratcher le hemos dado propiedades como la precisión que hemos puesto a un nivel bajo. También hemos dado un umbral en el que hemos fijado una opacidad. Hemos dado un tamaño de pincel que ayuda a rascar las tarjetas fácilmente. Después de eso, hemos dadoAnimatedOpacity() como un niño en Scratcher. En el que hemos dado la duración del scratch en milisegundos.

Ahora, hemos declarado la opacidad que hemos dado en StatelessWidget() . Después de eso, le hemos dado un Container() de altura y ancho específicos. Hemos alineado este Container() en el centro y le hemos dado texto. Y dale color al texto.

import 'package:flutter/material.dart';
import 'package:scratcher/scratcher.dart';
  
class Scratch_Card extends StatelessWidget {
  double _opacity = 0.0;
  
// scratchDialog method created
  Future<void>scratchDialog(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),
                  ),
  
  
                ),
              ),
  
          );
        }),
      );
    }
    );
  
  }

Paso 6: Importe el archivo dart de la tarjeta Scratch al archivo main.dart como se muestra a continuación:

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(),
    );
  }
}

Producción: