Flutter – Diálogos gify

Giffy Dialogs es un cuadro de diálogo de alerta altamente personalizable. Se implementa mediante el uso del paquete gify_dialog de flutter. Este paquete está completamente escrito en lenguaje Dart y proporciona una amplia gama de características. Hay tres tipos de diálogos divertidos que se enumeran a continuación:

1. Diálogo de regalo de red
2. Diálogo de gifs de bengalas
3. Cuadro de diálogo de activos

Hablemos de ellos con un poco de detalle.

1. Diálogo de regalos de red:

Estos son el tipo de diálogo divertido que obtiene su contenido (como imágenes) de Internet. A continuación se muestra una implementación de muestra del diálogo Network gify:

onPressed: () {
  showDialog(
  context: context,builder: (_) => NetworkGiffyDialog(
    imageUrl:" IMAGE URL",
    title: Text('TEXT FOR THE DIALOG',
            textAlign: TextAlign.center,
            style: TextStyle(
            fontSize: INTEGER VALUE GOES HERE,
            fontWeight: FontWeight.w600)),
    description:Text('SECONDARY TEXT IN THE DIALOG',
          textAlign: TextAlign.center,
        ),
    entryAnimation: ANIMATION ENTRY SIDE,
    onOkButtonPressed: () {},
  ) );
}

2. Diálogo de gifs de bengalas:

Estos son el tipo de diálogo divertido que obtiene su contenido (como imágenes) de la bengala. Se le asigna un flarepath y se comporta de manera similar a Network gify dialog en el resto de su funcionamiento. A continuación se muestra una implementación de muestra del diálogo Flare gify:

onPressed: () {
  showDialog(
  context: context,builder: (_) => FlareGiffyDialog(
    flarePath: 'assets/space_demo.flr',
    flareAnimation: 'loading',
    title: Text('TEXT FOR THE DIALOG',
           style: TextStyle(
           fontSize: INTEGER VALUE GOES HERE, fontWeight: FontWeight.w600),
    ),
    description: Text('SECONDARY TEXT IN THE DIALOG',
          textAlign: TextAlign.center,
          style: TextStyle(),
        ),
    entryAnimation: ANIMATION ENTRY SIDE,
    onOkButtonPressed: () {},
  ) );
}

3. Diálogo de regalos de activos:

Estos son el tipo de diálogo divertido que obtiene su contenido (como imágenes) del propio código base. La dependencia de activos en el archivo pubspec.yaml debe activarse con el mismo propósito y las imágenes deben agregarse al directorio respectivo. A continuación se muestra una implementación de muestra del cuadro de diálogo GIF de activos:

onPressed: () {
  showDialog(
  context: context,builder: (_) => AssetGiffyDialog(
    imagePath: 'PATH TO THE ASSETS',
    title: Text('TEXT FOR THE DIALOG',
            style: TextStyle(
            fontSize:INTEGER VALUE GOES HERE, fontWeight: FontWeight.w600),
    ),
    description: Text('SECONDARY TEXT IN THE DIALOG',
          textAlign: TextAlign.center,
          style: TextStyle(),
        ),
    entryAnimation: ANIMATION ENTRY SIDE,
    onOkButtonPressed: () {},
  ) );
}

Propiedades clave:

• título: El título del cuadro de diálogo se establece aquí. Es el texto principal en el diálogo.
• descripción: Esto establece el texto secundario del diálogo.
• entryAnimation: se utiliza para establecer la dirección desde la que aparecerá el cuadro de diálogo.
• o nOkButtonPressed: establece la acción después de presionar el botón Aceptar en el cuadro de diálogo.

Ejemplo:

Implementemos un cuadro de regalo de red dentro de una aplicación simple. Para hacerlo, siga los siguientes pasos:

Agregue la dependencia:

El primer paso es agregar la dependencia gifffy_dialog a la sección de dependencias del archivo pubspec.yaml como se muestra a continuación:

Importar la dependencia:

Utilice la siguiente línea de código para importar la misma dependencia en el archivo de código:

import 'package:giffy_dialog/giffy_dialog.dart';

Estructuración de la aplicación:

Extienda un StatelessWidget para darle a la aplicación una página de inicio simple con una barra de aplicaciones y un cuerpo como se muestra a continuación:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: ' Network Giffy Dialog',
      theme: ThemeData(primarySwatch: Colors.teal, fontFamily: 'Nunito'),
      home: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        backgroundColor: Colors.green,
      ),
      // the content of the app goes here
      body: 
      ),
  }
}

Agregar un botón:

Agregue un botón para abrir el cuadro de diálogo de red cuando se presiona, dentro del cuerpo de la aplicación, como se muestra a continuación:

RaisedButton(
                key: keys[0],
                color: Colors.teal,
                child: Text(
                  "Giffy Button",
                  style: TextStyle(
                    color: Colors.white,
                  ),

Llame al diálogo de gifs:

Dado que estamos implementando el cuadro de diálogo Network gify, haga una llamada de la siguiente manera:

onPressed: () {
                 showDialog(
                     context: context,
                     builder: (_) => NetworkGiffyDialog(
                       key: keys[1],
                       image: Image.network(
                         "https://64.media.tumblr.com/bb5a0c0b7fb98f5a8262d1b287c2ca88/tumblr_oqakvrq6U71uorz8zo1_r2_540.png",
                         fit: BoxFit.cover,
                       ),
                       entryAnimation: EntryAnimation.TOP_LEFT,
                       title: Text(
                         'Gal Gadot',
                         textAlign: TextAlign.center,
                         style: TextStyle(
                             fontSize: 22.0, fontWeight: FontWeight.w600),
                       ),
                       description: Text(
                         'Gal Gadot is an Israeli actress, model, and producer famous for her roles like Wonder Women',
                         textAlign: TextAlign.center,
                       ),
                       onOkButtonPressed: () {},
                     ));

Código fuente completo:

import 'package:flutter/material.dart';
import 'package:giffy_dialog/giffy_dialog.dart';
  
void main() => runApp(new MyApp());
  
const List<Key> keys = [
  Key("Network"),
  Key("NetworkDialog"),
];
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: ' Network Giffy Dialog',
      theme: ThemeData(primarySwatch: Colors.teal, fontFamily: 'Nunito'),
      home: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
                key: keys[0],
                color: Colors.teal,
                child: Text(
                  "Giffy Button",
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (_) => NetworkGiffyDialog(
                        key: keys[1],
                        image: Image.network(
                          "https://64.media.tumblr.com/bb5a0c0b7fb98f5a8262d1b287c2ca88/tumblr_oqakvrq6U71uorz8zo1_r2_540.png",
                          fit: BoxFit.cover,
                        ),
                        entryAnimation: EntryAnimation.TOP_LEFT,
                        title: Text(
                          'Gal Gadot',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              fontSize: 22.0, fontWeight: FontWeight.w600),
                        ),
                        description: Text(
                          'Gal Gadot is an Israeli actress, model, and producer famous for her roles like Wonder Women',
                          textAlign: TextAlign.center,
                        ),
                        onOkButtonPressed: () {},
                      ));
                }),
          ],
        ),
      ),
    );
  }
}

Producción: