Flutter – A Simple Multi-Player Dice Game
Here, we are going to create a dice game. As the name suggests there will be two dice and either player one or player two rolls the dice and according to the result the winner is decided.
What is Flutter?
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Guide on installation of flutter can be found on their documentation.
Create a new Flutter project
When installing flutter you might have selected your preferred editor. Just go on the editor and create a new flutter project. If you wish to create the project via command line or if you are using VS Code enter the following command in terminal
$ flutter create dice
Approach to building the application
Before we start with flutter let’s first take a look at the approach to building our game. We’ll add 6 images of dice each having numbers (1-6). At first, both dice will show 1 and no result. When either player 1 or player 2 rolls the dice we’ll randomly select one of the 6 images we added and based on the outcome we’ll declare the result whether it is player 1 who won or player 2 or it is a draw.
Add assets to the project
To add assets in the flutter project you can create a folder that contains all your assets at the root of the project. Now that we only have image assets we’ll create a folder called “images” and add the images to that folder. Typically you would create a folder called assets then inside it a folder called images this is due to the fact that many times apps have different assets such as audio, video, etc. You can find images with dice on the internet.
To let flutter know that we have added these images we’ll go to pubspec.yaml file and uncomment the assets line and added the image folder.
Code main.dart file
First, make sure that you delete all the code inside the main.dart file and delete the file inside the test folder.
Initialize Flutter app
After running the app you’ll see the app bar with a title on your screen.
Display the dice
Add functionality of rolling the dice and announcing the winner
Full Dart Code Explanation:
- The code starts by importing the necessary libraries.
- The first library is dart:math which is used to calculate various mathematical operations.
- Next, the Material design library is imported.
- This library provides a set of widgets that can be used to create user interfaces in Flutter.
- The main() function starts by running the app.
- The runApp() function takes two arguments: the first argument is an instance of MaterialApp and the second argument is a list of widget instances.
- In this example, there are three widget instances: Dice(), Scaffold(), and AppBar().
- The Dice class extends StatefulWidget .
- A StatefulWidget is a type of widget that maintains a history of its current state and can be restored to its previous state if it gets destroyed and recreated.
- In other words, when you create a StatefulWidget , it remembers what its current state was when it was last closed (or destroyed).
- This allows you to easily restore a widget’s previous appearance after making changes to it.
- The Dice class has one property named analyze .
- When this property gets initialized, it sets up some basic analysis parameters for the dice game that will be played later on in the code.
- These parameters include how many sides each die has (
- The code will create a new MaterialApp and configure it to disable the debug tag.
- This is so that we can see the output of our code in a more readable fashion.
- Next, we create a new Scaffold object and set its background color to green.
- We also set the appBar to have a green background color and title to Text(“GeeksForGeeks”).
- Finally, we set centerTitle to be true so that the title is centered within the appBar.
- Next, we create a new Dice object and configure it as follows: The first property is called _size which specifies how many sides the dice will have.
- The second property is called _face which specifies what face (1-6) will be
- The code starts by declaring two variables: playerOne and playerTwo.
- These will store the number 1 or 2, respectively, at any given time during the game.
- Next, the code sets up a function to roll the dice.
- This function randomly assigns one of the two numbers (playerOne or playerTwo) to be 1 and the other to be 2.
- It then checks which number is greater (playerOne or playerTwo).
- If it’s playerOne that’s greater, then the code sets result to “Player 1 Wins.”
- Otherwise if it’s playerTwo that’s greater, then result is set to “Player 2 Wins.”
- Finally, if there was a draw, result is set to “Draw.”
- The next part of the code deals with displaying buttons for each player.
- The first button displays an image of a die with number one on it.
- The second button displays an image of a die with number two on it.
- When either button is pressed, the rollDice() function will be called.
- rollDice() simply calls setState(), which updates all of the dice variables based on what was rolled in randomizer().
- Then play proceeds as normal until someone wins!
- The code creates a Dice class with two properties – playerOne and playerTwo.
- It also creates a function called rollDice which will be used to randomly select the dice values and then determine the winner of the game.
- The build() method is responsible for creating the UI elements needed for the game.
- The first element created is a Column which will have playerOne and playerTwo as its children.
- The second element is a Row which will contain two MaterialButton elements – one for playerOne and one for playerTwo.
- When either button is pressed, rollDice() will be called.
- There’s not much else to say about this code, so we’ll move on to the next section!