Los enums son parte esencial de cualquier proyecto en Flutter, pero donde realmente brillan es cuando los combinamos con extensiones. Este patrón te permite centralizar comportamiento, organizar la UI y eliminar switch repetidos que inevitablemente se vuelven inmantenibles.
Descubre lo potente que era este enfoque cuando trabajaba con la navegación inferior de una app: títulos, iconos, colores y hasta acciones quedaron encapsulados directamente dentro del enum. Desde entonces, no volví atrás.
Un tipo de datos enumerado (también conocido como "enumeration" o "enum") es un tipo de dato que consta de un conjunto de valores posibles, que se enumeran explícitamente en la declaración del tipo. En lugar de representar un valor (como un entero), se representa mediante un conjunto de valores de tipo clave/valor Los tipos enumerados son una forma útil de hacer clasificaciones constantes en la aplicación.
Qué es un enum en Flutter y por qué ampliarlo con extensiones
Limitaciones de un enum tradicional en Dart
Un enum puro es simple: una lista de valores.
Sirve para representar estados, opciones o tipos, pero por defecto no permite agregar propiedades ni métodos personalizados.
Eso implica que, sin usar enhanced enums ni extensiones, acabamos con código disperso:
- listas de títulos por un lado
- rutas de iconos por otro
- switch regados en varios widgets
- clases utilitarias innecesarias
Ese caos lo viví también: antes tenía los títulos en un archivo, los iconos en otro y colores en diferentes widgets. Todo eso desapareció con una sola extensión.
Cuándo una extensión mejora tu arquitectura
Las extensiones permiten agregar getters, métodos y lógica sin modificar el enum original.
Las usarás cuando:
- necesitas lógica de UI asociada directamente al enum
- quieres un código más legible (BottomTabsEnum.home.title)
- buscas agrupar comportamiento sin crear clases adicionales
- quieres evitar switch repetidos
Enums con extensiones: el patrón que limpia tu código
Ventajas reales en proyectos Flutter
- Un solo punto de verdad: UI, iconos, colores y acciones centralizadas.
- Legibilidad extrema: dentro del widget basta con escribir .title, .color, .onTap().
- Menos clases auxiliares.
- Código más escalable: cada nuevo valor enum hereda todo inmediatamente.
A mí me cambió la forma de organizar pantallas de navegación. Era común que, al agregar una nueva pestaña, tuviera que tocar varios archivos; ahora solo agrego el valor al enum y listo.
Por qué usar extensiones en lugar de crear nuevas clases
Crear clases para cada etiqueta, icono o color es sobredimensionado.
Una extensión deja todo en su sitio natural sin introducir abstracciones artificiales.
En este artículo, analizamos cómo podemos ampliar la funcionalidad de nuestro Enum utilizando métodos de extensión.
Ejemplo práctico: enum extendido para una barra de navegación inferior
Vamos a crear Enum
enum BottomTabEnum {
home,
video,
shop,
profile,
}Añadiendo título, icono y color desde extensiones
El Enum que creamos arriba es para las pestañas inferiores de nuestra aplicación. Usamos este Enum para nuestra barra de navegación inferior. Tenemos 4 pestañas en nuestra aplicación. Ahora agregaremos más propósito a este Enum usando métodos de extensión.
extension BottomTabsExt on BottomTabsEnum {
String get title {
switch (this) {
case BottomTabsEnum.home:
return 'Home';
case BottomTabsEnum.video:
return 'Explore';
case BottomTabsEnum.shop:
return 'Shop';
case BottomTabsEnum.profile:
return 'Profile';
}
}
String get iconAssetLocation {
switch (this) {
case BottomTabsEnum.home:
return Assets.imagesChefCooking;
case BottomTabsEnum.video:
return Assets.imagesVideoCamera;
case BottomTabsEnum.shop:
return Assets.imagesOnlinePayment;
case BottomTabsEnum.profile:
return Assets.imagesWomanUsingPhone;
}
}
Color get bgColor {
switch (this) {
case BottomTabsEnum.home:
return const Color(0xFFEDC35D);
case BottomTabsEnum.video:
return const Color(0xFFF59273);
case BottomTabsEnum.shop:
return const Color(0xFFE1EFEE);
case BottomTabsEnum.profile:
return const Color(0xFFF2BBBB);
}
}
onClicked() {
switch (this) {
case BottomTabsEnum.home:
///Handle onClick
break;
case BottomTabsEnum.video:
///Handle onClick
break;
case BottomTabsEnum.shop:
///Handle onClick
break;
case BottomTabsEnum.profile:
///Handle onClick
break;
}
}
}Ejecutar acciones (onClick) directamente desde el enum
La parte más interesante: conectar comportamiento:
extension BottomTabsActions on BottomTabEnum {
void onClicked() {
switch (this) {
case BottomTabEnum.home:
// Acción pestaña home
break;
case BottomTabEnum.video:
// Acción pestaña video
break;
case BottomTabEnum.shop:
// Acción pestaña shop
break;
case BottomTabEnum.profile:
// Acción pestaña profile
break;
}
}
}Hemos creado diferentes métodos de extensión para nuestro Enum. Esto simplificará nuestro código en gran medida.
Usemos nuestros Enums en una app en Flutter
///To get the title
Text(BottomTabsEnum.video.title);
///To get the icon asset location
Image.asset(
BottomTabsEnum.home.iconAssetLocation,
width: 18,
height: 18,
);
///To get the bg color
Text(
'Cool extension',
style: TextStyle(
color: BottomTabsEnum.profile.bgColor,
fontSize: 14,
height: 1,
fontWeight: FontWeight.w600,
),
);
///To perform click action
GestureDetector(
onTap: () {
BottomTabsEnum.home.onClicked();
},
child: child,
);Casos de uso recomendados
- Usa enhanced enums cuando:
- necesitas atributos internos con estado
- quieres definir constructores
- el enum debe comportarse como una clase ligera
- Usa extensiones cuando:
- el enum ya existe y quieres sumar lógica sin reescribirlo
- buscas agrupar comportamiento relacionado con UI
- quieres mantener el enum lo más simple posible
- Combinarlos para obtener lo mejor de ambos
- Nada impide usar enhanced enums más extensiones.
Por ejemplo: puedes tener atributos internos y agregar métodos UI via extensión.
Mejores prácticas para trabajar con enums extendidos en Flutter
Organización del código
- Mantén las extensiones en archivos separados (bottom_tab_ext.dart).
- Usa nombres descriptivos: BottomTabsExt, BottomTabsActions.
Evitar switch repetidos
Un switch debe existir solo en la extensión.
Los widgets jamás deberían tener que preguntar: “si es home, muestra esto”.
Esto me ahorró bugs donde un cambio en una pestaña se olvidaba en otro widget.
Consejos para escalar el patrón en apps grandes
- Si el enum crece demasiado, divide en varias extensiones temáticas.
- Usa enhanced enums cuando requieras más de 2–3 propiedades internas.
- Si la acción de onClick se vuelve compleja, delega a un servicio.
Preguntas frecuentes sobre enums con extensiones en Flutter
- ¿Puedo agregar métodos a un enum existente sin modificarlo?
- Sí. Las extensiones están pensadas justamente para eso.
- ¿Es buena práctica usar enums para gestionar UI?
- Totalmente. De hecho, mejora la coherencia visual.
- ¿Las extensiones reemplazan las clases?
- No siempre, pero en patrones repetitivos sí son más ligeras.
- ¿Se pueden mezclar enhanced enums y extensiones?
- Sí, y es una combinación muy poderosa.
Conclusión
Los enums con extensiones son una de las formas más elegantes y limpias de estructurar UI y lógica en Flutter. Te permiten mantener un solo punto de verdad, escribir menos código repetido y mejorar la escalabilidad de tu app.
En mi caso, pasar mis pestañas inferiores a este patrón transformó varios archivos caóticos en código expresivo y mucho más fácil de mantener. Si trabajas con navegación, estados, acciones o configuraciones de UI, es un patrón que definitivamente deberías adoptar.
Acepto recibir anuncios de interes sobre este Blog.
Aprende a potenciar los enums con extensiones en Flutter para limpiar tu código y eliminar switch repetitivos. Descubre cómo centralizar títulos, iconos, colores y acciones en un solo lugar para mejorar la arquitectura y escalabilidad de tu app con este patrón esencial.