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 also introduce here the Memory class from our model in its own code file memory.dart in the model folder. So, we have to change the part statements to the following:

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

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 methods clear() and border():

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

The lines method is quite straightforward; first draw it on a piece of paper and then 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
3.146.221.144