Widgets Esenciales

En este artículo, vamos a hacer un poco de teoría porque también es importante para poder conocer de forma específica cada uno de los elementos que podrías utilizar y cuando hacerlo, así que, te explicaré de manera resumida alguno de los Widgets Esenciales que puedes utilizar para el desarrollo de tu aplicación móvil utilizando Flutter.

A continuación, nombraré las categorías que existen de los Widgets, más adelante explicaré aquellos que se utilizan con más frecuencia en el desarrollo de aplicaciones móviles hídridas de Flutter.

• Básicos.
• Componentes Material.
• Cupertino (Widgets estilo iOS).
• Layout.
• Texto.
• Assets, Imágenes e Íconos.
• Input.
• Animación y Movimiento.
• Modelos de Interacción.
• Estilos.
• Pintado y efectos.
• Asincronía.
• Scrolling.
• Accesibilidad.

Empezaremos por los Widgets Básicos, acá también puedes encontrar mucha más información al respecto (página oficial):

El widget Container, contiene o redondea elemento secundario con relleno, y luego aplica restricciones adicionales del relleno. En resumen: El contenedor intenta, en orden: respetar la alineación, adaptarse al tamaño del elemento secundario, respetar las restricciones ancho (width), alto (height) y expandirse para adaptarse al elemento principal, para ser lo más pequeño posible.

El widget Row, para poder expandir el elemento secundario deberás utilizar un widget Extend, este elemento no se desplaza (hay que tener bastante cuidado al colocar demasiados child dentro de este elemento, puede que no quepe). Si tiene una línea de widgets y desea que se puedan desplazar si no hay espacio suficiente, considere usar ListView todo ello de forma horizontal no olvidar.

El widget Column, de similar modo que el Row, este elemento debe usar extend para poder expandirse en el elemento secundario. Si tiene una línea de widgets y desea que se puedan desplazar si no hay espacio suficiente, considere usar ListView todo ello de forma vertical no olvidar.

El widget Image, proporciona varios constructores para mostrar diferentes tipos de imágenes para mayor comodidad. Se admiten los siguientes formatos de imagen: JPEG, PNG, GIF, GIF animado, WebP, WebP animado, BMP y WBMP. La plataforma subyacente puede admitir formatos adicionales. Flutter intentará llamar a la API de la plataforma para decodificar formatos no reconocidos, y si la API de la plataforma admite la decodificación de la imagen, Flutter podrá renderizarla.

El widget Text, muestra una cadena de texto con un solo estilo. La cadena puede dividirse en varias líneas o puede mostrarse en la misma línea según las restricciones de diseño. Para hacer que Text reaccione a los eventos táctiles, envuélvalo en un widget GestureDetector con un controlador GestureDetector.onTap.

El widget Icon, gráfico dibujado con un glifo de una fuente descrita en un IconData, como los IconData predefinidos del material en los iconos. Los iconos no son interactivos. Para un ícono interactivo, considere el IconButton del material. Debe haber un widget de Direccionalidad ambiental al usar Icon. Por lo general, WidgetsApp o MaterialApp lo introducen automáticamente.

El widget Scaffold, esta clase proporciona API para mostrar cajones y sábanas inferiores. Se expandirá para llenar el espacio disponible. Eso generalmente significa que ocupará toda su ventana o pantalla del dispositivo. Cuando aparece el teclado del dispositivo, el MediaQueryData.viewInsets del widget de MediaQuery antecesor de Scaffold cambia y Scaffold se reconstruye.

El widget AppBar, consiste en una barra de herramientas y potencialmente otros widgets, como TabBar y FlexibleSpaceBar. Las barras de aplicaciones normalmente exponen una o más acciones comunes con IconButtons que, opcionalmente, van seguidas de un PopupMenuButton para operaciones menos comunes (a veces denominadas "menú de desbordamiento"). AppBar inserta su contenido en función del relleno de MediaQuery ambiental, para evitar intrusiones en la interfaz de usuario del sistema. Scaffold se encarga de ello cuando se usa en la propiedad Scaffold.appBar. Al animar una barra de aplicaciones, los cambios inesperados de MediaQuery (como es común en las animaciones de Hero) pueden hacer que el contenido salte repentinamente. Envuelva AppBar en un widget de MediaQuery y ajuste su relleno para que la animación sea fluida.

Fuente: Flutter dev oficial.

Como ya mencioné anteriormente, la teoría es muy importante también para conocer en que momento debes aplicar ciertos widget según el diseño esperado.

No olvides compartir en tus redes y tu comentario en la parte de abajo.