En esta oportunidad, continuando con los widgets que nos ofrece Material Design en Flutter, veremos un poco sobre el uso del widget Badge, que nos sirve para todo tema de notificaciones y hacer que destaquen más para que el usuario pueda atenderlas.
Badge
Las insignias se encargan de mostrar cuando hay nuevas notificaciones, mensajes, etc. Se muestran con un color notorio para distinguirlo, por lo general rojo y también es posible agregar un número para determinar la cantidad de mensajes o notificaciones pendientes por revisar.
Uso
Por lo general las insignias se utilizan por lo general en los íconos de navegación, por ejemplo en los BottomNavigationBarItem y también en los botones que tienen el constructor icon . Ayudan también al usuario entender que tiene algo nuevo que revisar en cierta parte de la aplicación. Una vez seleccionado el ícono que contiene el Badge, desaparece el Badge del mismo, para indicar al usuario que ya revisó la notificación pendiente que tenía.
Tipos
Hay dos tipos de insignias:
- Small badge: Es una insignia pequeña en forma de círculo de un color diferente al ícono que indica que tienes una notificación pendiente.
- Large badge: Es una insignia más grande que contiene texto, por lo general un número de máximo 3 dígitos para indicar la cantidad de tareas pendientes.
Constructores
- Badge(): Este constructor es el por defecto donde el texto es opcional y se muestra el círculo solamente.
- Badge.count(): Este constructor es para usar la opción de colocar un número de 1 a 3 dígitos.
Propiedades
- alignment: propiedad para alinear el texto en relación con el widget hijo.
- backgroundColor: propiedad para cambiar el color de relleno del Badge.
- child: propiedad para indicar el widget hijo.
- isLabelVisible: propiedad para indicar si se muestra el texto o no. Por defecto es true.
- label: propiedad donde va el texto a mostrar en el Badge. Por lo general, es un widget de Texto.
- largeSize: propiedad que se usa para indicar la altura del Badge cuando el texto se proporciona.
- offset: propiedad que se puede usar junto con alignment para ajustar la ubicación del texto en relación con el widget hijo.
- padding: propiedad donde se agrega el relleno al texto con relación al Badge.
- smallSize: propiedad para indicar el diámetro del círculo cuando el texto (label) es nulo.
- textColor: propiedad para colocar el color al texto del Badge.
- textStyle: propiedad para cambiar otras opciones al texto del Badge.
Ejemplo
import 'package:flutter/material.dart';
class BadgeScreen extends StatefulWidget {
const BadgeScreen({super.key});
@override
State<BadgeScreen> createState() => _BadgeScreenState();
}
class _BadgeScreenState extends State<BadgeScreen> {
bool activeMessage = true;
int index = -1;
int emailCount = 1000;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Badge Screen'),
actions: [
IconButton(
onPressed: () {},
icon: const Badge(child: Icon(Icons.notifications_none_outlined)))
],
),
body: index == 0
? const Center(
child: Text('Mensajes'),
)
: index == 1
? const Center(
child: Text('Correos'),
)
: const Center(
child: Text('Perfil'),
),
bottomNavigationBar: BottomNavigationBar(
onTap: (value) {
setState(() {
index = value;
if (index == 0) {
activeMessage = !activeMessage;
}
if (index == 1) {
emailCount--;
}
});
},
items: [
BottomNavigationBarItem(
label: 'Mensaje',
icon: Badge(
isLabelVisible: activeMessage,
child: const Icon(Icons.message_outlined),
),
),
BottomNavigationBarItem(
label: 'Correo',
icon: Badge.count(
count: emailCount,
child: const Icon(Icons.email_outlined),
),
),
const BottomNavigationBarItem(
label: 'Perfil',
icon: Badge(
child: Icon(Icons.person_outline),
),
),
],
),
);
}
}
Conclusión
En conclusión, el widget Badge es una excelente opción cuando queremos darle más visibilidad al usuario sobre las nuevas opciones que tiene, mensajes que atender, cambios, etc. Para dar un mejor experiencia con la aplicación.
¡¡¡Gracias por leer este artículo!!!