Flutter: creación de un diálogo en el uso de la biblioteca GetX

Cuando queremos mostrar algo en forma de diálogo, podemos crear este diálogo usando la biblioteca GetX en Flutter. Cuando normalmente creamos un diálogo en flutter, entonces usa context y builder para crear un Dialog . Esta no es una buena práctica para que un desarrollador cree diálogos utilizando contextos y constructores. Para superar este problema, podemos crear Diálogo usando GetX con un código simple y muy fácil de crear un diálogo. No usa contexto ni constructor para crear Dialog .

Sigue los pasos para crear un Diálogo en flutter usando la biblioteca GetX:

• Cree una nueva aplicación de Flutter:

flutter create APP_NAME

• Agregue obtener dependencias en el archivo pubspec.yaml :

• Importar obtener en main.dart

import 'package:get/get.dart';

El constructor de Get.defaultDialog():

defaultDialog<T>({
String title = "Alert", 
TextStyle? titleStyle, 
Widget? content, 
void Function()? onConfirm, 
void Function()? onCancel, 
void Function()? onCustom, 
Color? cancelTextColor, 
Color? confirmTextColor, 
String? textConfirm, 
String? textCancel, 
String? textCustom, 
Widget? confirm, 
Widget? cancel, 
Widget? custom, 
Color? backgroundColor, 
bool barrierDismissible = true, 
Color? buttonColor, 
String middleText = "Dialog made in 3 lines of code", 
TextStyle? middleTextStyle, 
double radius = 20.0, 
List<Widget>? actions, 
Future<bool> Function()? onWillPop})

Analicemos algunas propiedades de Get.defaultDialog():

• title : El título del Diálogo. De forma predeterminada, el título es «Alerta».
• titleStyle : El estilo dado al texto del título usando TextStyle.
• contenido : El contenido dado al Diálogo y debe usar Widget para dar contenido.
• middleText : el texto central dado al diálogo. Si también usamos contenido, se mostrarán los datos del widget de contenido.
• barrierDismissible : si queremos cerrar el cuadro de diálogo haciendo clic fuera del cuadro de diálogo, su valor debe ser verdadero, de lo contrario, falso. Por defecto, su valor es true .
• middleTextStyle : El estilo dado al texto del medio usando TextStyle.
• radio : El radio del diálogo proporcionado. Por defecto, su valor es 20.
• backgroundColor : El color de fondo del diálogo.

El archivo main.dart :

import 'package:flutter/material.dart';
import 'package:get/get.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
   
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Dialog Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks Dialog'),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Show Dialog'),
          onPressed: (){
            Get.defaultDialog(
  
            );
          },
        )
      ),
    );
  }
}

Explicación:

• El primer paso es crear una aplicación y ejecutarla.
• Usamos GetMaterialApp en lugar de MaterialApp porque estamos construyendo nuestra aplicación usando la biblioteca GetX . Si no usamos GetMaterialApp entonces sus funcionalidades no funcionarán.
• Entonces hemos creado una clase Home que es Stateless . Entonces hemos creado un widget Scaffold.
• En el cuerpo, crea un botón en el centro.
• Crear diálogo usando Get.defaultDialog() .
• Podemos agregar funciones adicionales a este cuadro de diálogo predeterminado, como color de fondo, el radio del cuadro de diálogo, texto central, barrera descartable, etc.

Producción:

Get.defaultDialog(
              title: "GeeksforGeeks",
              middleText: "Hello world!",
              backgroundColor: Colors.green,
              titleStyle: TextStyle(color: Colors.white),
              middleTextStyle: TextStyle(color: Colors.white),

            );

Cuando se ejecuta el código anterior, la salida será:

Get.defaultDialog(
              title: "GeeksforGeeks",
              middleText: "Hello world!",
              backgroundColor: Colors.green,
              titleStyle: TextStyle(color: Colors.white),
              middleTextStyle: TextStyle(color: Colors.white),
              textConfirm: "Confirm",
              textCancel: "Cancel",
              cancelTextColor: Colors.white,
              confirmTextColor: Colors.white,
              buttonColor: Colors.red,
              barrierDismissible: false,
              radius: 50,
              content: Column(
                children: [
                  Container(child:Text("Hello 1")),
                  Container(child:Text("Hello 2")),
                  Container(child:Text("Hello 3")),
                ],
              )
            );

Cuando ejecutamos el código anterior, la salida será: