En Flutter todo es un widget, imagina cada widget como un pequeño bloque de Lego que vas a juntar con otros bloques para construir literal cualquier aplicación.
Cada widget tiene la cualidad de poderlo configurar internamente para definir cómo se dibujará en la pantalla, su contenido, sus atributos y cuál será su estado en cada momento de ciclo de vida.
Tipos de widgets
En Flutter tenemos dos tipos de widgets, los widget sin estado StatelessWidget y los widgets con estado StatefulWidget.
StatelessWidget – Son los elementos con información constante (o estática) y que no responden a interacciones con el usuario: Texto, Icono, Contenedores, Filas, Columnas, etc.
StatefulWidget – Son aquellos elementos que responden a interacciones con el usuario, los cuales pueden modificar el contenido, atributos o diseño del mismo Widget o de otros Widgets. Generalmente mantienen su estado durante el ciclo de vida de la aplicación. Ejemplos de este tipo pueden ser botones, cajas de texto, formularios, etc.
Categorías de los widgets
Flutter ha catalogado los widgets en 14 categorías principales, están divididos en base a la funcionalidad que proveen al construir la Aplicación.
- Accessibility (Accesibilidad): Widgets que hacen que nuestra app sea más accesible para que cualquier persona la pueda utilizar sin importar sus limitaciones físicas o de salud.
- Animation and Motion (Animación y movimiento): Estos widgets nos ayudan a añadir animaciones a otros widgets.
- Assets, Images, and Icons (Recursos, imágenes e íconos): Administración de recursos, mostrar imágenes y mostrar íconos.
- Async (Asíncronos): Proveen funcionalidad asíncrona para la aplicación. La programación asíncrona nos da la capacidad de “diferir” la ejecución de una función a la espera de que se complete una operación, y así evitar bloquear la ejecución hasta que se haya completado la tarea en cuestión para agilizar tiempos y evitar congelamientos en pantalla.
- Basics (Básicos): Este es el paquete de widgets que son absolutamente necesarios para el desarrollo de cualquier aplicación en flutter.
- Cupertino: Son los widgets que están basados en plataformas iOS.
- Input (Entrada): Widgets que se utilizan para capturar eventos del usuario.
- Interaction and Models (Interacción y Modelos): Encargados de responder a taps en la pantalla y navegación hacia otras vistas.
- Layout (Diseño): Sirven para dar y mantener orden mediante columnas, filas y contenedores.
- Material components (Componentes Material): Widgets visuales de comportamiento que respetan y siguen las líneas de Diseño Material.
- Painting and effects (Dibujo y efectos): Widgets que sirven para aplicar efectos visuales a otros widgets.
- Scrolling (Arrastre): Widgets que tienen la habilidad de ser scrolleables, esto quiere decir que pueden contener más elementos de los que originalmente se ven, que se van descubriendo al arrastrar horizontal o verticalmente el widget.
- Styling (Estilo): Widgets que nos ayudan a crear un tema para la app y manejar la adaptabiliad a las diferentes pantallas.
- Text (Texto): Sirven para mostrar texto en la pantalla y darle estilo.
Puedes explorar los widgets por ti mismo en la siguiente liga: https://flutter.dev/docs/development/ui/widgets
En este curso no vamos a revisar cada uno de los widgets disponibles en cada categoría debido a que son muchísimos y terminaremos teniendo un libro de miles de páginas, lo cual cambiaría la esencia de ser una guía rápida, esencial y efectiva para aprender a programar en Flutter. Sin embargo, lo que iremos aprendiendo en los siguientes post nos darán las bases para que puedas explorar por ti mismo cada uno de los widgets e implementarlos en tus aplicaciones.
¿Te está gustando este curso? Aquí hay más temas que otras personas están viendo en este momento.