Flutter: Concurrent modification during iteration: Instance(length:2) of '_GrowableList' - flutter

Question

This is a game with a small rectangle randomly appearing on the screen and the player has to tap it in order to get rid of it and a new one will spawn on another part of the screen.
My code works and all but every time I tap the rectangle I drew on the screen, I get the error below. How do I fix this?
Main.dart:
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flame/flame.dart';
import 'package:flame/util.dart';
import 'package:flutter/services.dart';
import 'package:langaw/langaw-game.dart';
import 'package:flutter/gestures.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
Util flameUtil = Util();
await flameUtil.fullScreen();
await flameUtil.setOrientation(DeviceOrientation.portraitUp);
LangawGame game = LangawGame();
runApp(game.widget);
TapGestureRecognizer tapper = TapGestureRecognizer();
tapper.onTapDown = game.onTapDown;
flameUtil.addGestureRecognizer(tapper);
}
fly.dart:
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:langaw/langaw-game.dart';
class Fly {
Rect flyRect;
Paint flyPaint;
bool isDead = false, isOffScreen = false;
final LangawGame game;
// initialized with the game instance, along with positions x and y
Fly({this.game, double x, double y}) {
flyRect = Rect.fromLTWH(x, y, game.tileSize, game.tileSize);
flyPaint = Paint();
flyPaint.color = Color(0xff6ab04c);
}
// needs a render and update method
// this method will do the drawing
void render(Canvas canvas) {
canvas.drawRect(flyRect, flyPaint);
}
void update(double t) {
if (isDead) {
flyRect = flyRect.translate(0, game.tileSize * 12 * t);
if (flyRect.top > game.screenSize.height) {
isOffScreen = true;
}
}
}
void onTapDown() {
flyPaint.color = Color(0xffff4757);
isDead = true;
game.spawnFly();
}
}
langaw-game.dart:
import 'dart:ui';
import 'package:flame/game.dart';
import 'package:flame/flame.dart';
import 'package:langaw/components/fly.dart';
import 'dart:math';
import 'package:flutter/gestures.dart';
class LangawGame extends Game {
Size screenSize;
double tileSize;
List<Fly> flies;
Random rnd;
LangawGame() {
initialize();
}
void initialize() async {
flies = List<Fly>();
rnd = Random();
resize(await Flame.util.initialDimensions());
spawnFly();
}
// this method will do the drawing
void render(Canvas canvas) {
Rect bgRect = Rect.fromLTWH(0, 0, screenSize.width, screenSize.height);
Paint bgPaint = Paint();
bgPaint.color = Color(0xff576574);
canvas.drawRect(bgRect, bgPaint);
// now the flies are rendered on top of the background
flies.forEach((Fly fly) => fly.render(canvas));
// print(screenSize.toString());
}
void update(double t) {
flies.forEach((Fly fly) => fly.update(t));
flies.removeWhere((Fly fly) => fly.isOffScreen);
}
void spawnFly() {
double xPos = rnd.nextDouble() * (screenSize.width - tileSize);
double yPos = rnd.nextDouble() * (screenSize.height - tileSize);
flies.add(Fly(game: this, x: xPos, y: yPos));
}
void resize(Size size) {
screenSize = size;
tileSize = screenSize.width / 9;
}
void onTapDown(TapDownDetails d) {
flies.forEach((Fly fly) {
if (fly.flyRect.contains(d.globalPosition)) {
fly.onTapDown();
}
});
}
}
The following ConcurrentModificationError was thrown while handling a gesture:
Concurrent modification during iteration: Instance(length:2) of '_GrowableList'.
When the exception was thrown, this was the stack:
#0 List.forEach (dart:core-patch/growable_array.dart:286:36)
#1 LangawGame.onTapDown (package:langaw/langaw-game.dart:57:11)
#2 TapGestureRecognizer.handleTapDown.<anonymous closure> (package:flutter/src/gestures/tap.dart:463:51)
#3 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24)
#4 TapGestureRecognizer.handleTapDown (package:flutter/src/gestures/tap.dart:463:11)
...
Handler: "onTapDown"
Recognizer: TapGestureRecognizer#a4e24
state: possible
button: 1

Answer 1

I ran in the same problem today when following the tutorial on flutter game (nice tutorial BTW except I think this small bug, I will post a comment soon when I have time).
The problem is that the LangawGame.onTapDown iterates on the flies list, and during the iteration calls Fly.onTapDown() who adds an element to the list in the spawnFly method.
So the list gets modified while it is being iterated... which IMHO sounds like a bug.
The simple solution is to make a copy of the list for iteration with List.from:
ie in LangawGame:
void onTapDown(TapDownDetails d) {
List<Fly>.from(flies).forEach((Fly fly) {
if (fly.flyRect.contains(d.globalPosition)) {
fly.onTapDown();
}
});
There are more performant solutions, but with more code :)

Answer 2

Remove following code in in class Fly：
game.spawnFly();
Add the following code in langaw-game.dart -> update()
if(flies.length<1){
spawnFly();
}

Answer 3

You can use ( Dart documentation: https://api.dartlang.org/stable/2.1.0/dart-core/Map/removeWhere.html )
Map.removeWhere((key, value) => toRemove.contains(key));