---
title: 📥 Datos recibidos con widget
description: "## 📥 Recibir datos polo construtor: a propiedade `widget` Do mesmo xeito que cos `StatelessWidget`, podemos crear `StatefulWidget` personalizados, indicando a través do construtor a información que queremos mostrar ou utilizar. Por exemplo, imaxina que queremos mellorar o contador anterior…"
url: "https://www.drodicio.com/docs/flutter/tema-3-estado-callbacks/datos-do-widget/"
updated: "2026-10-12"
category: Tema 3. Estado e callbacks
---

# 📥 Datos recibidos con widget

## 📥 Recibir datos polo construtor: a propiedade `widget`

Do mesmo xeito que cos `StatelessWidget`, podemos crear `StatefulWidget` personalizados, indicando a través do construtor a información que queremos mostrar ou utilizar.

Por exemplo, imaxina que queremos mellorar o contador anterior para que:

- Mostre o **nome dun alumno**.
- Permita indicar **canto aumenta o contador** cada vez que prememos o botón.

Estes datos indícanse ao crear o widget e utilízanse para configurar o seu funcionamento. Por exemplo, podemos crear un contador que sume de un en un e outro que sume de cinco en cinco, utilizando o mesmo widget.

### 🧩 Como se comunican as dúas clases?

Lembra que un `StatefulWidget` está formado por dúas clases que traballan xuntas:

- **`StatefulWidget`**: recibe os datos de configuración a través do construtor. Estes datos decláranse con `final` porque forman parte da configuración do widget e non deben modificarse unha vez creado.
- **`State`**: garda os datos que poden cambiar, contén os métodos para modificalos e constrúe a interface.

Pero aquí aparece unha pregunta importante: **se os datos chegan á primeira clase, como podemos utilizalos desde a segunda?**

Flutter proporciona unha propiedade especial chamada **`widget`**, que permite acceder desde a clase `State` aos datos do `StatefulWidget` asociado.

No noso contador, utilizaremos:

- `widget.nome`: para consultar o nome do alumno.
- `widget.paso`: para consultar a cantidade que debemos sumar ao contador.

> 💡 **Lembra:** Dentro da clase `State`, utilizamos `widget` para acceder ás propiedades do `StatefulWidget` asociado. Non debemos confundilo co widget pai da pantalla.

## 🧪 Unha variante do contador

Imos modificar o contador anterior para que poidamos personalizalo indicando o nome dun alumno e a cantidade que debe sumar.

En primeiro lugar, declaramos dous atributos na clase `StatefulWidget`, como se mostra no **paso 1 da imaxe inferior**:

```dart
final String nome;
final int paso;
```

Estes atributos reciben os seus valores a través do construtor, como se mostra no **paso 2 da imaxe**:

```dart
const PantallaContador({
  super.key,
  required this.nome, // Debemos indicar o nome ao crear o widget.
  this.paso = 1, // Se non indicamos un paso, suma de un en un.
});
```

Fíxate nos seguintes detalles, destacados no **paso 2 da imaxe**:

- `nome` é obrigatorio, xa que utilizamos `required`.
- `paso` é opcional e ten un valor predeterminado de `1`. Se non indicamos outro valor, o contador sumará de un en un.

Deste xeito, podemos crear un contador personalizado, como se mostra no **paso 3 da imaxe**:

```dart
PantallaContador(nome: 'Iria', paso: 2)
```

![Recibir o nome e o paso polo construtor e consultalos desde o State](https://www.drodicio.com/wp-content/uploads/2026/10/variante_contador.png)
Recibir o nome e o paso polo construtor e consultalos desde o State

Neste caso, o contador mostrará o nome **Iria** e aumentará de dúas en dúas.

Desde a clase `State`, podemos utilizar `widget.nome` para mostrar o nome do alumno e `widget.paso` para incrementar o contador.

No **paso 4 da imaxe**, o método que incrementa o contador utiliza `widget.paso`:

```dart
void _incrementar() {
  setState(() {
    _contador += widget.paso; // Consultamos o paso recibido polo widget.
  });
}
```

Cada vez que prememos o botón, sumamos a `_contador` a cantidade indicada en `widget.paso`.

Se creamos outro contador con `paso: 5`, aumentará de cinco en cinco.

### 🔍 Exemplo completo

Observa como queda a aplicación completa utilizando a propiedade `widget`:

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

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

![Contador de Iria que aumenta de dúas en dúas](https://www.drodicio.com/wp-content/uploads/2026/10/contador_paso.png)
Contador de Iria que aumenta de dúas en dúas

Neste exemplo, creamos un contador para **Iria** que aumenta de dúas en dúas.

Proba a modificar os valores de `nome` e `paso` na función `main()` e observa como cambia o funcionamento da aplicación.

## 💡 Datos de configuración ou datos de estado?

Cando creamos un `StatefulWidget`, debemos distinguir entre dous tipos de datos:

- **Datos de configuración:** son os valores que indicamos ao crear o widget e que utilizamos para personalizalo. Decláranse na clase `StatefulWidget` mediante `final`.
- **Datos de estado:** son os valores que necesitamos gardar e modificar durante o funcionamento da aplicación. Decláranse na clase `State`.

No exemplo anterior:

| Dato | Tipo | Explicación |
| --- | --- | --- |
| `widget.nome` | Configuración | Nome do alumno que queremos mostrar. |
| `widget.paso` | Configuración | Cantidade que sumamos cada vez que prememos o botón. |
| `_contador` | Estado | Número que vai aumentando cada vez que prememos o botón. |

> 💡 **Lembra:** A configuración chega polo construtor e consultámola mediante `widget`; o contador que modificamos gárdase no `State`.
>
>
>
> 📚 Consulta:
>
>
>
> - [State.widget → `https://api.flutter.dev/flutter/widgets/State/widget.html`](https://api.flutter.dev/flutter/widgets/State/widget.html).