How to Create a 2D Snake Game in Flutter

In this episode, we are going to use a Timer to rebuild the UI periodically. When the UI is rebuilt, you will see the Snake rendered on the screen on its new position.

You already have the code to calculate Snake positions and use them to render the Piece widgets on the screen. Now, you only have to rebuild the UI with the new positions and you have to do it periodically, every few hundred milliseconds.

Let’s begin.

A Timer is a built-in class in dart that we can use to invoke a function after specified amount of time duration. We will use the Timer to rebuild the UI after every few-hundred milliseconds. The shorter this durations is, the faster the movement of the Snake will be.

We already have a Timer object called timer defined on the top, in game.dart file. Let’s initialize it.

Add the following code inside the changeSpeed function.

void changeSpeed() {
    if (timer != null && timer.isActive) timer.cancel();

    timer = Timer.periodic(Duration(milliseconds: 200 ~/ speed), (timer) {
      setState(() {});
    });
}

In the above code, we are canceling the timer if it is already active. Then, we create a new timer using Timer.periodic factory constructor. This ensures that the callback function pass is executed periodically, until the timer is canceled.

For the duration, we are passing 200 ~/ speed which means that higher the speed, lower will be the duration. This means that we are not just controlling the movement of the Snake but also controlling the speed of movement of the Snake using this timer.

Feel free to play around with this value and see the results yourself.

In the callback function, we are simply calling setState which tells Flutter to rebuild the UI.

We also need to ensure that we call the changeSpeed function only once everytime we want to start the Snake movement with the specified speed. To do that, let’s invoke changeSpeed from within the restart method and then invoke restart from within the initState.

void restart() {
    // Add this
    changeSpeed();
}

And then,

@override
void initState() {
    super.initState();

    // Add this
    restart();
}

Finally, save all the changes you made to the file, and restart the application.

You should see the Snake move and run to the default direction and move out the screen in a couple of seconds. Feel to free to restart the application to see it happen again.

That’s it! Congratulations! We have a moving Snake now.