Flutter - Dice Roller App

Here, we will be building a simple dice app that rolls on click. For this, we will add a GestureDetector widget and when we click on it, the dice should roll. We can achieve this by wrapping the Image Widget in a GestureDetector Widget and changing dice images randomly in a callback function, which is set to the onTap property of the GestureDetector. 

We will create this app using Stateful Widgets. Stateful Widgets are the ones that change their properties during run-time. They are dynamic, i.e., they are mutable and can be drawn multiple times within their lifetime. It can change its appearance in response to events triggered by user interactions or when it receives data like Checkbox, GestureDetector, Slider, InkWell, Form, and TextField.

Steps to build Dice Roller App in Flutter

Step 1 : Create a new flutter application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2 : Store Images

Download the images below, create an image folder, and add all images to that folder.

• Dice 1
• Dice 2
• Dice 3
• Dice 4
• Dice 5
• Dice 6

Step 3 : Update Pubspec.yaml

Include the images in the pubspec.yaml file.

flutter:
  uses-material-design: true
  assets:
         - images/

Note: Use proper indentation in pubspec.yaml.

Step 4 : Working with the main.dart file

Whenever we change the internal state of a State object, we should make the changes in a function that we have passed to setState:

setState( () { 
myState = newValue; 
});

Go to the main.dart file and refer to the following code.

main.dart:

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  return runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: Text('GFG | Dice'),
          backgroundColor: Color.fromRGBO(15, 157, 88, 1),
          foregroundColor: Colors.white,
        ),
        body: Dice(),
      ),
    ),
  );
}

class Dice extends StatefulWidget {
  @override
  _DiceState createState() => _DiceState();
}

class _DiceState extends State<Dice> {
  int dice_no = 1;
  void update() {
    setState(() {
      //Random.nextInt(n) returns random integer from 0 to n-1
      dice_no = Random().nextInt(6) + 1;
      print("dice:$dice_no");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Expanded(
        child: Padding(
          padding: const EdgeInsets.all(50.0),
          child: GestureDetector(
            child: Image.asset('images/dice$dice_no.png'),
            onTap: () {
              update();
            },
          ),
        ),
      ),
    );
  }
}

Output:

Full Code Explanation:

• The code starts by creating a new Flutter application called MaterialApp.
• This application will contain a single widget, which is a dice widget.
• The dice widget has two children: an expanded child and a padding child.
• The expanded child contains the die image and the onTap() function, while the padding child just contains some margin around it.
• The build() function returns the center of the app screen.
• The die widget is placed in this center, with its top left corner at (0, 0), its bottom right corner at (width/2, height/2), and its width and height set to 50% of the total screen size.
• The update() function first randomly selects an integer from 0 to 6 and sets dice_no to that number plus 1.
• It then calls update(), which updates all of the game state variables based on that random number.
• The code creates a MaterialApp which contains a Dice widget as well as an AppBar.
• The AppBar has the title "GFG | Dice" and the background color of body is set to black.
• The build method for the Dice widget will center it within the MaterialApp.
• Additionally, it will add padding around the sides and bottom of the widget, as well as a GestureDetector on top which will be used to trigger the update method.
• Lastly, an image asset called "images/dice$dice_no.png" will be added to the child of the GestureDetector so that when it is tapped, it will load and use update() to perform its duties.

chetankhanna767

Follow

Improve

Article Tags :

• Flutter
• Flutter UI-components
• Flutter Projects