To simplify, we will start using colors instead of pictures to show 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 will be 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 code them in a folder called util
. To specify the colors for the cells, we use two utility variables: a List
variable of colors (colorList
), which has the named 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 (ints, doubles, or Booleans), Dart has the class Random
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 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 class Cells
:
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 the DOM in a New Way, that we can draw a rectangle and fill it with a color at the same time. So, we realize 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 then 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(); }
And now we have a colored board:
3.147.85.181