Flutter Diálogos

Intruducción

• Los díalogos suelen ser ventanas modales (no se puede iteraccionar con la aplicación hasta que se cierre) en los que:

• Se informa de algo
• Se solicita información al usuario.

• Creamos una nueva página en la carpeta pages de nombre alert_pages.dart

En todas las páginas haremos lo mismo:

• Importamos la librería de 'material' (recordar que existe un snippet que lo hace automático).
• Creamos una clase que derive de StatelessWidget (al hacerlo será necesario implementar el método build, ya os da un aviso el Android Studio) de nombre AlertPage.
• Dentro del método build, retornamos un widget Scaffold (recordar que existe un snippet que lo hace automático).

• En todos los tipos de diálogos vamos a tener que 'mostrarlo'. Para ello vamos a hacer uso de la clase showDialog a la que vamos a tener que:

• Enviar en forma de parámetro el buildcontext.
• Devolver el Widget que queremos que se visualice como 'contenido' del diálogo. Esto lo indicamos en el parámetro builder.

• barrierDismissible: Indicamos si queremos que se pueda cerrar el diálogo al pulsar fuera del mismo (por defecto es true).

Al instanciar esta clase, se devuelve un Future. En dicho Future puede venir información sobre qué opción fue pulsada por parte del usuario (al cerrar al diálogo con el método pop de la clase Navigator, se puede enviar información de vuelta a quien llamó al showDialog).

AlertDialog

• Más información en https://api.flutter.dev/flutter/material/AlertDialog-class.html

• Este tipo de diálogos suelen ser empleados para informar al usuario de algo o para que escoga entre un número limitado de opciones (normalmente dos) la acción a seguir.

Los parámetros más importantes son:

• title: Título de la alerta.
• content: Contenido de la alerta.
• actions: Lista de widget que van a conformar las 'acciones' que va a tener el alertdialog. Normalmente son botones.

Para cerrar el diálogo podemos hacer uso del método pop de la clase Navigator.

• Veamos un ejemplo:

import 'package:flutter/material.dart';

class AlertPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Ejemplos de Alert'),
        ),
        body: Row (
          mainAxisAlignment:MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () => _mostrarAlerta1(context).then((value) => print(value)),    // El then no es obligatorio. Lo pondríamos si queremos recibir información de vuelta
              child: Text('Alerta 1',style: TextStyle(color: Colors.yellow),),
              style: ElevatedButton.styleFrom(primary: Colors.blue,shape: StadiumBorder())
            )
          ],
        )
    );
  }

  Future _mostrarAlerta1(BuildContext context){    // Si no vamos a 'devolver' información podríamos definir el método como void y no hacer el return del showDialog.
       return showDialog(context: context,
                 builder: (BuildContext context) {
                    return AlertDialog(
                      title: Text('Título del diálogo'),
                      content: Column(
                        mainAxisSize: MainAxisSize.min, // Para que la columna no ocupe todo el alto de la pantalla
                        children: [
                          Text('Contenido del diálogo. Texto que queramos que aparezca para informar al usuario de algo'),
                          FlutterLogo(size: 50,)
                        ],
                      ),
                      actions: [
                        TextButton(onPressed: () => Navigator.pop(context), child: Text('Cancelar')), // Cerramos el diálogo
                        TextButton(onPressed: (){
                          // Pondríamos el código que queramos
                          Navigator.pop(context,'Valor de vuelta');     // Envío de vuelta a quien llamó la información que quiera. NO ES OBLIGATORIO
                        }, child: Text('Aceptar')),

                      ],
                    );;
        },
      );
  }
}

TimePickerDialog

Enlace a la página principal de la UD5

Enlace a la página principal del curso

-- Ángel D. Fernández González -- (2021).