How to Create a 2D Snake Game in Flutter

In this video, you will be displaying the Piece widget at a random position on the screen within the play area. To do this, first you will be generating a random position on the screen within the bounds of the play area and then render a Piece at the generated position.

So let’s begin.

Before we start writing the code, open up the starter project in your code editor and open the game.dart file for editing. This is where we will be implementing all the code for the game. Next, hit the run button or execute flutter run command to run the starter project on your Android or iOS simulator. You can also use a real device if you want to. Once the app is running, you should see a blank colored area on the screen, just like what you can see here.

Now, let’s proceed to write some code.

So here we are inside the game.dart file. And we start off by implementing some code in the draw method to generate a random position using the utility method getRandomPositionWithinRange. We store this as the first and only item in positions which is a List of positions. Each position is of the type Offset which allows us to store an x and y value.

So first things first, we check if the positions list is empty.

draw() {
    if(positions.length == 0) {
        
    }
}

And if it is empty, then we generate a random position and add it to the list.

draw() {
    if(positions.length == 0) {
        positions.add(getRandomPositionWithinRange()); //add this
    }
}

So now we have a position inside the positions list which we will use to render a Piece on the screen.

Head over to the getPieces method and this is where we will be writing the code to create Pieces for each position we have in the positions list. As of now, we only have one position in the list but later, we will have many more.

Let’s create a blank list of type Piece that we will later return from this method.

getPieces() {
    List<Piece> pieces = [];
}

Next, you need to invoke the draw method which will populate the positions List for you. This is very important because without any positions in the positions list, no pieces will be instantiated.

getPieces() {
    List<Piece> pieces = [];
    draw(); // Add this
}

Next, you loop over the positions list and create an instance of the Piece widget for each position or Offset in the list.

getPieces() {
    List<Piece> pieces = [];
    draw();

    // Add this
    for(int i = 0; i < positions.length; i++) { 
        Piece p = Piece(
            posX: positions[i].dx.toInt(),
            posY: positions[i].dy.toInt(),
            size: step,
            color: Colors.red,
        );
    }
}

So, for the Piece widget, we need to pass in the required arguments.

• We pass in the posX which we can get from the position in positions list. We need to convert the dx value to integer using the toInt method.
• Next, we do the same thing for posY.
• We also need to pass in the size of the Piece which we will set equal to the step value that we have defined at the top.
• And finally, we specify the color of the Piece. For now, we will set it equal to the Red color. You can play with the color if you do not like the red color.

Lastly, we need to add this Piece widget that we have just created to the pieces list and return the list.

getPieces() {
    List<Piece> pieces = [];
    draw();

    for(int i = 0; i < positions.length; i++) {
        Piece p = Piece(
            posX: positions[i].dx.toInt(),
            posY: positions[i].dy.toInt(),
            size: step,
            color: Colors.red,
        );

        pieces.add(p); // Add this
    }

    return pieces; // Add this
}

The last task before we can actually see the Piece being rendered on the screen is to add getPieces to the build method. So, let’s do that as well. Head over to the build method and here you can see that you already have some code scaffolded.

@override
Widget build(BuildContext context) {
    ...
    return Scaffold(
      body: Container(
        color: Color(0XFFF5BB00),
        child: Stack(
          children: [],
        ),
      ),
    );
  }
}

If you look at the return statement here, you will notice that we are returning a Scaffold widget with the body set to a Container. The Container has some background color and the child is a Stack widget. This Stack widget currently has no children. This is where we are going to add getPieces.

Let’s add getPieces to the Stack.

@override
Widget build(BuildContext context) {
    ...
    return Scaffold(
      body: Container(
        color: Color(0XFFF5BB00),
        child: Stack(
          children: getPieces(),
        ),
      ),
    );
  }
}

Since, getPieces returns a List<Piece>, we can directly set it equal to the children property of the Stack. Later, we will refactor this to contain more widgets within the Stack.

We are all done. Let’s save the changes and restart the application.

As soon as the app restarts, you can see a Piece rendered on the screen at a random location. If you restart the app again, the Piece will render at another random location.

That’s all about this episode. We now have a Piece showing up on the screen. Let’s extend this to add more Pieces on the screen.