how to refresh the display of a DragTarget Widget - dart

Question

Initially my 'TRY' pockets are empty and display thus:
Empty pockets
The pockets are then filled by the user dragging counters into them. Once all the pockets are filled e.g.
Filled pockets
they are then processed and the pockets can then be emptied and should be redisplayed. And that is the problem: the counters are still showing.
Here is the code for the DragTarget:
/// Drag Target --------
class CatcherPocket extends StatefulWidget {
final int position;
int colourID;
Color colour;
CatcherPocket(
{Key? key,
required this.position,
required this.colourID,
required this.colour})
: super(key: key);
#override
State<CatcherPocket> createState() {
// ignore: no_logic_in_create_state
return CatcherPocketState(
position: position, colourID: colourID, colour: colour);
}
}
class CatcherPocketState extends State<CatcherPocket> {
final int position;
int colourID;
Color colour;
CatcherPocketState(
{required this.position, required this.colourID, required this.colour});
#override
DragTarget build(BuildContext context) {
return DragTarget<CounterItem>(
builder: (context, candidateItems, rejectedItems) {
return Pocket(colourID: colourID, colour: colour);
},
onAccept: (ci) {
setState(() {
colourID = ci.uid;
colour = ci.imageProvider.colour;
});
GameState.updateTry(position, colourID, colour);
},
);
}
}
// ---------------- END OF Draggable counter stuff ------------------
I populate a list of pocket handles when they are initially built and use these to reset their internal state using the following code:
static List<CatcherPocket> cps = []; // to be populated on initilization
static resetTryCounters() {
for (CatcherPocket cp in cps) {
cp.colour = DDDtheme.standard.primaryColor;
cp.colourID = -1;
}
}
After invoking a 'setState' in the root ancestor Widget I would expect it to redraw the pockets in this reset state but it doesn't.
Any ideas why and a fix would be greatly appreciated

Answer 1

After some days of not thinking about it, the solution came to me. But it is crude and I am sure a more elegant solution is possible. Basically it involves changing the state of the CatcherPockets externally.
I modified the CatcherPocket to keep a handle (the 'cps' variable) to its state:
class CatcherPocket extends StatefulWidget {
final int position;
int colourID;
Color colour;
late CatcherPocketState cps = CatcherPocketState(
position: position, colourID: colourID, colour: colour);
CatcherPocket(
{Key? key,
required this.position,
required this.colourID,
required this.colour})
: super(key: key);
#override
State<CatcherPocket> createState() {
// ignore: no_logic_in_create_state
return cps;
}
}
This enabled a modified 'resetTryCounters' to get at the CatcherPocketState thus:
static List<CatcherPocket> cpockets = [];
static resetTryCounters() {
for (CatcherPocket cp in cpockets) {
cp.colour = DDDtheme.standard.primaryColor;
cp.colourID = -1;
if (cp.cps.mounted) {
cp.cps.colour = DDDtheme.standard.primaryColor;
cp.cps.colourID = -1;
cp.cps.setState(() {});
}
}
}
It works, but it blows the idea of encapsulation out of the water. Also, I wonder if there is a better way of passing the initialization parms for CatcherPocket to its State.