---
title: 🌳 Widgets e árbore da interface
description: "## 🧩 Construír unha interface con widgets Os **widgets** son os bloques básicos cos que se constrúe a interface de usuario en Flutter. Un texto, un botón, unha imaxe ou mesmo a organización dos elementos na pantalla defínense mediante widgets.…"
url: "https://www.drodicio.com/docs/flutter/tema-2-os-fundamentos-de-flutter-widgets/introducion-widgets/"
updated: "2026-10-12"
category: Tema 2. Os fundamentos de Flutter. Widgets.
---

# 🌳 Widgets e árbore da interface

## 🧩 Construír unha interface con widgets

Os **widgets** son os bloques básicos cos que se constrúe a interface de usuario en Flutter. Un texto, un botón, unha imaxe ou mesmo a organización dos elementos na pantalla defínense mediante widgets.

Por exemplo:

| Elemento da interface | Widget |
| --- | --- |
| Texto | `Text()` |
| Botón | `ElevatedButton()` |
| Espazo baleiro | `SizedBox()` |
| Imaxe | `Image.asset()` |
| Organización de elementos | `Row()`, `Column()`, `Stack()` |
| Estrutura dunha pantalla | `Scaffold()` |

Un widget pode **mostrar contido**, como `Text`; **organizar outros widgets**, como `Column`; ou formar a **estrutura dunha pantalla**, como `Scaffold`.

Por iso, unha das ideas máis coñecidas de Flutter é **«Todo é un widget»**: practicamente todos os elementos que forman a interface se constrúen combinando widgets.

## 🌳 A árbore de widgets

No Tema 3.1 usamos `MaterialApp`, `Scaffold` e `Text`. Agora combinaremos máis widgets para construír unha pantalla.

Ao colocar uns widgets dentro doutros formamos unha árbore. Chamamos **pai** ao que contén outro widget e **fillo** ao que está dentro.

- `child` recibe **un widget**, como ocorre en `Center`.
- `children` recibe **unha lista de widgets**, como ocorre en `Column`.
- Outros parámetros tamén reciben widgets: `body` é o nome dun parámetro de `Scaffold`, non un widget.

```plain
MaterialApp
└── Scaffold
    ├── AppBar
    │   └── Text
    └── Center                 ← valor de body
        └── Column
            ├── Text
            ├── SizedBox
            └── ElevatedButton
                └── Text
```

## 🧪 Un primeiro exemplo

`Column` coloca os fillos en vertical. `SizedBox` deixa espazo entre eles. O botón está desactivado porque `onPressed` vale `null`; veremos as accións no apartado de botóns.

> 🔗 DartPad:
>
>
>
> - [`https://dartpad.dev/?id=28eea974defbff70ae89ec916e9e0eba`](https://dartpad.dev/?id=28eea974defbff70ae89ec916e9e0eba).

[https://dartpad.dev/embed-inline.html?id=28eea974defbff70ae89ec916e9e0eba](https://dartpad.dev/embed-inline.html?id=28eea974defbff70ae89ec916e9e0eba)

![Relación entre os widgets do código e os elementos da pantalla](https://www.drodicio.com/wp-content/uploads/2026/10/widget1.jpg)
Relación entre os widgets do código e os elementos da pantalla

## 🔒 Widgets e cambios na interface

Os **widgets son inmutables**: unha vez creados, os seus datos non se modifican. Cando cambian os datos, Flutter pode reconstruír esa parte da interface con novos widgets e actualizar a pantalla.

- Un `StatelessWidget` describe a interface cos datos que recibe, **sen gardar estado mutable propio**. Pode mostrar outro texto se o pai lle pasa un novo valor.
- Cando a interface necesita cambiar como resposta a unha acción —como un contador que aumenta ao premer un botón— é necesario **xestionar o estado**. Para iso utilizaremos `StatefulWidget`, que veremos no Tema 3.3.

> 📚 Consulta:
>
>
>
> - [Introdución aos widgets → `https://docs.flutter.dev/ui/widgets-intro`](https://docs.flutter.dev/ui/widgets-intro).