Ruta de aprendizaje para crear aplicaciones móviles con Flutter - Parte 9:
Flutter - Tipos de widgets
En Flutter, los Widgets son bloques de construcción fundamentales para crear interfaces de usuario. Representan elementos visuales y funcionales, como botones, cajas de texto y elementos de diseño. Estos nos sirven para definir como se verá y como se va a comportar la interfaz de nuestra aplicación. Estos widgets se pueden combinar y anidar para formar la estructura visual de la aplicación, permitiendo así construir interfaces atractivas y dinámicas de manera sencilla y rápida. Estos widgets son reutilizable, lo que hace que la creación de las aplicaciones sea más rápida.
Viéndolo de una forma más entendible en Flutter es como si tuviéramos LEGOS, podemos ir armando nuestra interface pieza por pieza, después unirlos y cada pieza sería un widget, veámoslo gráficamente:
Como podemos ver en este ejemplo tenemos la estructura de una aplicación sencilla, donde tenemos una barra con el nombre de la aplicación en la parte superior, abajo tenemos una imagen redondeada junto con un texto, seguida de un listado y un botón flotante, cada una de estas partes puede ser un widget, ya sea widget Custom, widget de Flutter, widget de Material o widget de Cupertino, ahora veamos que es cada uno de estos mencionados.
Tipos de Widgets:
Custom:
Estos tipos de widgets, son los que puedes personalizar a gusto y crear desde cero, puedes crear y modificar su apariencia conforme a tus necesidades, solo siguiendo el estándar para la creación del widget, puedes crear botones, campos de texto que cubran específicamente tu necesidad sin utilizar los que nos proporciona Flutter por defecto, puedes controlar si reciben parámetros, colores e incluso su comportamiento.
Material Widgets:
Los widgets de material son un conjunto de widgets de Flutter que implementan la guía de diseño de Material Design creada por Google. Están creados para dar una apariencia uniforme tanto en dispositivos Android como iOS, en ellos podemos encontrar bastantes como son:
Widgets de acción como botones, Widgets de comunicación que podrían ser diálogos o snackbar para dar feedback al usuario, tenemos contenedores de navegación, con todos estos fácilmente podemos crear una aplicación sin necesidad de estar creando nuestros widgets desde cero.
Te dejo el link donde puedes consultar los widgets existentes dentro de Flutter, para que te des una mayor idea de todo lo que puedes lograr con estos widgets.
https://docs.flutter.dev/ui/widgets/material
Cupertino Widgets:
Como hemos ido hablando a lo largo de los diferentes posts, te he dicho que Flutter permite crear aplicaciones tanto para Android como para iOS, en la parte de diseño de igual forma no lo dejo fuera, con los widgets de Cupertino podemos crear interfaces con la misma guía de diseño de Apple con su estilo Cupertino.
Estos widgets dan una apariencia a los componentes nativos creados por Apple y al igual que los componentes de Material design, podemos encontrar distintos tipos de widgets: De acción, contenedores, alertas, todo para poder tener tu aplicación lo más parecida a lo nativo posible.
Te dejo link sobre los widgets de Cupertino:
https://docs.flutter.dev/ui/widgets/cupertino
Depende a tus necesidades de diseño, pero con Flutter incluso puedes detectar qué dispositivo está utilizando y así adaptar tu aplicación para que se vea en Android con Material Design y en iOS con Cupertino.
Por último: estoy intentando crear comunidad, te agradecería que me siguieras en mis redes sociales y estés atento a mi canal de YouTube, pronto estaré subiendo esta serie en formato video, también dejo el link de mi Discord donde estaré publicando, cada que suba contenido nuevo, al igual podrías suscribirte a mi newsletter, te dejo mis links aquí abajo: