How to Create a 2D Snake Game in Flutter

You have the Snake moving around the screen. In this episode, you are going to render food on the screen. We will render this food at a random position within the bounds of the play-area on the screen. Later we will write the code to make the Snake be able to eat the food and grow in length.

Let’s begin.

To create the food, you will use the same Piece widget that you use to render the Snake. The only difference is that, this time, you will set the animated property of the Piece widget to true. This will make the Piece animated on the screen.

Begin by implementing the drawFood method.

void drawFood() {
    if (foodPosition == null) {
        foodPosition = getRandomPositionWithinRange();
    }
}

In the above code, you are simply checking if foodPosition is null. If it is null, we generate a new random position on the screen using getRandomPositionWithinRange and assign it to foodPosition. foodPosition is a variable that we have defined on the top and is null when the game starts.

Next, you need to create a Piece using this position to be able to render the food on the screen. So, let’s add code to that in drawFood itself.

void drawFood() {
    ...

    // Add this
    food = Piece(
        posX: foodPosition.dx.toInt(),
        posY: foodPosition.dy.toInt(),
        size: step,
        color: Color(0XFF8EA604),
        isAnimated: true,
    );
}

Just like foodPosition, food is also null when the game starts. We initialize it or re-initialize it with the foodPosition and other parameters. We set it’s color different than the color of the Snake. We also set animated as true because we want the food to be blinking on the screen.

Now that we have the method to create the foodPosition and food, we need to call this method.

Add the following to the getPieces method right after you call the draw method.

List<Piece> getPieces() {
    ...
    draw();
    drawFood(); // Add this

    ...

    return pieces;
}

Finally, we need to add the food widget to the build method for Flutter to be able to render it on the screen.

Add the following to the build.

@override
  Widget build(BuildContext context) {
    ...

    return Scaffold(
        body: Container(
            color: Color(0XFFF5BB00),
            child: Stack(
                children: [
                    ...getPieces(), 
                    getControls(), 
                    food, // Add this
                ],
            ),
        ),
    );
}

That’s all! Save all the files and restart the application and you should see a blinking Piece widget on the screen. That’s the food for the Snake. One more thing that you will notice is that everytime you restart the app, the food renders on a new position. That’s because we are generating a random position of the food everytime.