How to Create a 2D Snake Game in Flutter

As of now, you have only piece showing up on the screen which does not feel like a Snake at all. In this video, you are going to render multiple pieces on the screen such that it gives an appearance of a Snake.

Let’s begin.

Before we can add more pieces to create the Snake, we need to decide on the length of the Snake i.e. the number pieces that will be used to render the Snake.

As of now, this number is statically defined at the top of game.dart file using the length variable. Later, we will also change this number as the game progresses which will affect the length of the Snake dynamically.

For now, let’s define the value of length to be 5. So we will have a Snake of length 5. To do this, change value of variable length to 5.

...
int length = 5;
...

As of now, inside the draw method, we have the code to create only one position when the game starts. We need to modify this to keep creating positions and adding them to positions list until the length of positions list becomes 5 or equal to the length variable’s value.

Let’s add a while-loop to do this to the draw method before the for-loop to tranform the positions.

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

  // Add this
  while (length > positions.length) {
    positions.add(positions[positions.length - 1]);
  }
  ...
}

In the code above, we are simply adding the last position we had to the new position that we are creating until the length of positions list becomes equal to the number specified by the length variable.

Let’s save everything and try this out. Restart the application.

You should see a piece rendered on the screen just the way it was before. But now, if you hot-reload, you should see 2 pieces, you hot-reload again, you should see 3 pieces and so on until you see 5 pieces. Now, if you keep hot-reloading, the pieces move in the direction that is set by the direction variable.

You can keep hot-reloading until the Snake crawls out of the screen. Don’t worry, we won’t let that happen for too long but in the next episode, you will using a Timer to rebuild the UI again and again so the Snake moves itself without you hot-reloading.