Widget — qué es, tipos y composición en Flutter

Qué es un Widget en Flutter

Un Widget en Flutter es una descripción inmutable de una parte de la interfaz de usuario. Cada Widget contiene propiedades de configuración: tamaño, color, posición, texto, manejadores de eventos y Widgets hijos. Los Widgets no se renderizan directamente — son planos (blueprints) a partir de los cuales el motor Flutter crea un RenderObject, el objeto gráfico real en la pantalla.

La filosofía de Flutter declara: "Everything is a Widget". Esto significa que no solo los elementos visibles (Text, Image, Button) son Widgets, sino también los bloques estructurales (Padding, Center, Column, Stack), los bloques de comportamiento (GestureDetector, AnimatedBuilder) e incluso la propia aplicación (MaterialApp, CupertinoApp). Este enfoque garantiza uniformidad: cualquier elemento de la pantalla se puede combinar con cualquier otro mediante un simple anidamiento.

Según Google I/O 2024 — Flutter Widgets Deep Dive, la aplicación promedio en Flutter contiene entre 200 y 1500 Widgets en un momento dado. A pesar de esta cantidad, Flutter mantiene 60 FPS incluso en dispositivos económicos gracias a las optimizaciones a nivel del motor C++ Skia/Impeller. Los Widgets son objetos ligeros (40–80 bytes cada uno), por lo que su creación no es un cuello de botella de rendimiento.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('¡Hola, Flutter!'),
        ),
      ),
    );
  }
}

Los Tres Árboles de Flutter: Widget, Element y RenderObject

Para entender cómo funciona Widget, hay que comprender la arquitectura de Flutter, que consta de tres árboles interconectados. El primero — Widget tree — describe la configuración de la UI. Es un árbol ligero que puede reconstruirse completamente en cada fotograma (el recolector de basura elimina los Widgets viejos y crea otros nuevos). Los Widgets son inmutables: si el color del texto cambia, se crea un nuevo Widget Text con el nuevo color y se descarta el anterior.

El segundo árbol — Element tree — es el vínculo entre Widget y RenderObject. Element contiene una referencia al Widget (configuración) y al RenderObject (renderizado). Cuando un Widget cambia, Flutter compara el nuevo Widget con el Element anterior y decide: actualizar el RenderObject existente (si el Widget es del mismo tipo) o crear uno nuevo (si el tipo de Widget cambió). Este proceso se llama Reconciliation y es análogo al Virtual DOM de React.

El tercer árbol — RenderObject tree — es responsable del renderizado real en la pantalla. RenderObject contiene tamaños, posiciones y métodos de pintura específicos. El motor Flutter (C++ Skia o Impeller) recorre el árbol RenderObject y renderiza cada nodo. El árbol RenderObject es el más pesado, por lo que Flutter minimiza sus cambios reutilizando RenderObjects al cambiar a Widgets del mismo tipo.

StatelessWidget vs StatefulWidget

Flutter divide los Widgets en dos tipos fundamentales: StatelessWidget y StatefulWidget. StatelessWidget es un widget que no contiene estado mutable. La apariencia de un StatelessWidget está completamente determinada por su constructor y no puede cambiar después del renderizado. Ejemplos: Text, Icon, Divider, Padding. Todas las propiedades de un StatelessWidget se declaran como final en el constructor y son de solo lectura.

Un StatefulWidget es un widget con estado mutable. Consta de dos clases: el Widget en sí (configuración inmutable, como StatelessWidget) y State (estado mutable). Separar Widget de State es una decisión arquitectónica clave en Flutter. El Widget se recrea en cada build, pero el objeto State continúa existiendo durante todo el ciclo de vida del widget en el árbol, conservando su estado.

Cuando se llama a setState(), Flutter marca el State como "sucio" y en el siguiente fotograma llama al método build() para reconstruir el subárbol. Importante: setState() no recrea el Widget en sí — solo desencadena la llamada a build() en el State existente. Esto significa que StatefulWidget puede actualizar la UI sin perder el estado de los Widgets hijos, siempre que las claves (Key) de los elementos hijos permanezcan estables.

// StatelessWidget: la apariencia nunca cambia
class GreetingWidget extends StatelessWidget {
  const GreetingWidget({super.key, required this.name});
  final String name;

  @override
  Widget build(BuildContext context) {
    return Text('Hola, $name');
  }
}

// StatefulWidget: contador con estado mutable
class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Cuenta: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Incrementar'),
        ),
      ],
    );
  }
}

Tipos de Widget: layout, painting, interactive

