Creating a Game Like Minesweeper in Flutter

Finishing Up

The game now works perfectly. You can play it, and the difficulty increases with each level. But you still need to put a few pieces into place to really polish your app.

Handling Edge Cases

What if the first cell the player taps is a mine? It wouldn't feel very good to lose immediately, right? You may have noticed this if you've played the game a couple times. While algorithmically, this is OK, fair play suggests avoiding this situation. Here's how to handle it.

When the user makes their first move in a new game and taps a cell that's a mine, you don't uncover the cell or display the Game Over dialog. Instead, you replace the cell they tapped with a non-mine cell. Even better, you regenerate the whole grid until the cell the user taps turns out to be a regular cell. Then you uncover that cell. All this happens so quickly that the user won't even notice.

Add the following code on the very top inside onTap:

  void onTap(CellModel cell) async {
    
    // If the first tapped cell is a mine, regenerate the grid
    if (cell.isMine && totalCellsRevealed == 0) {
      while (cells[cell.x][cell.y].isMine == true) {
        restart();
      }

      cell = cells[cell.x][cell.y];
    }

    if (cell.isMine) {
    ...

In the code above, you check if the first cell the player taps is a mine. If it is, use a while loop to regenerate the grid using restart until the player taps a regular cell.

Simple and elegant!

Adding ProgressBar

Next, you'll add a linear progress bar that tells the user their progress in the current game. It isn't required but is a nice touch to have.

Add the following code inside buildButtonColumn:

  return Column(
    ...
    children: [
        Column(
          children: rows,
        ),
 
        // Add this
        LinearProgressIndicator(
          backgroundColor: Colors.white,
          value: totalCellsRevealed / (size * size - totalMines),
          valueColor: AlwaysStoppedAnimation<Color>(Colors.deepPurple),
        ),
      ]   
      ...

In the code above, you add a simple LinearProgressIndicator widget that calculates the value based on the number of cells uncovered.

Adding Rules

Although Minesweeper is a very simple game, it would be helpful for new players to have the game's rules available. You have some vacant space at the bottom of the screen, so adding rules would be a great way to utilize that. You also have a pre-built method called getRules() already in the starter project and ready to be used.

Add the following code to the end of the inner Column widget's list of children inside buildButtonColumn, right after LinearProgressIndicator:

  return Column(
    ...
    children: [
        ...
        // Add this
        Expanded(
          child: SingleChildScrollView(
            primary: true,
            child: getRules(),
          ),
        ),
      ]   
      ...

There you go! Save everything, restart the app and enjoy the game. This is how your final app will look:

Where to Go From Here?

Download the final project using Download Materials at the top or bottom of the tutorial.

You just made a fully functional Minesweeper Flutter game and even added in a few extra niceties — that's awesome! Here are a few more ideas on how you can make the game even better:

• Adjust the difficulty of the game at each level by tweaking the number of mines by increasing the value of size.
• Optimize the edge-case handling by forgiving not just the first tap on a mine cell, but the first two or even the first five.
• Make the game more fun and engaging by having a cloud-based scoreboard. This will add a sense of competition between players.
• Add music and animation for a more fun and appealing environment.

To learn more about developing games with Flutter, check out the tutorial How to Create a 2D Snake Game in Flutter, and to learn the basics of Flutter, check out all the Flutter tutorials.

We hope you enjoyed this tutorial. If you have any questions or comments, please join the forum discussion below!