flickering twin images in memory game - image

Question

I have a problem of flickering twin images in https://github.com/dzenanr/educ_memory_game.
In the Board class of view/board.dart, the following code in the _imageBox method creates and loads images:
var imagePath = 'images/${cell.image}';
ImageElement image = new Element.tag('img');
image.src = imagePath;
image.onLoad.listen((event) {
context.drawImageToRect(image, new Rect(x, y, boxSize, boxSize));
});
A click on a board cell shows an image for a second. When the same 2 images are discovered, those twin images stay displayed , but they flicker every second (a timer refresh interval).
In order to solve the flickering problem, I create those images in a constructor of the Board class:
for (var cell in memory.cells) {
ImageElement image = new Element.tag('img');
image.src = 'images/${cell.image}';
imageMap[cell.image] = image;
}
Then, I get an image from the map. However neither of the following two works:
ImageElement image = imageMap[cell.image];
image.onLoad.listen((event) {
context.drawImageToRect(image, new Rect(x, y, boxSize, boxSize));
});
or
ImageElement image = imageMap[cell.image];
context.drawImageToRect(image, new Rect(x, y, boxSize, boxSize));

Answer 1

Changing the src attribute of the image imply a network access and is not good, you have to used the cached images.
To display the image correctly, just change the _imageBox function a little bit.
void _imageBox(Cell cell) {
var x = cell.column * boxSize;
var y = cell.row * boxSize;
context.beginPath();
// Moved at the beginning otherwise it is drawn above the image.
context.rect(x, y, boxSize, boxSize);
context.fill();
context.stroke();
context.closePath();
if (cell.hidden ) {
context.fillStyle = HIDDEN_CELL_COLOR_CODE;
var centerX = cell.column * boxSize + boxSize / 2;
var centerY = cell.row * boxSize + boxSize / 2;
var radius = 4;
context.arc(centerX, centerY, radius, 0, 2 * PI, false);
} else {
ImageElement image = imageMap[cell.image]; // if decomment, comment the above 3 lines
context.drawImageToRect(image, new Rect(x, y, boxSize, boxSize));
}
}