How to Create a 2D Snake Game in Flutter
Jan 17 2023 Dart 2.17, Flutter 3.0, Android Studio or VS Code
Part 1: How to Create a 2D Snake Game in Flutter
2. Basics of 2D Rendering
This video Basics of 2D Rendering was last updated on Jan 17 2023
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.
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 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.
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
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.
Stack widget in Flutter is used to place its multiple children on top of each other within its box.
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
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.
Positioned widget is used with the
Stack widget. The positioned child widgets are positioned through the
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.
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
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.