3.12. Conceptos básicos de Dart: widgets y diseño

Los widgets y el diseño son conceptos clave cuando se trata de desarrollar aplicaciones usando Flutter y Dart. Son los componentes básicos de las interfaces de usuario y son responsables de cómo se organizan y muestran los elementos de la interfaz de usuario en la pantalla. Profundicemos en estos conceptos y comprendamos cómo funcionan en Flutter y Dart.

Aparatos

En Flutter, todo es un widget. Los widgets describen cómo debería verse su interfaz de usuario. Cada widget es una clase Dart inmutable que describe parte del diseño o la interfaz de usuario. Hay dos tipos principales de widgets en Flutter: widgets sin estado y widgets con estado.

Los widgets sin estado son aquellos que describen parte de la interfaz de usuario que se puede determinar en función de la configuración y la construcción. Son inmutables, lo que significa que una vez construidos, no se pueden cambiar. Cualquier cambio en la interfaz de usuario requiere la creación de un nuevo widget.

Los widgets con estado, por otro lado, son dinámicos. Pueden cambiar con el tiempo, por ejemplo en respuesta a la interacción del usuario o cuando se actualiza un servicio de datos. Los widgets con estado son mutables, lo que significa que se pueden cambiar después de su construcción.

Diseño

El diseño es el proceso de organizar los widgets en la pantalla. En Flutter, usas widgets de diseño para organizar otros widgets. Hay varios widgets de diseño disponibles en Flutter, como Fila, Columna, Pila, Contenedor, etc.

Fila y Columna son los widgets de diseño más comunes. Le permiten organizar sus widgets en una fila horizontal (Fila) o vertical (Columna). Cada fila o columna admite hasta tres widgets secundarios: un widget principal y dos widgets secundarios que se colocan antes y después del widget principal.

Apilar le permite superponer varios widgets uno encima del otro. Por ejemplo, puedes usar una pila para colocar texto sobre una imagen. El primer hijo de una pila se coloca en la parte inferior y los hijos siguientes se superponen en el orden en que se agregan.

El contenedor es otro widget de diseño común. Le permite crear un rectángulo visual que puede contener un solo niño. Además, el Contenedor puede tener decoración, como un fondo, un borde o una sombra. También puede tener márgenes, relleno y restricciones dimensionales.

Creación de una interfaz de usuario con widgets y diseño

Para crear una interfaz de usuario en Flutter, combinas widgets y diseño. Comienza con un widget de diseño y le agrega otros widgets. Por ejemplo, puede comenzar con un Contenedor y agregarle una Fila. Luego puede agregar otros widgets a la fila, como Texto, Icono y Botón elevado.

Los widgets están anidados para crear la interfaz de usuario. El widget de diseño externo (por ejemplo, Contenedor) es el padre de los widgets internos (por ejemplo, Fila, Texto, Icono, Botón elevado). El widget principal controla la ubicación de sus widgets secundarios, mientras que los widgets secundarios definen su propia apariencia.

En Flutter, construyes la interfaz de usuario de forma declarativa. Esto significa que usted describe la interfaz de usuario en términos de su estado final y Flutter se encarga de actualizar la interfaz de usuario para que coincida con ese estado. Esto contrasta con el enfoque imperativo, donde es necesario especificar pasos para actualizar la interfaz de usuario.

En resumen, los widgets y el diseño son las piedras angulares de la creación de interfaces de usuario en Flutter. Con una sólida comprensión de estos conceptos, puedes crear aplicaciones complejas y atractivas con Flutter y Dart.

Siguiente página del libro electrónico gratuito:

31Conceptos básicos de Dart: gestión estatal

3 minutos