![\"Christian](\"https:\/\/miro.medium.com\/fit\/c\/96\/96\/2*33dep1N4p1DanY6KzQIz9A.jpeg\")
<\/div>\n<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n I would like to show you a version of Game of Life build with Flutter. My intention was to get some insights on the following topics:<\/p>\n Let\u2019s first start with a brief intro explaining what \u201cGame of Life\u201d is actually about. In case you know the board game called \u201cGame of Life\u201d I have to disappoint you \u2014 the game we are building here is a bit different. Below is the summary in my words, feel free to skip this and check the great Wikipedia article<\/a> directly.<\/p>\n The game shows a board of cells which can either be alive or dead. Every turn, each cell gets checked and a new state (dead, alive) is calculated based on the current game board. The rules are quite simple \u2014 a cell will only change the state based on the following rules:<\/p>\n The game will run infinitely and every round will introduce a new generation of cells until all cells are dead or spread across the board in a way that they can’t interact with other cells according to the described rules above.<\/p>\n The complete project is hosted on GitHub. Please note, I\u2019m new to Flutter so please excuse any code smells you might spot:<\/p>\n To start, either create a new flutter project or simply clone my repository. I will skip the project creation, in case you need a helping hand check out the great Flutter starting guide<\/a>.<\/p>\n We can divide the code into three main areas of tasks:<\/p>\n If you\u2019re wondering why the code is split up like this, at first I like to separate code by its actual job and secondly I might want to reuse the game logic code (which is pure dart code) for other projects. To keep it short, the job of the main widget is to bring everything together and provide sizing information to our drawing department. Most of the code inside the main.dart<\/a> file is nothing special, nevertheless I would like to point out the more interesting places to get you started:<\/p>\n The first line creates our logic class, it will be used to interact with our game. To get a new board and ensure the app is running in fullscreen during startup we use the initState<\/em> method. You might spot a bit more in the above code. It includes the callback to our toggle methods to start\/pause the game and also some size calculation for the cells. I will explain most of it in the following parts.<\/p>\n To get the game started we have to fill the world, this job is done by the code below:<\/p>\n The board itself is a simple List<\/em> of boolean values. The resetWorld<\/em> function performs the following steps:<\/p>\n You might have noticed that the above logic could end up with less active cells as our second step decided. This is due to the fact that the third step doesn\u2019t check if the randomly selected cell is already active, it could happen that we set the same cell active twice.<\/p>\n Our game is ready to start, now we need to take care of the game loop that will update the cells based according to the game rules.<\/p>\n Game updates are handled by the _runTheGame<\/em> Method. To ensure the loop is running \u201cslow\u201d enough it starts with sleep, our app will wait 350ms before it calculates the next round.<\/p>\n This part might look complicated but it solves a problem that all Game of life implementation face:<\/p>\n How do you handle cells at the edge of the board?<\/p>\n<\/div>\n<\/blockquote>\n In my app the board has no real edges, if you are on the far right side and go one step to the right you will end up on the first left position. The same for the top or bottom end of the board, if you step over the edges you will end up on the opposite side. Getting the logic on the screen is the job of our drawing department, in this game we don\u2019t require a lot of elements. Everything we need for custom drawing can be found in the code below.<\/p>\n Flutter contains the great and easy to use CustomPainter<\/a>, the main idea is quite easy, it has two jobs:<\/p>\n Our cells will be represented by a rectangle with rounded edges, the color depends on the cell state. Living cells will be green, dead cells will be orange. A cell has to be painted again only if:<\/p>\n Last puzzle piece is to arrange all cells in a way that our app renders the board, this is done by the code below:<\/p>\n The big idea behind the code is to draw the board row by row based on the calculated sizes.<\/p>\n First, Flutter is awesome, I tried a lot of cross-platform development tools but I have to admit that Dart and Flutter are easy to start and the provided tooling just works ( I\u2019m using Linux, tested it also on Windows).<\/p>\n Creating custom UI elements is made in a logical two-step implementation, decide what you want to draw and when to redraw.<\/p>\n Game of life itself can be implemented in many ways, for myself it\u2019s always a good way to test out a new platform\/language. Besides the technical point of view, I like to watch and see how a randomly created board develops into different patterns or simple fades out or gets stuck in a repeating motion.<\/p>\n If you are curious about all the different shapes\/pattern Game of life might generate check out the following resources:<\/p>\n If you want to see an epic version of Game of life:<\/p>\n Thanks for reading<\/p>\n<\/div>\n\n
\n
\n
For example, we could set up a Game of Life web version using dart and the logic class from the Flutter project\u2026<\/p>\n
Thanks to the _game<\/em> object we can simply call resetWorld()<\/em> and get a fresh new start. The last method in the code allows the app to toggle the game between running or paused mode, the call to setState <\/em>ensures that Flutter will update the UI accordingly.
To have something we can start\/pause we need a so called game loop. This loop is handled by our logic object (_game<\/em>) but somehow we have to update our UI after each iteration to make sure our App shows changes. I decided to use a StreamBuilder <\/em>for this job \u2014 with every loop the StreamBuilder <\/em>gets a notification to update the UI.<\/p>\n\n
Ready to go<\/h2>\n
\n
It might remind you of the old Pacman game<\/a>.
The complete calculation to apply the game rules is done by changing the index inside the array to check all surrounding cells, left, right, top, bottom and diagonal.<\/p>\n\n
Drawing the rectangle is done by the build in function drawRRect<\/em><\/a> <\/em>you need to pass a rectangle with size, position and the radius for the edges.<\/em><\/p>\n\n