¿Qué es un Widget?
Para explicarlo brevemente, un widget en Flutter es una unidad básica de la interfaz de usuario. Todo lo que ves en la pantalla de una aplicación creada con Flutter se llama «widget». Pueden ser elementos muy simples, como un botón o un bloque de texto, o más complejos, como una página completa compuesta por varios widgets.
Los widgets sirven, de alguna manera, como un modelo para el dispositivo, indicándole cómo mostrar un elemento en la pantalla. Por ejemplo, el widget ‘Text’ le explica qué es un bloque de texto y cómo debe presentarse. Especifica no solo el contenido escrito, sino también el tamaño de las letras, la fuente utilizada y dónde debe aparecer.
Flutter cuenta con toda una biblioteca de widgets. Estos son los que te permitirán construir el diseño visual y las interacciones de tu aplicación, además de asegurarse de que se muestre correctamente en diferentes tipos de pantallas.
¿Cuál es la diferencia entre un widget y una clase?
Si ya has programado un poco con Flutter o has leído mis guías, seguramente te has encontrado con el término «Clase». Una clase en programación es como un plano o un modelo para crear objetos que luego podrás manipular. Define propiedades (o atributos) y métodos (o funciones) que los objetos creados a partir de esa clase tendrán. Por ejemplo, una clase Coche podría tener propiedades como color y marca, y métodos como arrancar() y frenar().
Este concepto está bastante relacionado con el de los widgets, aunque presentan una diferencia notable:
- Los widgets son modelos para los elementos visuales que compondrán la interfaz de usuario.
- Las clases son modelos para objetos que podrás manipular en tu aplicación, como usuarios, listas, etc.
Los tipos de widgets en Flutter
Como expliqué al inicio de este artículo, todos los elementos que utilizarás para construir tu aplicación con Flutter se denominan widgets. En la documentación oficial, estos están divididos en varias categorías. Por ejemplo, hay widgets para:
- Construir el diseño y la lógica de la app.
- Organizar elementos en columnas, filas, cuadrículas, etc.
- Recoger información ingresada por el usuario.
- Añadir interacciones.
- Crear elementos animados.
- Implementar desplazamiento (scroll).
- Añadir imágenes, íconos, gifs, música, etc.
- Añadir texto.
- Crear listas (ListView).
- Dar estilo a diversos widgets.
- Recuperar información de una base de datos y usarla para construir la app, entre otros.
Poco a poco, escribiré guías en español sobre los widgets más importantes. Mientras tanto, puedes utilizar la documentación oficial de Flutter, que aunque puede ser un poco compleja, te permitirá descubrir lo que ofrece esta biblioteca. También puedes consultar mi artículo sobre los widgets básicos, donde podrás conocer los elementos más utilizados para construir una aplicación y comenzar tu proyecto rápidamente.
Acceder a los widgets de Flutter
Para acceder a la biblioteca de widgets que ofrece Flutter, debes importarla en todos tus archivos Dart. Por lo tanto, todos los documentos donde escribas tu código deben comenzar con:
import 'package:flutter/material.dart';Esta línea te permite importar la mayoría de los widgets y métodos nativos de Flutter. Otros métodos podrán importarse más adelante, según tus necesidades específicas, incluyendo paquetes adicionales.
Stateless vs Stateful
Algo muy importante que debes entender al hablar de widgets en Flutter es la diferencia entre los widgets sin estado (Stateless) y con estado (Stateful). Este concepto puede ser complicado al principio, así que vamos a empezar explicando cómo funciona una aplicación Flutter.
Cuando lanzas tu aplicación en un teléfono, el código se ejecuta comenzando desde el inicio de tu «árbol de widgets». Primero se construye la Material App (una especie de página en blanco), luego se añaden los objetos que están dentro, y los objetos dentro de esos objetos, hasta obtener el resultado final de tu aplicación. Por ejemplo, así podría verse un árbol de widgets simple:
Ahora, imaginemos que deseas agregar un elemento dinámico a tu aplicación, como una checkbox (casilla de verificación). Esta checkbox debe cambiar su estado cuando haces clic en ella (marcada o desmarcada). Esto cambia el estado de tu widget en el árbol de widgets.
Aquí es donde reside la diferencia entre Stateless y Stateful. En lugar de buscar qué widget debe ser modificado, Flutter simplemente reconstruye todo el árbol de widgets desde el principio, con el widget actualizado. Pero para que esto suceda, ese elemento debe ser de tipo Stateful, de lo contrario, el cambio no ocurrirá.
Para simplificar:
- Los widgets Stateless se utilizan para crear elementos que no cambiarán durante el uso de la aplicación (como un botón).
- Los widgets Stateful se utilizan para crear elementos que pueden cambiar durante el uso de la aplicación (como una lista de compras).
¿Cuándo usar widgets Stateless y Stateful?
Los widgets Stateless y Stateful tienen una característica particular en comparación con otros widgets, ya que no muestran algo específico como lo haría un widget de texto (Text) o un ícono (Icon). Estos widgets permiten definir la estructura o disposición de otros widgets que sí mostrarán algo en la pantalla.
Un widget Stateless puede utilizarse para definir un componente reutilizable o una parte estática de tu interfaz de usuario. Por ejemplo, puedes crear un widget Stateless llamado MyButton que define el estilo y el comportamiento de un botón, sin contener elementos que cambien de estado. Este widget se podría reutilizar en varios lugares de tu aplicación para mostrar botones similares.
El widget Stateful, por otro lado, se utiliza cuando necesitas que tu interfaz de usuario reaccione y se actualice en función de los cambios de estado o las interacciones del usuario. Por ejemplo, podrías usar un widget Stateful para crear un formulario en el que los usuarios ingresen información. Este widget mantendría los datos ingresados en tiempo real y podría adaptar su forma según las respuestas.
En resumen, estos dos tipos de widgets no muestran directamente algo en la pantalla, sino que sirven como una estructura para otros widgets que sí muestran contenido.
Declarar un widget Stateless
Aquí tienes cómo declarar un widget de tipo Stateless:
class MyExample extends StatelessWidget {
const MyExample({super.key});
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}Aquí, MyExample es el nombre que le das a tu widget. Cada widget Stateless debe tener un nombre único, lo que permite reutilizarlo en varios lugares de tu código simplemente llamándolo por su nombre.
Declarar un widget Stateful
El widget Stateful es un poco más largo de declarar, ya que se construye en dos partes:
class MySecondExample extends StatefulWidget {
const MySecondExample({super.key});
@override
State<MySecondExample> createState() => _MySecondExampleState();
}
class _MySecondExampleState extends State<MySecondExample> {
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}Cambiar rápidamente el estado de un widget
Para cambiar rápidamente un widget Stateless a Stateful y viceversa, coloca el cursor del ratón sobre él y haz clic. Luego presiona Comando + D. Aparecerá una pequeña bombilla en la que puedes hacer clic. Visual Studio te ofrecerá la opción de cambiar automáticamente el estado de tu widget, sin necesidad de reescribir toda la declaración.
Conclusión
Este artículo sobre los widgets cierra la introducción a las bases de Flutter. Ahora deberías ser capaz de:
- Instalar el SDK de Flutter y configurar tu entorno de desarrollo, tanto en Mac como en Windows.
- Crear y manipular variables como:
- Los Strings.
- Los Int y doubles.
- Los Booleanos.
- Las Listas.
- Las Maps.
- Las Fechas y horas.
- Los URIs.
- Usar operadores para interactuar con tus variables.
- Realizar acciones diferentes según condiciones.
- Implementar bucles para realizar varias veces una acción.
- Entender la utilidad de los widgets en Flutter y cómo te permitirán programar tu aplicación.
Si te sientes listo para seguir adelante, el siguiente paso será empezar a programar tu primera aplicación. ¿Por qué no usar el código base proporcionado por Flutter y practicar con él?
