Building a Dice Game in Flutter: Building the Dice

We’re going to build a Dice Game in Flutter, which will have two pairs of dice to allow you to randomly get some values.

We’re going to do some different things this time, such as:

• Making a class widget which we can insert into our game, so we don’t have to duplicate ourselves,
• Use a random number generator,
• Using external files for better organization,
• Add image assets, and
• We will remove the debug banner.

Let’s start with creating a new project from the base application, and removing the unnecessary comments to clean up our code some.

Creating The Dice Class

The first thing we are going to do is create a class which will represent our Dice that we will be using.

So we’re going to create a new file in lib folder. We will name this file dice.dart.

We will need to import two files, the materials package, and dart:math, which will be used to get us random numbers later.

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

Next we are going to create the dice class. This is going to be more than just a class, but a stateless widget.

In Visual Studio Code, on a new line, start typing st. VSC should come up with some suggestions including a Flutter Stateful Widget, click on that option. The cursor will be put after class, and you can type in Dice, so you can create the class and the class which extends the State class.

Class Variables to Hold Values

We need to create variables to hold some values. Inside of the _DiceState class, you will want to add to variables, _value an integer and _random a Random object. Both of these have the underscore, so they are private to the instance of the object.

int _value = 0;
final Random _random = Random();

The Random() object is used to get a random value for the Dice that will be displayed.

Methods Needed

We will need a couple of simple methods, one to simulate rolling the dice (getting a random value) and one to get the value of the dice, especially from outside the object since the value is a private attribute.

First, let’s work on rolling the dice. Here we just need to update the value of _value, but we want to limit what our values are since I standard dice can only be between the values of 1 and 6.

Our _random object will help us with the random value. Random has a nextInt() method which takes a max parameter, lets call it n. It gives a value of 0 to n-1. So we will need to add one to that value.

  void _roll() {
    setState(() {
      _value = _random.nextInt(6) + 1;
    });
  }

Then we will put that in the setState method call so we get the new value displayed. Notice that we are only setting the _value, the rest is being handled by Flutter as normal.

Next we will need a getter for _value so we can get that value from outside of our object. This way we can still properly encapsulate our object’s properties.

  int getValue() {
    return _value;
  }

Creating the Widget Display

In the build method we need to create a the element that will be displayed. We’re going to add a Text display for now so it will display the value we have created. However, we are not going to use the Text Widget, but the TextBotton, so we can click on it.

TextButton gives us Text to display, and onPressed event handler, which will let us call the roll value.

@override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
          TextButton(
            onPressed: _roll,
            child: Text(
              '$_value',
            ),
          )
        ]));
  }

We can style this by creating a style object.

final ButtonStyle flatButtonStyle = TextButton.styleFrom(
    foregroundColor: Colors.black87,
    minimumSize: Size(88, 86),
    padding: EdgeInsets.symmetric(horizontal: 24.0),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(2.0)), // probably want to make 6 to give it softer sides
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
          TextButton(
            onPressed: _roll,
            style: flatButtonStyle,
            child: Text(
              '$_value',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          )
        ]));
  }

Next we’re going to add this to the main application.

Building a Dice Game in Flutter: Building the Dice was originally found on Access 2 Learn