Os widgets son os bloques básicos cos que se constrúe a interface de usuario. Cada elemento visual que ves nunha aplicación Flutter —como texto, botóns, imaxes, caixas de texto ou estruturas máis complexas— é un widget.

Un widget describe como debe verse e comportarse unha parte da interface.

🌳 Os widgets non son elementos que debuxen directamente na pantalla, senón que forman unha árbore (a árbore de widgets) que describe como será a interface.

🧠 Internamente, Flutter analiza a árbore de widgets e encárgase de transformala nos elementos gráficos reais que ves na app.

🧱 Everything is a Widget

Esta é unha das filosofías centrais de Flutter: «Todo é un Widget». Significa que calquera cousa que vexas na pantalla, calquera elemento de control, ou calquera aspecto da organización da interface, dende o máis pequeno ata o máis grande, é un widget.

Esta é unha das frases máis repetidas cando se aprende Flutter, e é completamente certa. Todo —e dicimos TODO— é un widget:

🧱 Bloques

En Flutter, a interface de usuario constrúese a partir de pequenos bloques chamados widgets. Estes widgets son as «pezas de Lego» que combinas para crear a túa aplicación. Poden ser elementos visuais, elementos de deseño ou elementos de lóxica.

🧩 Que pode ser un Widget?

• Elementos visuais: Como texto (Text), imaxes (Image), iconas (Icon), botóns (ElevatedButton).
• Elementos de deseño (layout): Como filas (Row), columnas (Column), contedores (Container), que axudan a organizar outros widgets na pantalla.
• Elementos de interacción: Como campos de texto (TextField), caixas de selección (Checkbox).
• Elementos de utilidade: Como o propio MaterialApp (que define o tema da túa app) ou Scaffold (que crea a estrutura básica dunha pantalla).

🔒 Natureza dos Widgets:

Os widgets en Flutter son inmutables. Isto significa que, unha vez creados, non cambian. Cando a interface necesita actualizarse, Flutter non modifica os widgets existentes, senón que crea unha nova árbore de widgets e comparaa coa anterior para actualizar eficientemente só o que cambiou na pantalla.

🧪 Exemplo

O seguinte exemplo mostra unha pequena interface gráfica cun texto, un espazo en branco e un botón. Cada un destes elementos visuais é un widget, e están organizados dentro doutros widgets que forman a árbore completa.

📌 Explicación dos principais widgets do exemplo:

• Text() → 🧱 Representa unha liña de texto. Neste caso, amosa “Ola, mundo!” na pantalla.
• SizedBox(height: 20) → 📏 Crea un espazo vertical de 20 píxeles entre o texto e o botón. É útil para separar elementos. Tamén é un widget.
• ElevatedButton() → 🔘 É un botón elevado con estilo Material Design. Neste exemplo, está desactivado (onPressed: null) e contén como fillo outro widget: Text('Preme aquí').

🔗 Ver o código en DartPad

🌳 A árbore de Widgets

Os widgets en Flutter non existen de forma illada; organízanse nunha árbore xerárquica. Isto significa que cada widget é o «pai» de outros widgets, que á súa vez son «fillos» do primeiro. Esta árbore define a estrutura visual e a relación entre todos os compoñentes da túa interface.

• A UI de Flutter constrúese aniñando widgets uns dentro doutros, formando unha árbore. Os widgets «pai» conteñen e organizan os widgets «fillos».
• Relación Pai-Fillo: Un widget como Scaffold é o pai de AppBar e body. O body á súa vez pode ser o pai dun Center, e así sucesivamente.

BuildContext: Cada widget no método build() recibe un BuildContext. Este contexto é como a «dirección» do widget na árbore. Permíteche acceder a información da árbore (como o tema actual da aplicación) ou atopar widgets ancestros.

🌲 Esquema dunha árbore de widgets de exemplo

MaterialApp
  └── Scaffold
      ├── AppBar
      │   └── Text ('Widgets en Acción')
      └── body (Center)
          └── Column
              ├── Container
              │   └── Text ('Este é un texto...')
              └── ElevatedButton
                  └── Row
                      ├── Icon (thumb_up)
                      ├── SizedBox
                      └── Text ('Gústame!')

🌲 Exemplo ilustrativo da Árbore de Widgets

Nesta exemplo, Flutter constrúe unha árbore coa seguinte estrutura xerárquica:

MaterialApp → (nivel 1): raíz da aplicación.
  └── Scaffold → (nivel 2): estrutura da pantalla
      ├── AppBar → (nivel 3): cabeceira da pantalla.
      │   └── Text ('Widgets en Acción') → (nivel 4)
      └── body (Center) → (nivel 3)
          └── Column → (nivel 4) → lista de fillos:
              ├── Container → (nivel 5)
              │   └── Text ('Este é un texto...') → (nivel 6)
              └── ElevatedButton → (nivel 5)
                  └── Row → (nivel 6)
                      ├── Icon (thumb_up) → (nivel 7)
                      ├── SizedBox → (nivel 7)
                      └── Text ('Gústame!') → (nivel 7)

📌 Cada widget que aparece no código forma parte dunha árbore de widgets. Esta estrutura permítelle a Flutter saber como construír e actualizar a interface de forma eficiente.

🔗 Ver o código en DartPad

📚 Máis información oficial e APIs

• 📘 Introdución aos widgets en Flutter
• 🌳 Catálogo de widgets de Flutter
• 🧱 StatelessWidget e StatefulWidget
• 🧭 Navegación entre pantallas con widgets
• 🗂️ Flutter Widget – API de Flutter – catálogo oficial completo
• 🧱 StatelessWidget – API de Flutter
• 🔁 StatefulWidget – API de Flutter