One of the basic ingredients that make a game interesting is the random element. There are two moments in our game where we can add some randomness. One is the bouncing angle: it doesn't need to be exactly 45 degrees each time it bounces. Making the bouncing less regular will make the game less predictable. And we can also work with the speed of the ball.

Let's consider the perfect bouncing we are using now to be 1. If the bouncing could take a value between 0.5 and 1.5, the bouncing would be less regular, but still keep a degree of realism:

1. In order to use random values in Flutter and Dart, we need to import the math library. In the pong.dart file, add the import statement as shown here:

import 'dart:math';

2. Then, in the _PongState class, let's write a method, called randomNumber(), which returns a random double number between 0.5 and 1.5:

double randomNumber() {
 //this is a number between 0.5 and 1.5;
 var ran = new Random();
 int myNum = ran.nextInt(101);
 return (50 + myNum) / 100;
}

The Random class generates random bool, int, or double values. Its nextInt method returns a random integer from 0, inclusive, and the parameter you pass, exclusive. In this case, it will be a number between 0 and 100 inclusive.

To that, we add 50 and we add the generated integer, obtaining a number between 50 and 150, and we then divide it by 100. So, the function will return a number between 0.5 and 1.5.

3. Next, at the top of the _PongState class, let's create two variables, one for the vertical direction and one for the horizontal, which will contain the random number. As you can see, at the beginning of the execution, the value for both randX and randY is 1:

double randX = 1;
double randY = 1;

4. Every time the ball bounces, we want to change the value of the random number, based on the border that is reached. So, when the ball bounces left or right, we want to change the randX value; when the ball bounces at the top or the bottom, we want to change randY.

Modify the checkBorders() function, adding the calls to the randomNumber() method:

void checkBorders() {
    double diameter = 50;
    if (posX <= 0 && hDir == Direction.left) {
      hDir = Direction.right;
      randX = randomNumber();
    }
    if (posX >= width - diameter && hDir == Direction.right) {
      hDir = Direction.left;
      randX = randomNumber();
    }
    //check the bat position as well
     if (posY >= height - diameter - batHeight  && vDir == 
      Direction.down) {
      //check if the bat is here, otherwise loose
      if (posX >= (batPosition - diameter) && posX <= (batPosition 
      + batWidth + diameter)) {
        vDir = Direction.up;
        randY = randomNumber();
      } else {
        controller.stop();
        dispose();
      }}
    if (posY <= 0 && vDir == Direction.up) {
      vDir = Direction.down;
      randY = randomNumber();
    }  }

5. Finally, go back to the Tween defined in the initState() method, and replace the animation definition so that, instead of incrementing the position by a fixed value, we'll use the random number to vary the speed as well:

 animation = Tween<double>(begin: 0, end: 100).animate(controller);
    animation.addListener(() {
      safeSetState(() {
        (hDir == Direction.right) 
            ? posX += ((increment * randX).round()) 
            : posX -= ((increment * randX).round());
        (vDir == Direction.down) 
            ? posY += ((increment * randY).round()) 
            : posY -= ((increment * randY).round());
      });
      checkBorders();
    });

There is one last element that every game should have, and this is the score. Let's add this to our app.