6. Widgets en Flutter

Los widgets son los elementos fundamentales de una interfaz de usuario (UI) en Flutter. Son los componentes básicos a partir de los cuales Flutter construye su interfaz de usuario. Son inmutables y se describen en términos de otros widgets de nivel inferior. Vienen en dos variedades: StatelessWidget y StatefulWidget.

Un StatelessWidget es un widget que describe parte de la interfaz de usuario que puede depender de la configuración pero no del estado. En otras palabras, describe cómo se ve la interfaz de usuario dada su configuración actual. StatelessWidget es inmutable, lo que significa que una vez establecidos sus valores, no se pueden cambiar.

Por otro lado, un StatefulWidget es dinámico. El estado es información que (1) se puede leer de forma sincrónica cuando se crea el widget y (2) puede cambiar durante la vida útil del widget. Es una implementación de un widget que puede cambiar con el tiempo. Por ejemplo, si un widget tiene un contador que aumenta cada vez que el usuario toca un botón, el valor del contador es el estado.

En Flutter, casi todo es un widget. Esto incluye alineación, relleno, diseño, etc. Siguen una filosofía de composición muy sólida, lo que significa que puedes combinar varios widgets pequeños para formar un widget más complejo. Los widgets están organizados en un árbol de widgets.

Hay muchos tipos de widgets en Flutter, pero comúnmente se dividen en dos tipos: widgets de diseño y widgets de interfaz de usuario. Los widgets de diseño como Contenedor, Relleno, Columna, Fila, etc. no proporcionan una interfaz de usuario visualmente perceptible. En cambio, controlan cómo se organizan o representan los widgets secundarios en la aplicación.

Los widgets de interfaz de usuario como Text, RaisedButton, FlatButton, etc. proporcionan una interfaz de usuario visualmente perceptible. A menudo se utilizan junto con widgets de diseño para crear la estructura de la aplicación y la interfaz de usuario.

Los widgets de Flutter son muy potentes y te permiten crear interfaces de usuario complejas y hermosas con poco código. Son la base de todas las aplicaciones de Flutter y son la forma principal de crear y organizar la interfaz de usuario.

Para crear un widget en Flutter, necesitas definir una nueva clase que extienda StatelessWidget o StatefulWidget. A continuación, debes implementar el método de compilación, que se llama cada vez que Flutter necesita representar el widget. El método de compilación debería devolver un nuevo objeto widget que Flutter puede representar en la pantalla.

Un ejemplo de un widget simple sería un widget de texto. Para crear un widget de texto puedes hacer lo siguiente:

clase MyTextWidget extiende StatelessWidget {
  @anular
  Construcción de widgets (contexto BuildContext) {
    return Texto('¡Hola, Flutter!');
  }
}

Este es un ejemplo muy simple, pero muestra cómo se crean los widgets en Flutter. Defines una nueva clase que extiende StatelessWidget, implementas el método de compilación y devuelves un nuevo widget de texto que Flutter puede representar en la pantalla.

En resumen, los widgets son la base de todas las aplicaciones de Flutter. Son potentes y le permiten crear interfaces de usuario hermosas y complejas con poco código. Si recién estás comenzando a aprender Flutter, te recomiendo que dediques algo de tiempo a comprender cómo funcionan los widgets, ya que son una parte fundamental de Flutter.

Siguiente página del libro electrónico gratuito:

73Widgets en Flutter: Introducción a Flutter y Dart

3 minutos