TogieBagde

Este widget, implementado como StatelessWidget, muestra una etiqueta (badge) personalizable que puede incluir texto, iconos al inicio y al final, y ofrece opciones de personalización en colores, borde y espaciado.

Importación

import 'package:togie/widgets/general/togie_badge.dart';

Constructor:

const TogieBagde({
  super.key,
  this.text = "",
  this.icon,
  this.iconSize = 13,
  this.trailingIcon,
  this.backgroundColor,
  this.foregroundColor,
  this.borderColor,
  this.iconColor,
  this.trailingIconColor,
  this.width,
  this.onTap,
  this.onLongPress,
  this.padding = const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
});

Parámetro del constructor:

Parámetro	Tipo	Descripción
text	String	Texto que se mostrará en la etiqueta.
icon	IconData?	Icono opcional que se muestra al inicio de la etiqueta.
iconSize	double	Tamaño del icono.
trailingIcon	IconData?	Icono opcional que se muestra al final de la etiqueta.
backgroundColor	Color?	Color de fondo de la etiqueta.
foregroundColor	Color?	Color del texto de la etiqueta.
borderColor	Color?	Color del borde de la etiqueta.
iconColor	Color?	Color del icono inicial.
trailingIconColor	Color?	Color del icono final.
width	double?	Ancho de la etiqueta.
onTap	void Function()?	Callback que se ejecuta al pulsar la etiqueta.
onLongPress	void Function()?	Callback que se ejecuta al mantener pulsada la etiqueta.
padding	EdgeInsetsGeometry?	Espaciado interno de la etiqueta.

Ejemplo de uso:

TogieBagde(
  text: "Ejemplo",
  icon: Icons.star,
  trailingIcon: Icons.close,
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
  borderColor: Colors.blueAccent,
  iconColor: Colors.yellow,
  trailingIconColor: Colors.red,
  width: 150,
  onTap: () {
    // Lógica al pulsar la etiqueta
  },
  onLongPress: () {
    // Lógica al mantener pulsada la etiqueta
  },
  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
)