Spiral 2 – drawing cells

In this spiral, we will give our app code some structure: Board is a view, so board.dart is moved to the view folder. We will also introduce here the Memory class from our model in its own code memory.dart file in the model folder. So, we will have to change the part statements to the following:

part 'model/memory.dart';
part 'view/board.dart';

Note

For the code file of this section, refer to Chapter 7codeeduc_memory_gamespiralss02.

The Board view needs to know about Memory. So, we will include it in the Board class and make its object in the Board constructor:

new Board(canvas, new Memory(4));

The Memory class is still very rudimentary with only its length property:

class Memory {
  num length;
  Memory(this.length);
}

Our Board class now also needs a method to draw the lines, which we decided to make private because it is specific to Board, as well as the clear() and border()methods:

void draw() {
    _clear();
    _border();
    _lines();
}

The lines method is quite straightforward; first draw it on a piece of paper and translate it to code using moveTo and lineTo. Remember that x goes from top-left to right and y goes from top-left to bottom:

void _lines() {
    var gap = height / memory.length;
    var x, y;
    for (var i = 1; i < memory.length; i++) {
      x = gap * i;
      y = x;
      context
        ..moveTo(x, 0)
        ..lineTo(x, height)
        ..moveTo(0, y)
        ..lineTo(width, y);    
    }
}

The result is a nice grid:

Spiral 2 – drawing cells

Board with cells

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
13.59.173.242