How to Create a 2D Snake Game in Flutter

In this video, you will learn about the widgets that we will be using while developing the Snake game. You will also understand how we are going to change the state of these widgets to achieve the animation to move the Snake around on the screen.

The Container widget is the most basic widget in Flutter. While it can be used to contain other widgets and apply some visual properties on the child widgets, it can also be used to render simple shapes on the screen.

In this project, we have used the Container widget to create a colored circular shape that we call as Piece. This Piece widget is available to you to use in the starter project.

We use multiple of this Piece widget and place them at specific positions on the screen to create an impression of a snake.

The Piece widget is a custom widget and is the building block of the Snake. We will put several Pieces together to build the Snake and add a new Piece to the Snake every time the Snake eats the food thereby increasing its total length. We also use the same piece widget to render the food on the screen.

The Piece widget is available in the piece.dart file and is simply created using the Container widget. It has some configurable properties defined on it that allow you to control the color, size, border and animation of the Piece widget.

If you are interested, you can dive into the code in piece.dart to learn more about how the Piece widget works.

A Stack widget in Flutter is used to place its multiple children on top of each other within its box.

The Stack widget has two types of child one is positioned which are wrapped in the Positioned widget and the other one is non–positioned which is not wrapped in the Positioned widget.

It is a very useful widget if you want to place multiple widgets and have them overlap each other or if you want to place widgets at a very specific position on the screen or even both.

The Positioned widget is used with the Stack widget. The positioned child widgets are positioned through the top, right, left, and bottom properties. The child widgets of Stack are rendered in an order such that the top-most widget becomes the bottom-most on the screen and vice-versa. We can use the key property of the Stack widget to change that order or to assign a different order.

The build method is used specify the user interface or the child widgets that are used to compose a widget. The build method is called when a widget is inserted into the widget tree or whenever the widget’s dependencies change.

The setState method is used to call the build method and update the user interface on demand. You can call setState whenever your widget’s dependencies change to ensure that the user interface is updated accordingly. The build method is called any time you call setState.

Now that you know about some of the basic widgets in Flutter that we will be using to implement the game, let’s move on to understanding the bits and pieces of the start project.