How to Create a 2D Snake Game in Flutter

In this video, you will learn about the code provided to you as part of the starter project. There is a few widgets and some utility methods that are available and you will be using them while building the game. Let’s have a look at these widgets and methods one by one.

Let’s look at all the available widgets that are available inside the starter project.

The Piece widget is the primary building block of the Snake that we are going to build. The definition of the widget is available inside piece.dart. Here is how it looks like.

At the top of the widget, it specified all the arguments that the widget accepts. Here the widget takes the coordinates that specify where the widget would be rendered on the screen, its size, color, and a value specifying whether the widget will be animated or not.

final int posX, posY;
final int size;
final Color color;
final bool isAnimated;

If you scroll down to the build method of this widget, you will find that this is where we have defined where and how the widget should be rendered on the screen. This methods specified the UI of the widget, its position, it size, and a simple animation that it has. Here are a few key points.

• The position is specified using the Positioned widget’s left and top properties.
• The size is specified using the Container widget’s height and width properties.
• The color of the widget is specified using the Container widget’s color property with a border as well.
• And, finally, there is a little bit of animation that is taken care of using the Opacity widget.

The ControlPanel widget is another widget that is available in the start project and it is held in control_panel.dart. It is a simple widget with 4 circular buttons. These buttons will be used to control the movement direction of the Snake.

The ControlPanel widget will be placed at the bottom of the screen and will allow the player to control the Snake using touch gestures.

The next and last of the widgets that you should be aware of is the ControlButton widget which lives in control_button.dart. This is a circular button created using FloatingActionButton widget which is built into Flutter SDK just like other widgets including Container, Positioned, Stack, etc.

If you look at the definition of this widget, you will be able to notice the following.

• It has a green colored FloatingActionButton with an icon.
• It has a size of 80 specified using the Container’s width and height properties.
• It also has some transparency applied to it using the Opacity widget.

The starter project sets up the playing field. You’ll add UI elements to it as you build the game. The starter project also provides several useful utility methods so you can focus on the bigger picture: writing the game. Here are the pre-built functions you’ll find in the starter project, along with how to use them.

1. roundToNearestTens
2. getRandomPositionWithinRange
3. showGameOverDialog
4. getRandomDirection
5. getPlayAreaBorder

Let’s look at these one by one.

roundToNearestTens

Assuming that the Snake moves one step length at a time, this method is a mathematical utility that is used to round off the passed integer argument to the nearest step value.

Assuming that step is 10, here is what you will get for the following input values to the method.

As you can see that the method rounds any number down to the nearest multiple of step value. This keeps the Snake’s movements always aligned with a 2d imaginary grid on the screen.

getRandomPositionWithinRange

This method generates a random position on the screen within the bounds of the play area. You’ll use this function to spawn a new snake when a new game starts and to render a new food for the snake an a random location everytime the Snake eats the food.

An important point to note here is that getRandomPositionWithinRange ensures that the random position it generates always lies on the 2d imaginary grid on the screen.

showGameOverDialog

showGameOverDialog displays a styled dialog pop-up widget when the Snake collides with any of the boundaries of the play area. This dialog displays

1. the user’s score, and
2. a button to restart the game

getRandomDirection

getRandomDirection randomly returns one of the four directions: up, down, left or right. You primarily use this function to move the Snake in a random direction when it spawns. It also optionally takes an argument that specifies whether you want the random direction it returns to be horizontal or vertical.

The directions here are the constant values that are defined in the Direction enumeration in the direction.dart file.

getPlayAreaBorder

This is method that draws a border along the edge of the screen to represent the play area where the Snake moves. If the Snake collides with this boundary, the game is over.

So that’s all you need to know to understand the starter project. Now let’s move on to building the Snake game.