Managing State in Flutter Using BLoC Pattern/

...

/

Solution: Build a Tic-Tac-Toe Game using Flutter BLoC

Solution: Build a Tic-Tac-Toe Game using Flutter BLoC

View the solution of the tic-tac-toe exercise built with Flutter BLoC.

We'll cover the following...

The tic-tac-toe game is a great way to test what you learned about Flutter BLoC in this course. Now, let’s see a possible solution to the challenge.

Implementing GameCubit

The first Cubit we have to implement is the GameCubit located in lib/cubits/game_cubit/game_cubit.dart. This is the Cubit that handles all the game states.

The startGame() function

In the startGame() function, our goal is to do the following:

  1. Randomly choose who to start, the user or the computer.

  2. If the choice is the computer:

    1. Play the first move.

    2. Set the current player to the user.

    3. Update the game state.

  3. If the choice is the user:

    1. Update the game state.

Press + to interact
void startGame() {
  Players player = Random().nextBool() ? Players.USER : Players.COMPUTER;
  if (player == Players.COMPUTER) {
    List<TileOptions> updatedTiles =
        _gameService.playAsComputer(List.filled(9, TileOptions.EMPTY));
    emit(
      GameInProgress(
        tiles: updatedTiles,
        player: Players.USER,
      ),
    );
  } else {
    emit(
      GameInProgress(
        tiles: List.generate(9, (index) => TileOptions.EMPTY),
        player: Players.USER,
      ),
    );
  }
}

  • Line 2: The Random() method provided in dart:math is used to choose a random player.

  • Lines 5 and 6: In case of the random player is set to be the computer, the playAsComputer() function provided in _gameService is used to play the computer’s move. The function returns the new tiles after the computer’s move.

  • Lines 7–12: The GameInProgress state is emitted with the updated tiles after the computer plays and the player is set to the user.

  • Lines 14–19: In case of the random player is set to be the user, the GameInProgress state is emitted with an empty board, and the player is set to be the user. ...

Ask