Ravi Pai.16 de mayo de 2025. MEDIUM
Cuando empecé con Flutter, mi código era un poco caótico: mucha repetición repetida, widgets profundamente anidados y llamadas interminables, como dispersas por todas partes. Pensaba que escribir código limpio y fácil de mantener consistía simplemente en conocer los widgets y patrones adecuados, pero me equivocaba.
Un día, me topé con un pequeño fragmento de código que usaba métodos de extensión . Fue una revelación. Las extensiones permiten añadir nuevas funciones a las clases existentes sin reescribirlas, lo que hace que el código sea mucho más legible, reutilizable y elegante. ¡Puaj!, me emocioné al usar extensiones en todas partes.
Desde entonces, he adoptado las extensiones como parte central de mi desarrollo de Flutter.
1. Seguimiento del tiempo de ejecución en el futuro
¿Necesitas medir la duración de un futuro? Esta práctica extensión registra el tiempo de ejecución con una sola línea, ideal para crear perfiles rápidamente.
extensión ExFuture<T> en Future<T> {
Future<T> trackTime( String label) async { inicio
final = DateTime .now(); resultado
final = await this ; fin
final = DateTime .now(); duración
final = end.difference(inicio);
print ( ' $label completado en ${duration.inMilliseconds} ms' );
devolver resultado;
}
}
Uso
await fetchData (). trackTime ('Obtener datos');
2. OnTap Wrapper para cualquier widget:
Hacer que los widgets sean táctiles en Flutter suele implicar envolverlos en un GestureDetector una y otra vez. Es repetitivo y sobrecarga el árbol de widgets. Con una simple extensión, puedes convertir cualquier widget en táctil en una sola línea. Las interacciones táctiles ahora son mucho más fáciles.
extensión ExTapExtension en el widget {
Widget onTap(VoidCallback onTap) =>
GestureDetector(
onTap: onTap,
comportamiento: HitTestBehavior.opaque,
hijo: this ,
);
}
Uso
Icon(Icons.info).onTap(() => print ( '¡Tocado!' ))
3. Extensiones iterables: mapeo con índice:
¿Alguna vez has intentado mapear una lista y también necesitas el índice? De repente, te ves obligado a manipular contadores y la cosa se complica rápidamente. Con una sencilla extensión, puedes añadir un método mapIndexed limpio y elegante: se acabó la indexación manual, solo código legible y de alto nivel.
extensión ExIndexedMap < E > en Iterable < E > {
Iterable < T > mapIndexed < T >( Función T( int índice, E elemento ) f) {
var i = 0 ;
devolver mapa((e) => f(i++, e));
}
}
Uso
anyList.mapIndexed((i, elemento) => Texto( ' $i : $elemento ' ))
4. Acceso rápido a las métricas de pantalla:
Obtener el tamaño de la pantalla y las métricas del dispositivo es muy común en Flutter, pero escribir MediaQuery.of(context).sizeconstantemente puede resultar tedioso. Con una extensión sencilla, puedes obtener el ancho, la altura y más información de la pantalla directamente desde [nombre del archivo BuildContext], lo que hace que tu código de diseño sea más claro y fácil de leer.
extensión ExScreenMetrics en BuildContext {
MediaQueryData obtener mq => MediaQuery.of( this );
doble obtener ancho => mq.size.width;
doble obtener alto => mq.size.height;
}
Uso
contexto. altura * 0.3
5. Acceso rápido al tema:
¿Cansado de escribir Theme.of(context)todo el tiempo? Mejora tu código extendiendo el código BuildContextpara acceder rápidamente a las propiedades del tema.
extensión Extheme en BuildContext {
ThemeData obtener tema => Theme.of( this );
TextTheme obtener textTheme => theme.textTheme;
ColorScheme obtener colorScheme => theme.colorScheme;
// más si quieres
}
Uso
Texto (
'¡Hola, Flutter!' ,
estilo : context.textTheme.headlineSmall,
)
Menos código repetitivo y más legible. Esta pequeña extensión fomenta el uso consistente del sistema de diseño de tu aplicación.
¿Te gustaron estas extensiones? ¡Hay muchas más!
Descubre mi paquete de Flutter 👉 ultimate_extension en pub.dev: repleto de extensiones prácticas y reutilizables para que tu código sea más limpio e inteligente.
Si esto te ayudó, ¡compártelo con un compañero desarrollador!¿Tienes algún truco genial para extensiones? Déjalo en los comentarios.
