FlutterFlow tiene cientos de widgets disponibles, pero dominar los 10 más importantes te permitirá construir prácticamente cualquier interfaz. En este artículo te explico para qué sirve cada uno y cuándo usarlo.
1. Column y Row — El esqueleto de tu UI
Son los widgets de layout fundamentales. Column organiza elementos verticalmente y Row horizontalmente. Todo en FlutterFlow vive dentro de Columns y Rows. Dominar su combinación y las propiedades de alineación (mainAxisAlignment, crossAxisAlignment) es esencial.
2. Container — El widget más versátil
Un Container puede ser un botón personalizado, una card, un fondo con gradiente o un divisor. Tiene propiedades de padding, margin, color, borde, sombra, radio y tamaño. Si necesitas "una caja con estilo", Container es tu respuesta.
3. Stack — Para capas superpuestas
Stack permite superponer widgets uno encima del otro. Es ideal para crear overlays, badges sobre imágenes, botones flotantes posicionados sobre contenido, y cualquier diseño que necesite capas.
4. ListView — Para listas dinámicas
ListView es el widget para mostrar colecciones de datos: una lista de productos, mensajes, usuarios o cualquier array. Se conecta directamente a tus colecciones de Firebase o Supabase y genera un item por cada registro automáticamente.
- ListView vertical: el scroll normal de arriba a abajo
- ListView horizontal: carrusel de cards
- GridView: cuadrícula de items (perfecto para catálogos)
5. PageView — Para pantallas deslizables
PageView crea un carrusel de pantallas completas que el usuario puede deslizar horizontalmente. Perfecto para onboarding, tutoriales, galerías de fotos y cualquier flujo de múltiples pasos.
6. ConditionalBuilder — Lógica visual
Muestra o esconde contenido basándose en una condición. Por ejemplo: mostrar un botón solo si el usuario está logueado, o mostrar un mensaje de "sin resultados" solo si la lista está vacía. Es el if/else visual de FlutterFlow.
7. TextField — Input del usuario
El widget para recibir texto del usuario. Tiene validación built-in, tipos de teclado (email, número, contraseña), contadores de caracteres y estados de error. Siempre debe conectarse a un State Variable para guardar el valor.
8. Image — Imágenes desde cualquier fuente
El widget Image carga imágenes desde URL remota, assets locales o Supabase/Firebase Storage. Soporta varios tipos de ajuste (cover, contain, fill) y tiene un placeholder mientras carga. Muy importante para apps con contenido visual.
9. AnimatedContainer — Para animaciones simples
Igual que Container pero con la capacidad de animar cambios de tamaño, color, bordes y posición de forma fluida. Cuando cambias cualquier propiedad de un AnimatedContainer, FlutterFlow genera la animación automáticamente con la duración que configures.
10. Custom Widget — Sin límites
Cuando ningún widget built-in satisface tu necesidad, puedes crear un Custom Widget escribiendo código Dart. Esto es lo que hace FlutterFlow un Low/No Code híbrido: el 90% visual, el 10% código cuando lo necesitas.
Los Custom Widgets más comunes son: mapas interactivos, gráficas, reproductores de video personalizados y componentes de firma digital.
Dominar estos 10 widgets te dará la base para construir cualquier app. Empieza con Column, Row y Container, luego añade ListView para datos dinámicos, y gradualmente incorpora los demás según lo necesites.
Aprende todos estos widgets en profundidad
En nuestro curso de FlutterFlow en Udemy cubrimos todos estos widgets con proyectos reales de principio a fin.
Ver curso en Udemy →