¿Qué son los widgets en Flutter?

Question

Accepted Answer

En Flutter, **todo es un widget** — elementos de UI (botones, texto, imágenes), estructuras de diseño (filas, columnas, espaciado), e incluso la aplicación en sí son todos widgets. Los widgets son los bloques de construcción inmutables que se componen para formar toda la interfaz de usuario.

## Por qué es importante

```text
Widgets describe the UI. EVERYTHING is a widget:
  → visible elements: Text, Image, Icon, Button, etc.
  → layout: Row, Column, Container, Padding, Center, Stack, etc.
  → structure: Scaffold (page structure), AppBar, etc.
  → even the app itself (MaterialApp) and abstract things (Padding, Theme)
→ You build UI by COMPOSING widgets into a tree (widgets contain other widgets).
```

## Componiendo widgets en un árbol

```dart
// build a UI by NESTING widgets (composition)
Scaffold(                       // page structure
  appBar: AppBar(title: Text('Home')),   // app bar with text
  body: Center(                 // centers its child
    child: Column(              // vertical layout
      children: [
        Text('Hello'),          // text widget
        ElevatedButton(         // a button
          onPressed: () {},
          child: Text('Click'),
        ),
      ],
    ),
  ),
)
// → a WIDGET TREE: Scaffold > Center > Column > [Text, Button]
```

Los widgets se anidan para formar un **árbol de widgets** — la composición es el patrón central (combinar widgets simples en UIs complejas).

## Los widgets son inmutables; configuración

```text
→ Widgets are IMMUTABLE descriptions of the UI (configuration, not the actual rendered
  objects) — Flutter rebuilds them efficiently when state changes
→ build() methods return widget trees describing what the UI should look like
→ Flutter handles efficiently turning widgets into rendered pixels
```

## Por qué es importante

Comprender los widgets es fundamental en Flutter porque **todo en Flutter es un widget** — toda la UI se construye a partir de ellos — así que entender el modelo de widgets es conocimiento esencial y fundamental para cualquier desarrollo en Flutter.

El concepto central — que elementos visibles (texto, botones, imágenes), estructuras de diseño (filas, columnas, espaciado), estructura de página, e incluso la aplicación en sí son **todos widgets** — es la característica definitoria de cómo funciona Flutter, y entenderlo es el punto de partida para construir cualquier UI en Flutter.

Comprender que las UIs se construyen **componiendo widgets en un árbol** (anidando widgets, combinando simples en interfaces complejas) es el patrón fundamental del desarrollo en Flutter — composición sobre herencia, construyendo UIs complejas a partir de bloques simples y reutilizables.

Comprender que **los widgets son descripciones inmutables** de la UI (configuración en lugar de los objetos renderizados reales, con Flutter reconstruyéndolos eficientemente cuando el estado cambia) es importante para entender cómo funciona el modelo de UI declarativa de Flutter — describes cómo debería verse la UI, y Flutter se encarga del renderizado de manera eficiente.

Este modelo de widget y composición subyace todo en Flutter: diseños, estilos, gestión de estado y estructura, todo funciona a través de widgets.

Ya que el widget es la unidad atómica de Flutter (todo es un widget, las UIs son árboles de widgets construidos por composición) y entender este modelo es el fundamento absoluto para construir UIs en Flutter, comprender los widgets — que todo es un widget, la composición en árboles, y su naturaleza inmutable y declarativa — es conocimiento esencial y fundamental en Flutter, el concepto central sobre el que se construye cada aspecto del desarrollo en Flutter y la primera cosa a entender cuando se aprende Flutter.