En esta oportunidad veremos más sobre widgets de Flutter. Se trata del widget SnackBar, el cual nos permite mostrar información al usuario sobre el estado de los procesos que está realizando.
SnackBar
Este widget es muy utilizado para mostrar mensajes rápidos en la parte inferior sobre los procesos que vamos manejando en la aplicación.
Componentes
- Contenedor en el fondo.
- Texto de apoyo en la parte izquierda del componente.
- Seguido de una acción opcional.
- y después un botón de cerrar opcional también.
Uso
- Los SnackBar informan al usuario de un evento que está ocurriendo pero no debe interrumpir su experiencia.
- Pueden desaparecer después de un tiempo o hasta que el usuario realice una acción.
- Sólo se puede mostrar un SnackBar a la vez.
- Sólo puede tener una acción.
- Comúnmente se usan para mostrar mensajes sobre procesos que se realizaron o se van a realizar.
- Para mostrar un SnackBar se debe llamar a
ScaffoldMessenger.of(context).showSnackBar()y allí enviar una instancia de SnackBar con el mensaje a mostrar. - Se puede controlar el tiempo que se va a mostrar el SnackBar.
Constructores
Los SnackBar solo tienen un constructor que es el mismo utilizado por defecto. Es el SnackBar().
Propiedades
- action: propiedad opcional con una acción que el usuario puede realizar.
- actionOverflowThreshold: propiedad opcional para el ancho de la acción dentro del widget.
- animation: propiedad para darle animación a la forma en que se muestra y desaparece el SnackBar.
- backgroundColor: propiedad para el color del fondo del SnackBar.
- behavior: propiedad que define el comportamiento y ubicación del SnackBar.
- clipBehavior: propiedad con la que se puede recortar o no el contenido.
- closeIconColor: propiedad opcional para el color del ícono de cierre.
- content: propiedad para el contenido principal del SnackBar o su texto.
- dismissDirection: propiedad para determinar en qué dirección desaparece el SnackBar.
- duration: propiedad para indicar el tiempo que va estar mostrándose el mensaje.
- elevation: propiedad para colocar el tamaño de la sombra debajo del SnackBar.
- hitTestBehavior: propiedad que define como se comportará el área del SnackBar.
- margin: propiedad para indicar la margen del SnackBar.
- onVisible: propiedad tipo función que se llama cuando el SnackBar es visible.
- padding: propiedad que indica el relleno que habrá entre el contenido y la acción.
- shape: propiedad con la forma que tendrá el SnackBar.
- showCloseIcon: propiedad obligatoria en caso de querer mostrar la opción de cerrar en el SnackBar.
- width: propiedad para indicar el ancho del SnackBar.
Ejemplo
import 'package:flutter/material.dart';
class SnackBarScreen extends StatefulWidget {
const SnackBarScreen({super.key});
@override
State<SnackBarScreen> createState() => _SnackBarScreenState();
}
class _SnackBarScreenState extends State<SnackBarScreen> {
bool showAction = false;
String message = 'Mensaje activado desde una acción de SnackBar';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('SnackBar Screen'),
),
body: ListView(
padding: const EdgeInsets.all(20),
children: [
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Barra de mensajes por defecto'),
),
);
},
child: const Text('Ver Snackbar'),
),
FilledButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Mensaje que demora 2 segundos'),
duration: Duration(seconds: 2),
),
);
},
child: const Text('Ver Snackbar 2 segundos'),
),
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: const Text('Barra de mensajes'),
action: SnackBarAction(
label: 'Imprimir',
onPressed: () {
setState(() {
showAction = !showAction;
});
}),
),
);
},
child: const Text('Ver Snackbar con acción'),
),
FilledButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Mensaje con ícono de cierre'),
showCloseIcon: true,
),
);
},
child: const Text('Ver Snackbar con ícono de cierre'),
),
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Mensaje con color de fondo verde'),
showCloseIcon: true,
backgroundColor: Colors.green,
),
);
},
child: const Text('Ver Snackbar color de fondo diferente'),
),
const SizedBox(
height: 20,
),
if (showAction)
Center(
child: Text(
message,
style: Theme.of(context).textTheme.titleMedium,
),
),
],
),
);
}
}
Conclusión
En conclusión, el widget SnackBar es muy útil para los casos que deseamos mostrar un mensaje por ejemplo al guardar algo en base de datos para avisar al usuario que se realizó la operación o también para casos que queremos mostrar algo informativo que puede ejecutar el usuario en algún momento dentro de la aplicación.
¡¡¡Gracias por leer este artículo!!!