joy_app – Flutter dice game
This is a very simple project I found on GitHub and learned from it a thing. I am not an advanced programmer and so these simple projects gave me great pleasure to learn from. If I learned something from here it is possible you can learn too.
As you can see in the screenshot below it is a very simple Flutter dice game. It uses only a few widgets and a few images, 6 to be more precise. What this app can do. When you tap the screen the dice will show different faces. Pretty simple.
This project uses a Random Class. Every time you tap the screen the Random function is called and give a random value. Please look at the code. First, the changeDiceFace() function is called. Inside you can find setState() which will update the screen with new images. The random class generates a random value for each integer which will be used to display a correct image on the screen.
int leftDiceNumber =1;
int rightDiceNumber =6;
void changeDiceFace(){
//to update things we use setstate()
setState(() {
leftDiceNumber = Random().nextInt(6)+1;
rightDiceNumber = Random().nextInt(6)+1;
});
}The code below is used to show the correct image on the screen. An image with a dice face is used as a button background. When you tap the button the changeDiceFace() function is called and as I mentioned earlier the new value is generated. For me, the most interesting part was how simple is to use an image as a number. First of all, inside the project, we have a folder called images where we can find all the dice faces. This folder is added to the pubspec.yaml project file.
assets:
- images/The images’ names are as follows.
- dice1.png
- dice2.png
- dice3.png
- dice4.png
- dice5.png
- dice6.png
The randomly generated value is used as a part of the image name. The AssetImage uses the images from the images folder and uses the first part of the image name, so it is dice + leftDiceNumber random value. The $ is used to include the value of the name. The same image name can be written like this: dice+”leftDiceNumber”+.png, but it is simpler with $.
The link to the project page is included below.
I hope this short post helped you a bit :).
image: AssetImage('images/dice$leftDiceNumber.png'), body: Center(
child: Row(
children: [
Expanded(
child: FlatButton(
onPressed: (){
changeDiceFace();
},
child: Image(
image: AssetImage('images/dice$leftDiceNumber.png'),
),
),
),
Expanded(
child: FlatButton(
onPressed: (){
changeDiceFace();
},
child: Image(
image: AssetImage('images/dice$rightDiceNumber.png'),
),
),
),
],
),
),Original text from the project page
Our Goal
The objective of this tutorial is to introduce you to the core programming concepts that will form the foundation of most of the apps you’ll build in the future. This app will teach you how to make apps with functionality using setState() inside Stateful Flutter widgets.
What you will learn
>> How to use Flutter stateless widgets to design the user interface.
>> How to use Flutter stateful widgets to update the user interface.
>> How to change the properties of various widgets.
>> How to use onPressed listeners to detect when buttons are pressed.
>> How to use setState to mark the widget tree as dirty and requiring update on the next render.
>> How to use Expanded to make widgets adapt to screen dimensions.
>> Understand and use string interpolation.
>> Learn about basic dart programming concepts such as data types and functions.
>> Code and use gesture controls.
>> lastly basics of flutter
