📥 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:

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:

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:

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

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:

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.

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:

💡 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.