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 Piece
s 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.