diegoRodicio

View Categories

🌳 Compartir estado entre widgets

🌳 Gardar o estado nun pai común

Ata agora vimos como utilizar callbacks para que un widget fillo poida comunicar unha acción ao seu pai.

Pero, que ocorre cando varios widgets necesitan utilizar ou modificar o mesmo dato?

Imaxina que temos dous widgets:

  • Un mostra o valor dun contador.
  • Outro contén un botón para incrementalo.

Neste caso, non necesitamos gardar un contador en cada widget. O máis sinxelo é gardar un único contador no widget pai que teñen en común.

O pai encárgase de gardar e modificar o contador, mentres que os fillos reciben a información ou as funcións que necesitan.

💡 Esta técnica coñécese como subir o estado ao pai (lifting state up). Consiste en gardar os datos compartidos no widget pai común, en lugar de manter copias independentes nos widgets fillos.

🧪 O contador separado en widgets

Imos crear unha aplicación na que o contador e o botón están separados en diferentes widgets.

Para iso, utilizaremos tres clases:

  • ContadorCompartido: é un StatefulWidget que garda o contador e se encarga de modificalo.
  • TextoContador: é un StatelessWidget que recibe o valor do contador e o mostra na pantalla.
  • BotonIncrementar: é un StatelessWidget que recibe unha función e a executa cando prememos o botón.

🔗 DartPad:

Separar o contador en widgets que reciben datos e callbacks
Separar o contador en widgets que reciben datos e callbacks

🔍 Que sucede cando prememos «Sumar 1»?

  1. BotonIncrementar executa a función recibida mediante onIncrementar.
  2. Esa función é _incrementar(), definida na clase _ContadorCompartidoState.
  3. O pai aumenta _contador mediante setState().
  4. Flutter volve executar o método build() do pai.
  5. TextoContador recibe o novo valor e móstrao na pantalla.

Fíxate nun detalle importante: TextoContador é un StatelessWidget, aínda que o número que mostra cambie.

Isto é posible porque o widget non modifica o número por si mesmo, senón que recibe un novo valor cada vez que o pai actualiza a interface.

Deste xeito, conseguimos que cada widget teña unha responsabilidade concreta:

  • O pai garda e modifica o estado.
  • TextoContador mostra a información.
  • BotonIncrementar comunica a acción que queremos realizar.
Percorrido do callback: o fillo avisa e o pai actualiza o contador
Percorrido do callback: o fillo avisa e o pai actualiza o contador

💡 Lembra: Cando varios widgets necesitan compartir información, podemos gardala no pai común e utilizar construtores e callbacks para comunicarnos cos fillos.

En aplicacións máis grandes existen outras ferramentas, como Provider, que permiten xestionar o estado compartido dunha maneira máis sinxela. Provider queda como ampliación de consulta no Tema 3.7.

📚 Consulta: