Snakes & Ladders Board Game In Flutter Web.
A 2D Snakes & Ladders Game Built In Flutter Web.
Author
Date
Book a call
Hello people. I have built another game in Flutter that I would like to show you. I’ve had a history of making games in Flutter for mobile devices which you can see at the links below
This time, I chose to build a game in Flutter Web. The first question that arises here is: why the web?
The answer is quite simple and cheeky. The web is more accessible to people and it saves on the hassle of uploading apps to the App Store or the Play Store. Really.
The second question that arises is: Why FLUTTER web?
I’ve been reading up on Flutter web and tinkering with it a little here and there. It has a great collection of widgets that you can use to build pretty much anything and the entire development process is quite easy.
This game that I made was built without an engine or anything of that sort. It is purely made of widgets which Flutter provides by default. It does not use any assets or images, just lines and the custom painter to draw whatever I want on the screen.
Let’s begin.
Introduction:
As an introduction, Snakes & Ladders originated in ancient India. The objective of this game is simple: Navigate the game piece according to numbers on the die after each roll and reach the top-most block, using ladders to climb blocks faster and avoiding snakes that will pull you down on your progress on the way. So, basically ladders are a good thing that will move you up the board and snakes are evil and will throw you down the board.
Pretty philosophical right?
This is what my version of the game looks like. You can check it out here.
The Board:
I don’t want to bore you with the generic coding steps and other stuff. So, you can check all that out at this GitHub link (Leave a star if you like it). Instead, let’s talk about how everything is built and connected with each other.
First things first, I built a 10 by 10 grid which will be our board.
GridView.builder(
itemCount: 100,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 10,
mainAxisSpacing: 0,
crossAxisSpacing: 0,
),
itemBuilder: (BuildContext context, int index) {
return new Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
),
margin: EdgeInsets.all(0),
child: Container(
child: Center(
child: Text(
((99 - index)).toString(),
style: TextStyle(
fontSize: 24,
color: Colors.white),
),
),
),
),
);
}),
),This will create our game Board. We can apply colours with an odd-even logic so that it looks something like this.
Dice & Dice Roll Logic:
Now moving ahead we need dice roll which will give us a random number between 1 to 6, for that, I used Providers to re-render 6 images of dice first, we create a random number between 1 to 6 from a for loop which runs 6 times and whatever random number we get at each iteration we render that image from the array of images and that at the last iteration whatever number we get that becomes the final value of our dice throw.
Moving on, we need to create a die which will give us a random number in between 1-6 on every roll. For that, I used providers to re-render 6 images of a die first. Next, I created a for loop which runs 6 times and displays whatever random number it generates in each iteration. We render the image corresponding to that number on the screen and it becomes the final value of the die at each throw.
Here lies the code for the dice roll.
.gif)
Snakes, Ladders & Player Position Calculation:
This way we will have the working game, now all we have to do is at whichever number we want to put a snake we will subtract the value of the current index of the token to the value at which we have to send the token to, same applies to ladder there we have to add the index value.
Now that we have the dice roll built and ready, we will move the game pieces according to the value of the die, simply by adding the value of the die to the index of the position of the game piece.
With this, we now have a working game but without the Snakes and Ladders. To add the supporting or inhibiting effects of the ladders and snakes respectively, we will add the value of the current index of the game piece with a number that brings the game piece to the value where we have to send the game piece to for the ladders & subtract the same value.
That completes the functionality of our game.
The two-player models in the game are built using the scoped model. Lastly, we have to draw a line between two points for the snakes and ladders on the board. For that, I have used the Custom Painter.
To give the exact points to draw a line between two squares, every square on the board has a global key and through those global keys, I found out the exact points of the squares on the grid.
findPosOfEachSquare(int sqIndex, list) {
RenderBox box = list[99 -sqIndex].currentContext.findRenderObject();
Offset position = box.localToGlobal(Offset.zero);
print(position);
return position;
}Now that I have the exact coordinates of the squares, I can draw lines between them using the custom painter quite easily.
If you want to play the game first, click here.
I’ve made an entire video on this project which is hosted on the GeekyAnts YouTube channel where I go in much more detail about the project.
Book a Discovery Call
Related Articles.
More from the engineering frontline.
Dive deep into our research and insights on design, development, and the impact of various trends to businesses.
Apr 6, 2026
How We Built an AI System That Automates Senior Solution Architect Workflows
Discover how we built a 4-agent AI co-pilot that converts complex RFPs into draft technical proposals in 15 minutes — with built-in conflict detection, assumption surfacing, and confidence scoring.
Apr 6, 2026
AI Code Healer for Fixing Broken CI/CD Builds Fast
A deep dive into how GeekyAnts built an AI-powered Code Healer that analyzes CI/CD failures, summarizes logs, and generates code-level fixes to keep development moving.
Apr 2, 2026
A Real-Time AI Fraud Decision Engine Under 50ms
A deep dive into how GeekyAnts built a real-time AI fraud detection system that evaluates transactions in milliseconds using a hybrid multi-agent approach.
Apr 1, 2026
Building an Autonomous Multi-Agent Fraud Detection System in Under 200ms
GeekyAnts built a 5-agent fraud detection pipeline that makes decisions in under 200ms — 15x cheaper than single-model systems, with full explainability built in.
Mar 31, 2026
Building a Self-Healing CI/CD System with an AI Agent
When code breaks a pipeline, developers have to stop working and figure out why. This blog shows how an AI agent reads the error, finds the fix, and submits it for review all on its own.
Mar 26, 2026
Maestro Automation Framework — Advanced to Expert
Master Maestro at scale. Learn architecture, reusable flows, CI/CD optimization, and how to eliminate flakiness in production-grade mobile automation.Master Maestro at scale. Learn architecture, reusable flows, CI/CD optimization, and how to eliminate flakiness in production-grade mobile automation.