How to Build a Simple Chess App with Flutter

Under 60 lines of code

Photo by Hassan Pasha on Unsplash

Recently wrote a post called How to Create a Simple Chess App With React. If you haven’t read it, give a read, I recommend it. After that, I wanted build same app in flutter and see how it goes. This is exactly what we’re going to do in this post. So, let’s get started.

Before we start, here a quick demo for you.

Chessboard

While I was searching for a chessboard widget for flutter, I found this package. It’s decent. But, I felt like it’s was doing a lot for a chessboard widget. I like to separate UI and logic. So, I created and published a chessboard widget called flutter_stateless_chessboard. Given a fen, It’s takes care of showing the chessboard on screen and notifies, when user makes a move. Your can you find the package here.

Rules of chess

We know that chessboard is a widget, it’s doesn’t know what is right or wrong and other rules of chess. We need a library to for that. Luckily, someone converted chess.js library to chess.dart. You can find the package here.

Now, we have all the components we need for our app. Let’s build the app.

Create a flutter project

I’ll be using android studio for development. You’re welcome to use your favourite IDE.

After creating the project. Delete all the code except App widget in main.dart file.

Add following dependencies to project’s pubspec.yml file.

...  
  flutter_stateless_chessboard: ^0.0.2
  chess: ^0.6.5
...

Now, we’re ready to write code for our app. Let’s start by writing utility functions.

We need 2 utility functions for our app.

1. makeMove — Given a fen and move. Returns updated fen after the move. If the move is invalid, returns null.
2. getRandomMove — Given a valid fen. Returns a random next move. Or null if the game is over.

We’ll put code for this functions in utils.dart file. Here is the code.

utils.dart

Create a new file called home_page.dart. Let’s start by showing Chessboard on screen.

home_page.dart

I’m importing the Chessboard widget and rendering it with a initial fen. And setting size of the board to width of screen.

Before we run the app. Make sure you have set App's home to HomePage widget we created, in main.dart.

If you run the app, this is what you should see.

Random Chess

Now, we have a chessboard showing up on the screen. the only thing left is making it playable.

Will do that in onMove callback of Chessboard widget. Let’s look at the code first, then I’ll explain what’s going on.

First, when user plays a move on the board. We take the move, pass the fen and move to makeMove function that we created earlier to get next fen. If the next fen is not null. Then we update the fen state, which updates the board.

Second part is making a random computer move. We are delaying computer by 300ms using Future.delayed function to add a delay. After which, we get next random move for current position. If the next fen is not null. We update the state. This goes on until the game is over.

And with that, our app should be working. You can find source code for this app here.

varunpvp/flutter-random-chess

Also, checkout a chess tactics app made with the Chessboard widget we used in out post. Here is the link to app.

Tactics Trainer - Apps on Google Play

Conclusion

I hope this helped you learn something new today.

If you like this post, give it a clap. And you can follow me, for more posts like this.

Thanks for reading.

Level Up Coding

Thanks for being a part of our community! Subscribe to our YouTube channel or join the Skilled.dev coding interview course.

Coding Interview Questions + Land Your Dev Job | Skilled.dev