Todos los Widgets en Flutter se pueden dividir en tres categorías principales según su propósito funcional. Layout Widgets — se encargan de la disposición de los elementos hijos en la pantalla. Row y Column colocan hijos en línea, Stack superpone uno sobre otro, Expanded y Flexible distribuyen el espacio disponible. Los Layout Widgets no tienen representación visual propia — gestionan la posición y el tamaño de los widgets hijos.

Painting Widgets — se encargan del estilo visual. Container combina decoraciones (color, gradiente, sombra, borde) con propiedades de layout. Padding añade espaciado, DecoratedBox dibuja un fondo, Transform aplica transformaciones (rotación, escala). Los Painting Widgets son los bloques de construcción del estilo visual y a menudo se usan junto con Layout Widgets para lograr la apariencia deseada.

Interactive Widgets — manejan la entrada del usuario. GestureDetector detecta gestos (tap, swipe, pinch), InkWell añade efecto ripple de Material, TextField acepta entrada de texto, Slider y Switch proporcionan elementos de control estándar. Los Interactive Widgets elevan eventos a través de funciones callback que se pasan al constructor o se manejan mediante proveedores de estado.

Según Flutter Widget of the Week (Google, 2025), la comunidad de Flutter utiliza activamente la combinación de layout + painting + interactive Widgets para construir prácticamente cualquier interfaz. Por ejemplo, un botón: InkWell (interactive) + Container (painting) + Text (static) + Padding (layout). Esta modularidad permite reutilizar bloques estándar en diferentes contextos sin duplicación de código.

Composición de Widgets y BuildContext

La composición de Widgets es el proceso de construir la UI anidando unos Widgets dentro de otros. A diferencia de la herencia clásica (extends), donde una clase hija hereda el comportamiento del padre, Flutter utiliza agregación: cada Widget contiene otros Widgets mediante el parámetro child (para uno) o children (para varios). Este enfoque proporciona mayor flexibilidad y reutilización.

BuildContext es el segundo concepto más importante después de Widget. BuildContext es un descriptor de la posición de un Widget en el árbol de elementos. A través de BuildContext, un Widget puede acceder a widgets ancestros (Theme.of(context), MediaQuery.of(context), Navigator.of(context)). BuildContext se pasa al método build() y se utiliza para interactuar con elementos padre e hijos. Cada Widget tiene exactamente un BuildContext, que identifica de forma única su posición en el árbol.

Según Flutter Architectural Overview (Google, 2025), BuildContext es la base de InheritedWidget — un mecanismo que permite pasar datos hacia abajo por el árbol sin pasarlos explícitamente a través de constructores. Theme, MediaQuery, Navigator y Provider utilizan InheritedWidget internamente. Cualquier Widget profundamente anidado puede acceder a datos de un ancestro mediante BuildContext.dependOnInheritedWidgetOfExactType, lo que convierte a BuildContext en la clave de la arquitectura reactiva de Flutter.

// Composición de widgets mediante anidamiento
Scaffold(
  appBar: AppBar(title: const Text('Mi App')),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Bienvenido a Flutter',
          style: TextStyle(fontSize: 24)),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: () { /* nav */ },
          child: const Text('Comenzar'),
        ),
      ],
    ),
  ),
)

// Acceder a temas mediante BuildContext
Text(
  'Texto con Estilo',
  style: Theme.of(context).textTheme.headlineMedium,
)

Errores Comunes con Widgets

El primer error y el más frecuente es usar StatefulWidget donde StatelessWidget es suficiente. Muchos desarrolladores principiantes de Flutter crean StatefulWidget para todos los widgets, incluso cuando el estado se almacena en un proveedor externo (Provider, Riverpod, BLoC). Esto es excesivo y perjudica el rendimiento. Regla: use StatelessWidget si el estado se gestiona externamente o si el widget no tiene su propio estado mutable.

El segundo error es crear Widgets dentro del método build sin un constructor const. Cada Widget creado sin const se reasigna en cada build. Si crea Widgets con constructor const dentro de build(), Flutter puede reutilizar la misma instancia, reduciendo la carga del recolector de basura. Agregue const siempre que sea posible — especialmente para Text, Icon, SizedBox, Padding y otros Widgets stateless.

El tercer error es uso incorrecto de las claves (Key). Flutter utiliza Key para identificar Widgets al reconstruir el árbol. Si una lista de Widgets se reconstruye sin Keys, Flutter puede confundir el orden de los elementos, lo que provoca animaciones incorrectas o pérdida de estado. Siempre agregue una Key (por ejemplo, ValueKey u ObjectKey) para los elementos en listas, especialmente al usar ListView.builder con datos dinámicos.