To simplify, we will start using colors instead of pictures to be shown in the grid. Up until now, we didn't implement the cell from the model. Let's do that in modelcell.dart. We start simple by saying that the Cell class has the row, column, and color properties, and it belongs to a Memory object passed in its constructor:

class Cell {
  int row, column;
  String color;
  Memory memory;
  Cell(this.memory, this.row, this.column);
}

Because we need a collection of cells, it is a good idea to make a Cells class, which contains List. We give it an add method and also an iterator so that we are able to use a for…in statement to loop over the collection:

class Cells {
  List _list;

  Cells() {
    _list = new List();
  }

  void add(Cell cell) {
    _list.add(cell);
  }

  Iterator get iterator => _list.iterator;
}

We will need colors that are randomly assigned to the cells. We will also need some utility variables and methods that do not specifically belong to the model and don't need a class. Hence, we will code them in a folder called util. To specify the colors for the cells, we will use two utility variables: a List variable of colors (colorList), which has the name colors, and a colorMap variable that maps the names to their RGB values. Refer to utilcolor.dart; later on, we can choose some fancier colors:

var colorList = ['black', 'blue', //other colors  ];
var colorMap = {'black': '#000000', 'blue': '#0000ff', //... };

To generate (pseudo) random values (integers, doubles, or Booleans), Dart has the Random class from dart:math. We will use the nextInt method, which takes an integer (the maximum value) and returns a positive random integer in the range from 0 (inclusive) to max (exclusive). We will build upon this in util andom.dart to make methods that give us a random color:

int randomInt(int max) => new Random().nextInt(max);
randomListElement(List list) => list[randomInt(list.length - 1)];
String randomColor() => randomListElement(colorList);
String randomColorCode() => colorMap[randomColor()];

Our Memory class now contains an instance of the Cells class:

Cells cells;

We build this in the Memory constructor in a nested for loop, where each cell is successively instantiated with a row and column, given a random color, and added to cells:

  Memory(this.length) {
    cells = new Cells();
    var cell;
    for (var x = 0; x < length; x++) {
      for (var y = 0; y < length; y++) {
        cell = new Cell(this, x, y);
        cell.color = randomColor();
        cells.add(cell);
      }
    }
  }

We know from Chapter 5, Handling DOM in a New Way, that we can draw a rectangle and fill it with a color at the same time. So, we realize that we don't need to draw lines as we did in the previous spiral! The _boxes method is called from the draw animation: with a for…in statement, we loop over the collection of cells and call the _colorBox method that will draw and color the cell for each cell:

void _boxes() {
    for (Cell cell in memory.cells) {
      _colorBox(cell);
    }
}

void _colorBox(Cell cell) {
    var gap = height / memory.length;
    var x = cell.row * gap;
    var y = cell.column * gap;
    context
      ..beginPath()
      ..fillStyle = colorMap[cell.color]
      ..rect(x, y, gap, gap)
      ..fill()
      ..stroke()
      ..closePath();
}

Now, we have a colored board:

The colored board