Widgets stateful

Hasta ahora, tu aplicación muestra una cuadrícula y un campo de entrada, pero la cuadrícula aún no se actualiza para reflejar los intentos del usuario. Cuando esta aplicación esté completa, cada casilla en la siguiente fila vacía debería actualizarse después de cada intento enviado por el usuario al:

• Mostrar la letra correcta.
• Cambiar de color para reflejar si la letra es correcta (verde), está en la palabra pero en una posición incorrecta (amarillo), o no aparece en la palabra en absoluto (gris).

Para manejar este comportamiento dinámico, necesitas convertir GamePage de un StatelessWidget a un StatefulWidget.

Cuando la apariencia o los datos de un Widget necesitan cambiar durante su ciclo de vida, necesitas un StatefulWidget y un objeto State asociado. Aunque el StatefulWidget en sí mismo sigue siendo inmutable (sus propiedades no pueden cambiar después de su creación), el objeto State es de larga duración, puede contener datos mutables y se puede reconstruir cuando esos datos cambian, haciendo que la UI se actualice.

Por ejemplo, el siguiente árbol de widgets imagina una aplicación simple que utiliza un widget stateful con un contador que incrementa cuando se presiona el botón.

Aquí está la estructura básica de StatefulWidget (aún no hace nada):

class ExampleWidget extends StatefulWidget {
  ExampleWidget({super.key});
​
  @override
  State<ExampleWidget> createState() => _ExampleWidgetState();
}
​
class _ExampleWidgetState extends State<ExampleWidget> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Para convertir el widget GamePage (o cualquier otro) de un widget stateless a un widget stateful, sigue estos pasos:

1. Cambia GamePage para que extienda StatefulWidget en lugar de StatelessWidget.
2. Crea una nueva clase llamada _GamePageState, que extienda State<GamePage>. Esta nueva clase contendrá el estado mutable y el método build. Mueve el método build y todas las propiedades instanciadas en el widget desde GamePage al objeto State.
3. Implementa el método createState() en GamePage, el cual devuelve una instancia de _GamePageState.

Tu código modificado debería verse así:

class GamePage extends StatefulWidget {
  GamePage({super.key});
​
  @override
  State<GamePage> createState() => _GamePageState();
}
​
class _GamePageState extends State<GamePage> {
  final Game _game = Game();
​
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          for (var guess in _game.guesses)
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                for (var letter in guess)
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 2.5, vertical: 2.5),
                    child: Tile(letter.char, letter.type),
                  )
              ],
            ),
          GuessInput(
            onSubmitGuess: (_) {
              // TODO, handle guess
              print(guess); // Temporary
            },
          ),
        ],
      ),
    );
  }
}

Cada vez que mutes un objeto State, debes llamar a setState para indicarle al framework que actualice la interfaz de usuario y llame al método build nuevamente.

En esta aplicación, cuando un usuario hace un intento, la palabra que intentó se guarda en el objeto Game, el cual es una propiedad de la clase GamePage asociada, y por lo tanto es un estado que podría cambiar y requerir que la UI se actualice. Cuando este estado se muta, la cuadrícula debe redibujarse para mostrar el intento del usuario.

Para implementar esto, actualiza la función callback pasada a GuessInput. La función necesita llamar a setState y, dentro de setState, necesita ejecutar la lógica para determinar si el intento del usuario fue correcto.

Actualiza tu código:

class GamePage extends StatefulWidget {
  GamePage({super.key});
​
  @override
  State<GamePage> createState() => _GamePageState();
}
​
class _GamePageState extends State<GamePage> {
  final Game _game = Game();
​
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          for (var guess in _game.guesses)
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                for (var letter in guess)
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 2.5, vertical: 2.5),
                    child: Tile(letter.char, letter.type),
                  )
              ],
            ),
          GuessInput(
            onSubmitGuess: (String guess) {
              setState(() { // NEW
                _game.guess(guess);
              });
            },
          ),
        ],
      ),
    );
  }
}

Ahora, cuando escribas un intento válido en el TextInput y lo envíes, la aplicación reflejará el intento del usuario. Si llamaras a _game.guess(guess) sin llamar a setState, los datos internos del juego cambiarían, pero Flutter no sabría que necesita redibujar la pantalla, y el usuario no vería ninguna actualización.