← Flutter & Dart

Fundamentos de Flutter

¿Qué es un widget en Flutter y qué significa que "todo es un widget"?

Ver respuesta — intenta responderla en voz alta primero

En Flutter, un widget es la descripción inmutable de una parte de la interfaz. Casi todo lo que ves y muchas cosas que no ves (estructura, padding, alineación, gestos) son widgets. Se organizan en un árbol de widgets, y Flutter usa ese árbol para dibujar la pantalla.

Un widget no es el pixel en pantalla: es una receta que describe cómo debería verse o comportarse algo. Flutter toma esas recetas, las combina en un árbol y las convierte en lo que se pinta.

"Todo es un widget" significa que no solo los botones y textos son widgets, también lo son:

  • El layout: Row, Column, Stack, Padding, Center.
  • El estilo: Theme, Opacity, DecoratedBox.
  • La interacción: GestureDetector, InkWell.
  • Incluso la app entera: MaterialApp, Scaffold.

Los widgets son inmutables: no cambian una vez creados. Cuando algo cambia, Flutter crea widgets nuevos y compara para actualizar solo lo necesario.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    // Un árbol de widgets: Center contiene un Padding, que contiene un Text
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Text(
          "Hola, Flutter",
          style: const TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

En este ejemplo hay cuatro widgets anidados (CenterPaddingText, más el Saludo). Cada uno describe una parte pequeña; juntos forman la UI.

Pensar que un widget "es" el elemento visual y que modificarlo cambia la pantalla directamente. No: los widgets son inmutables y desechables. Flutter los recrea constantemente en cada build. Lo que persiste entre reconstrucciones es el State (en widgets con estado) y los objetos internos Element, no el widget en sí.

"En Flutter un widget es una descripción inmutable de una parte de la interfaz. La frase 'todo es un widget' quiere decir que no solo los controles visibles son widgets, también el layout como Row y Column, el estilo, los gestos e incluso la app entera. Los organizo en un árbol de widgets, y Flutter usa ese árbol para pintar la pantalla. Como los widgets son inmutables, cuando algo cambia Flutter crea widgets nuevos y compara para actualizar solo lo que hace falta."

Reto rápido

¿Por qué se dice que los widgets son "baratos" de crear y desechar?

Ver respuesta

Porque un widget es solo una configuración ligera (una descripción), no el objeto pesado que se dibuja en pantalla. Flutter separa el widget (la receta) del RenderObject (lo que realmente se pinta) mediante los Element. Por eso Flutter puede recrear widgets en cada build sin problema de rendimiento: lo caro (el render) se reutiliza cuando es posible.