Flutter game tutorial: Fruit Slicing
Tags: flutter, dart, tutorial, appdevelopment
Published: 2020-07-24 15:39:21

# The goal

The goal of this tutorial is to develop a clone of the game Fruit Ninja in a **basic way**. We will not use any frameworks so that you as a reader can learn from scratch how things work.

![Flutte Fruit Ninja Clone Animation](https://dev-to-uploads.s3.amazonaws.com/i/387mbv8xw0zgo84pst3k.gif)

# What you will learn

After having completed this tutorial, you will be able to

* Use a GestureDetector
* Draw on the screen
* Implement basic collision checks
* Implement a basic gravity simulation

# The implementation

For the basic version of our game, there are the following problems to be solved:

* Implementing a "slicer" that follows the path we create by swiping with our finger
* Implementing the appearance of fruits
* Implementing gravity that pulls the fruits down
* Checking for collision of the slicer and the fruits

## The slicer

Let's start with the slicer that is supposed to appear when we drag across the screen:

```dart
class SlicePainter extends CustomPainter {
  SlicePainter({this.pointsList});

  List<Offset> pointsList;
  final Paint paintObject = Paint();

  @override
  void paint(Canvas canvas, Size size) {
    _drawPath(canvas);
  }

  void _drawPath(Canvas canvas) {
    Path path = Path();

    paintObject.color = Colors.white;
    paintObject.strokeWidth = 3;
    paintObject.style = PaintingStyle.fill;

    if (pointsList.length < 2) {
      return;
    }

    paintObject.style = PaintingStyle.stroke;

    path.moveTo(pointsList[0].dx, pointsList[0].dy);

    for (int i = 1; i < pointsList.length - 1; i++) {
      if (pointsList[i] == null) {
        continue;
      }

      path.lineTo(pointsList[i].dx, pointsList[i].dy);
    }

    canvas.drawPath(path, paintObject);
  }

  @override
  bool shouldRepaint(SlicePainter oldDelegate) => true;
}
```

The `SlicePainter` is something that expects a number of points and draws them on the screen with a connecting line in between them. For this, we create a `Path`, move the starting point to the coordinates of the first element of the point list and then iterate over each element, starting with the second one and draw a line from the previous point to the current point. 

The `CustomPainter` itself has no value if it is not used anywhere. That's why we need a canvas that recognizes the finger swipes, captures the points and puts them into the constructor of our newly created `CustomPainter` so that the path is actually drawn.

```dart
List<Widget> _getStack() {
  List<Widget> widgetsOnStack = List();

  widgetsOnStack.add(_getSlice());
  widgetsOnStack.add(_getGestureDetector());

  return widgetsOnStack;
}
```

Our widget consists of a `Stack`. At the bottom there will be the slice that is produced by our swipe gestures, on top of that we want to have the `GestureDetector` because we do not want anything to block the detection.

```dart
class TouchSlice {
   TouchSlice({
     this.pointsList
   });
   List<Offset> pointsList;
}
```

First, we create a model class, representing the slice. We call it `TouchSlice` and let it expect a list of `Offset`s as the only parameter.

```dart
Widget _getSlice() {
  if (touchSlice == null) {
    return Container();
  }

  return CustomPaint(
    size: Size.infinite,
    painter: SlicePainter(
      pointsList: touchSlice.pointsList,
    )
  );
}
```

We then implement the `_getSlice()` method which returns a `CustomPaint` that paints the slice we created before based on the pointlist of the `TouchSlice` instance of the `CanvasArea` widget. The `TouchSlice` is always null. Let's do something about it by adding a `GestureDetector`.

### Detecting the swipe gesture

```dart
Widget _getGestureDetector() {
  return GestureDetector(
    onScaleStart: (details) {
      setState(() {
        _setNewSlice(details);
      });
    },
    onScaleUpdate: (details) {
      setState(() {
        _addPointToSlice(details);
      });
    },
    onScaleEnd: (details) {
      setState(() {
        touchSlice = null;
      });
    }
  );
}
```

The GestureDetector listens to three events:

* `onScaleStart` is the event that is triggered when we start swiping. This should add a new TouchSlice to the state that has a single point
* `onScaleUpdat` gets called when we move our finger while it's on the screen. This should add a new point to the existing point list of our `TouchSlice`
* `onScaleEnd` is called when we release the finger from the screen. This should set the `TouchSlice` to null in order to let the slice disappear

Let's implement the methods!

```dart
void _setNewSlice(details) {
  touchSlice = TouchSlice(pointsList: [details.localFocalPoint]);
}

void _addPointToSlice(ScaleUpdateDetails details) {
  touchSlice.pointsList.add(details.localFocalPoint);
}

void _resetSlice() {
  touchSlice = null;
}
```

### Testing time!

Let's have a look at how this looks in action by building and starting the app.

![Flutter draw on screen](https://dev-to-uploads.s3.amazonaws.com/i/d9ym3zw6n5g748nce3qk.png)

Oh! We forgot to limit the length of the line we can draw. Let's correct it by limiting the amount of points of the line to 16.

```dart
void _addPointToSlice(ScaleUpdateDetails details) {
  if (touchSlice.pointsList.length > 16) {
    touchSlice.pointsList.removeAt(0);
  }
  touchSlice.pointsList.add(details.localFocalPoint);
}
```

Okay, if we have more than 16 points, we remove the first one before adding the last one. This way we draw a snake.

### Colorful background

White line on a black background looks quite boring. Let's create a more appealing look by using a colorful background.

```dart
  List<Widget> _getStack() {
    List<Widget> widgetsOnStack = List();

    widgetsOnStack.add(_getBackground());
    widgetsOnStack.add(_getSlice());
    widgetsOnStack.add(_getGestureDetector());

    return widgetsOnStack;
  }

Container _getBackground() {
  return Container(
    decoration: new BoxDecoration(
      gradient: new RadialGradient(
        stops: [0.2, 1.0],
        colors: [
          Color(0xffFEB692),
          Color(0xffEA5455)
        ],
      )
    ),
  );
}
```

A radial gradient should make the whole thing a little bit less gloomy.

![Flutter draw on screen radial gradient](https://dev-to-uploads.s3.amazonaws.com/i/8go4bbw6f689sn84m07n.png)

### Adding fruits

Okay, let's come to the part that creates the fun! We are going to be adding fruits to the game.

```dart
class Fruit {
  Fruit({
    this.position,
    this.width,
    this.height
  });

  Offset position;
  double width;
  double height;

  bool isPointInside(Offset point) {
    if (point.dx < position.dx) {
      return false;
    }

    if (point.dx > position.dx + width) {
      return false;
    }

    if (point.dy < position.dy) {
      return false;
    }

    if (point.dy > position.dy + height) {
      return false;
    }

    return true;
  }
}
```

Our fruit should hold its position so that we can draw it on the screen and manipulate the position later. It should also have a sense of its boundary because we should be able to check if we hit it with our slice. In order to help us  determine that, we create a public method called `isPointInside` that returns if a given point is inside the boundary of the fruit.

```dart
List<Fruit> fruits = List();
...
widgetsOnStack.addAll(_getFruits());
...
List<Widget> _getFruits() {
  List<Widget> list = new List();

  for (Fruit fruit in fruits) {
    list.add(
      Positioned(
        top: fruit.position.dy,
        left: fruit.position.dx,
        child: Container(
          width: fruit.width,
          height: fruit.height,
          color: Colors.white
        )
      )
    );
  }

  return list;
}
```

In order to store the data of every fruit currently on the screen, we give our widget state a new member variable called fruits which is a list of the Fruit class we have just created. We position the fruits from the list by using a `Positioned` widget. We could also go for a `CustomPaint` widget like we did with the Slice but for the sake of simplicity let's just go for the widget tree approach.
As a first iteration we display a white square instead of an actual fruit because this step is about displaying something and checking for collision. Beautifying can be done later.

For the collision detection to work, we need to check for collision every time a point is added to our `Slice`.

```dart
...
onScaleUpdate: (details) {
  setState(() {
    _addPointToSlice(details);
    _checkCollision();
  });
},
...
_checkCollision() {
  if (touchSlice == null) {
    return;
  }

  for (Fruit fruit in List.from(fruits)) {
    for (Offset point in touchSlice.pointsList) {
      if (!fruit.isPointInside(point)) {
        continue;
      }

      fruits.remove(fruit);
      break;
    }
  }
}
```

We iterate over a new list that is derived from the fruit list. For every fruit we check for every point if it's inside. If it is, we remove the fruit from the `Stack` and `break` the inner loop as there is no need to check for the rest of the points if there is a collision.

Now we have a list of fruits and a method that displays them, but yet there is no fruit in the list. Let's change that by adding one `Fruit` to the list on `initState`.

```dart
@override
void initState() {
  fruits.add(new Fruit(
    position: Offset(100, 100),
    width: 80,
    height: 80
  ));
  super.initState();
}
```

![Flutter Fruit Ninja collision detection simple](https://dev-to-uploads.s3.amazonaws.com/i/vgyusudfhkp69wkskevs.gif)

Cool, we can draw a line on the screen and let a rectangle disappear. One thing that bothers me is the it instantly disappears once we touch it. Instead, we want the effect of cutting through it. So let's change the `_checkCollision` algorithm a little bit.

```dart
_checkCollision() {
  if (touchSlice == null) {
    return;
  }

  for (Fruit fruit in List.from(fruits)) {
    bool firstPointOutside = false;
    bool secondPointInside = false;

    for (Offset point in touchSlice.pointsList) {
      if (!firstPointOutside && !fruit.isPointInside(point)) {
        firstPointOutside = true;
        continue;
      }

      if (firstPointOutside && fruit.isPointInside(point)) {
        secondPointInside = true;
        continue;
      }

      if (secondPointInside && !fruit.isPointInside(point)) {
        fruits.remove(fruit);
        break;
      }
    }
  }
}
```

The algorithm now only interprets a movement as a collision if one point of the line is outside of the fruit, a subsequent point is within the fruit and a third one is outside. This ensures that something like a cut through is happening. 

![Flutter Fruit Ninja advanced collision](https://dev-to-uploads.s3.amazonaws.com/i/kri8pw7sqdw2gisnefpe.gif)

A white rectangular fruit looks not very tasty. It also does not create the need to cut through. Let's change that by replacing it with a more appealing image.

![Melon vector overview](https://dev-to-uploads.s3.amazonaws.com/i/4p6i8b6p61j0z18lzvcs.png)

I don't have a lot of talent in design and arts. I tried to create some simple vector graphics that look kind of the states we need of a melon. A whole melon, the left and right part of a melon and a splash.

Let's take care that we see the whole melon when it appears and the two parts when we cut through.

```dart
List<Widget> _getFruits() {
  List<Widget> list = new List();

  for (Fruit fruit in fruits) {
    list.add(
      Positioned(
        top: fruit.position.dy,
        left: fruit.position.dx,
        child: _getMelon(fruit)
      )
    );
  }

  return list;
}

Widget _getMelon(Fruit fruit) {
  return Image.asset(
      'assets/melon_uncut.png',
      height: 80,
      fit: BoxFit.fitHeight
  );
}
```

Let's start with the easy part: replacing the white rectangular. Instead of returning a `Container`, we return the return value of `getMelon()` which accepts a Fruit and returns an `Image`, specifically the one we have created the assets for.

Okay, now we want the melon to be turned into two once we cut it.

```dart
class _CanvasAreaState<CanvasArea> extends State {
  List<FruitPart> fruitParts = List();
  ...
  List<Widget> _getStack() {
    List<Widget> widgetsOnStack = List();

    widgetsOnStack.add(_getBackground());
    widgetsOnStack.add(_getSlice());
    widgetsOnStack.addAll(_getFruitParts());
    widgetsOnStack.addAll(_getFruits());
    widgetsOnStack.add(_getGestureDetector());

    return widgetsOnStack;
  }

  List<Widget> _getFruitParts() {
    List<Widget> list = new List();

    for (FruitPart fruitPart in fruitParts) {
      list.add(
        Positioned(
          top: fruitPart.position.dy,
          left: fruitPart.position.dx,
          child: _getMelonCut(fruitPart)
        )
      );
    }

    return list;
  }

  Widget _getMelonCut(FruitPart fruitPart) {
    return Image.asset(
      fruitPart.isLeft ? 'assets/melon_cut.png': 'assets/melon_cut_right.png',
      height: 80,
      fit: BoxFit.fitHeight
    );
  }

  _checkCollision() {
    ...
    for (Fruit fruit in List.from(fruits)) {
    ...
        if (secondPointInside && !fruit.isPointInside(point)) {
          fruits.remove(fruit);
          _turnFruitIntoParts(fruit);
          break;
        }
      }
    }
  }

  void _turnFruitIntoParts(Fruit hit) {
    FruitPart leftFruitPart = FruitPart(
        position: Offset(
          hit.position.dx - hit.width / 8,
          hit.position.dy
        ),
        width: hit.width / 2,
        height: hit.height,
        isLeft: true
    );

    FruitPart rightFruitPart = FruitPart(
        position: Offset(
          hit.position.dx + hit.width / 4 + hit.width / 8,
          hit.position.dy
        ),
        width: hit.width / 2,
        height: hit.height,
        isLeft: false
    );

    setState(() {
      fruitParts.add(leftFruitPart);
      fruitParts.add(rightFruitPart);
      fruits.remove(hit);
    });
  }
}

class FruitPart {
  FruitPart({
    this.position,
    this.width,
    this.height,
    this.isLeft
  });

  Offset position;
  double width;
  double height;
  bool isLeft;
}

```

We introduce a new class called `FruitPart`, which represents both of the parts of our fruit. The properties are slightly different to those of our `Fruit` class. position, width and height are kept, but there is an addition bool variable called isLeft, which determines if this is the left or the right fruit part. Also, there is no need for a method to check if a point is inside.
We then add a new member variable to our state: `fruitParts`, which represents a list of fruit parts currently on the screen. They are added to the Stack underneath the Fruits. The `isLeft` property determines if we load the image asset of the left or the right cut.
When a collision between a slice and a fruit is happening, in addition to removing the fruit, we place the two fruit parts.

![Flutter fruit cut half](https://dev-to-uploads.s3.amazonaws.com/i/b894xx2swov3mkidu68i.gif)

### It's raining fruits

Now we want the fruits to behave like in Fruit Ninja: spawned at a certain point, they are "thrown" in a certain directory and constantly pulled down by the simulated gravity.

```dart
class Fruit extends GravitationalObject {
  Fruit({
    position,
    this.width,
    this.height,
    gravitySpeed = 0.0,
    additionalForce = const Offset(0,0)
  }) : super(position: position, gravitySpeed: gravitySpeed, additionalForce: additionalForce);

  double width;
  double height;
  ...
}

class FruitPart extends GravitationalObject {
  FruitPart({
    position,
    this.width,
    this.height,
    this.isLeft,
    gravitySpeed = 0.0,
    additionalForce = const Offset(0,0)
  }) : super(position: position, gravitySpeed: gravitySpeed, additionalForce: additionalForce);

  double width;
  double height;
  bool isLeft;
}

abstract class GravitationalObject {
  GravitationalObject({
    this.position,
    this.gravitySpeed = 0.0,
    this.additionalForce = const Offset(0,0)
  });

  Offset position;
  double gravitySpeed;
  double _gravity = 1.0;
  Offset additionalForce;

  void applyGravity() {
    gravitySpeed += _gravity;
    position = Offset(
      position.dx + additionalForce.dx,
      position.dy + gravitySpeed + additionalForce.dy
    );
  }
}
```

We create a new abstract class called `GravitationalObject` and let both the Fruit and the FruitPart extend that class. A `GravitationalObject` has a `position`, a `gravitySpeed` and an `additionalForce` as constructor arguments. The `gravitySpeed` is the amount by which the the object is pulled down. Every time the `applyGravity()` method is called, this speed is increased by _gravity to simulate a growing force. `additionalForce` represents any other force that is acting upon that object. This is useful if we don't want the fruits to just fall down, but be "thrown" up or sideways. We will also us it to let the fruit parts fall apart when cutting through the fruit.

Now, what's left to do to make the gravitation start to have an effect is regularly applying the force to the fruits, updating their position.

```dart
@override
void initState() {
  fruits.add(new Fruit(
    position: Offset(0, 200),
    width: 80,
    height: 80,
    additionalForce: Offset(5, -10)
  ));
  _tick();
  super.initState();
}

void _tick() {
  setState(() {
    for (Fruit fruit in fruits) {
      fruit.applyGravity();
    }
    for (FruitPart fruitPart in fruitParts) {
      fruitPart.applyGravity();
    }
  });

  Future.delayed(Duration(milliseconds: 30), _tick);
}

void _turnFruitIntoParts(Fruit hit) {
  FruitPart leftFruitPart = FruitPart(
      ...
      additionalForce: Offset(hit.additionalForce.dx - 1, hit.additionalForce.dy -5)
  );

  FruitPart rightFruitPart = FruitPart(
      ...
      additionalForce: Offset(hit.additionalForce.dx + 1, hit.additionalForce.dy -5)
  );
  ...
}
```

We create a new method `_tick()` that is executed every 30 milliseconds and updates the position of our fruits. The initially displayed fruit gets an addition force that let it be thrown up and right. When a fruit is turned into parts, we give every part an additional force in the opposite direction.

![Flutter Fruit Ninja gravity](https://dev-to-uploads.s3.amazonaws.com/i/hqkr0hmn7s81157240lr.gif)

### The devil is in the details

Okay the basic game mechanic is there. Let's improve a bunch of details.

First of all, the slice doesn't look very appealing as it's only a line. Let's create an actual blade!

```dart
void _drawBlade(Canvas canvas, Size size) {
  Path pathLeft = Path();
  Path pathRight = Path();
  Paint paintLeft = Paint();
  Paint paintRight = Paint();

  if (pointsList.length < 3) {
    return;
  }

  paintLeft.color = Color.fromRGBO(220, 220, 220, 1);
  paintRight.color = Colors.white;
  pathLeft.moveTo(pointsList[0].dx, pointsList[0].dy);
  pathRight.moveTo(pointsList[0].dx, pointsList[0].dy);

  for (int i = 0; i < pointsList.length; i++) {
    if (pointsList[i] == null) {
      continue;
    }

    if (i <= 1 || i >= pointsList.length - 5) {
      pathLeft.lineTo(pointsList[i].dx, pointsList[i].dy);
      pathRight.lineTo(pointsList[i].dx, pointsList[i].dy);
      continue;
    }

    double x1 = pointsList[i-1].dx;
    double x2 = pointsList[i].dx;
    double lengthX = x2 - x1;

    double y1 = pointsList[i-1].dy;
    double y2 = pointsList[i].dy;
    double lengthY = y2 - y1;

    double length = sqrt((lengthX * lengthX) + (lengthY * lengthY));
    double normalizedVectorX = lengthX / length;
    double normalizedVectorY = lengthY / length;
    double distance = 15;

    double newXLeft = x1 - normalizedVectorY * (i / pointsList.length * distance);
    double newYLeft = y1 + normalizedVectorX * (i / pointsList.length * distance);
    
    double newXRight = x1 - normalizedVectorY * (i / pointsList.length  * -distance);
    double newYRight = y1 + normalizedVectorX * (i / pointsList.length * -distance);

    pathLeft.lineTo(newXLeft, newYLeft);
    pathRight.lineTo(newXRight, newYRight);
  }

  for (int i = pointsList.length - 1; i >= 0; i--) {
    if (pointsList[i] == null) {
      continue;
    }

    pathLeft.lineTo(pointsList[i].dx, pointsList[i].dy);
    pathRight.lineTo(pointsList[i].dx, pointsList[i].dy);
  }

  canvas.drawShadow(pathLeft, Colors.grey, 3.0, false);
  canvas.drawShadow(pathRight, Colors.grey, 3.0, false);
  canvas.drawPath(pathLeft, paintLeft);
  canvas.drawPath(pathRight, paintRight);
}
```

This looks more complicated than it is. What we are doing here is drawing two paths that are parallel to the one that follows our finger. This is achieved by using some geometry. Given a point, we calculate the distance to the previous one using Pythagoras. We then divide the components by the length. This gives us the orthogonal vector between the center line and the left side. The negated value is the respective vector for the right side.

We multiply it by the current index divided by the number of points times the distance we set to 15. This way there are not two parallel curves but rather two curves that grow in their distance to the middle line.

In order to close both of the paths we then iterate from the last point to the first and draw lines from point to point until we reach the first point again.

If we were to spawn multiple fruits at once, every object would have the same rotation. Let's change that by giving it a random rotation.

```dart
  List<Widget> _getFruits() {
    List<Widget> list = new List();

    for (Fruit fruit in fruits) {
      list.add(
        Positioned(
          top: fruit.position.dy,
          left: fruit.position.dx,
          child: Transform.rotate(
            angle: fruit.rotation * pi * 2,
            child: _getMelon(fruit)
          )
        )
      );
    }

    return list;
  }

  Widget _getMelonCut(FruitPart fruitPart) {
    return Transform.rotate(
      angle: fruitPart.rotation * pi * 2,
     ...
    );
  }

  void _turnFruitIntoParts(Fruit hit) {
    FruitPart leftFruitPart = FruitPart(
        ...
        rotation:  hit.rotation
    );

    FruitPart rightFruitPart = FruitPart(
      ...
      rotation:  hit.rotation
    );

class Fruit extends GravitationalObject {
  Fruit({
    ...
    rotation = 0.0
  }) : super(..., rotation: rotation);
}

class FruitPart extends GravitationalObject {
  FruitPart({
    ...
    rotation = 0.0
  }) : super(..., rotation: rotation);
}

abstract class GravitationalObject {
  GravitationalObject({
    ...
    this.rotation
  });

  ...
  double rotation;
  ...
}
```

We add a new field to our `GravitationalObject`: a rotation. The rotation is a double determining the number of 360 ° rotations. We then wrap the lines where we display the fruit and the fruit parts with a  Transform.rotate widget whose angle is the rotation times pi * 2 because it expects the rotation to be given as a radian (in which 2 * pi is a 360 ° rotation). In `_turnFruitIntoParts()` we take care of the parts having the same rotation as the original fruit to make it look more natural.

![Flutte Fruit Ninja Clone Animation](https://dev-to-uploads.s3.amazonaws.com/i/387mbv8xw0zgo84pst3k.gif)

After having changed the background color a bit, displaying a score and triggering the spawn of a melon every now and then, we are finished for now.  It's up to your imagination where to go from here.

# Final thoughts

Without the usage of a framework, we implemented a very basic version of the game Fruit Ninja. Yet, it's only slicing and collecting points, but I am sure you guys have plenty of ideas about how to continue from here. Adding more fruit types, splashes, bombs, levels, high scores, a start screen etc. could be the next steps. You can find the full source on GitHub:

[https://github.com/flutter-clutter/flutter-fruit-ninja-clone](GET FULL CODE)