Flutter Grid View builder

Issue

I'm working on this simple game that has same Principe of Qix game .

I succeed to make my object move like I want and now I need to feel the field when the object moves , for example object is in position 161 when it's move to position 142 then the block 161 should be colored .

I'm using this grid View to make the object moves here's how to object move

//Movemoent Functions
  void moveUp() {
    if (myField.contains(playerPosition - numberInRow)) {
      setState(() {
        playerPosition -= numberInRow;
      });
    }
  }

  void moveDown() {
    if (myField.contains(playerPosition + numberInRow)) {
      setState(() {
        playerPosition += numberInRow;
      });
    }
  }

  void moveLeft() {
    if (myField.contains(playerPosition)) {
      if (leftCorner.contains(playerPosition)) {
      } else {
        setState(() {
          playerPosition--;
        });
      }
    }
  }

  void moveRight() {
    if (myField.contains(playerPosition)) {
      if (rightCorner.contains(playerPosition)) {
      } else {
        setState(() {
          playerPosition++;
        });
      }
    }
  }

and for the UI here's how I'm building my field

Expanded(
                flex: 5,
                child: GridView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: numberOfSquares,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: numberInRow,
                  ),
                  itemBuilder: (context, index) {
                    if (playerPosition == index) {
                      return MyPixel(
                        color: Colors.transparent,
                        child: const Myplayer(),
                      );
                    } else {
                      return MyPixel(
                        color: Colors.transparent,
                        child: Text(index.toString()),
                      );
                    }
                  },
                ),
              ),

I'm using a list of all the numbers from 0 to 170 to make the move myField is a the list .

full widget :

class Mygame extends StatefulWidget {
  const Mygame({Key? key}) : super(key: key);
  static String route = "mygame";
  @override
  State<Mygame> createState() => _MygameState();
}

class _MygameState extends State<Mygame> {
  //variables
  static int numberInRow = 19;
  int numberOfSquares = numberInRow * 10;
  int playerPosition = Random().nextInt(171);
  String direction = "right";
  Color color = const Color.fromARGB(0, 250, 250, 250);
  //variables
  //
  //Functions
  void startgame() {
    Timer.periodic(
      const Duration(milliseconds: 1000),
      (timer) {
        switch (direction) {
          case "up":
            moveUp();
            break;
          case "down":
            moveDown();
            break;
          case "left":
            moveLeft();
            break;
          case "right":
            moveRight();
            break;
        }
      },
    );
  }

  //Functions

  //Movemoent Functions
  void moveUp() {
    if (myField.contains(playerPosition - numberInRow)) {
      setState(() {
        playerPosition -= numberInRow;
      });
    }
  }

  void moveDown() {
    if (myField.contains(playerPosition + numberInRow)) {
      setState(() {
        playerPosition += numberInRow;
      });
    }
  }

  void moveLeft() {
    if (myField.contains(playerPosition)) {
      if (leftCorner.contains(playerPosition)) {
      } else {
        setState(() {
          playerPosition--;
        });
      }
    }
  }

  void moveRight() {
    if (myField.contains(playerPosition)) {
      if (rightCorner.contains(playerPosition)) {
      } else {
        setState(() {
          playerPosition++;
        });
      }
    }
  }
  //Movemoent Functions

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/bg.png"),
              fit: BoxFit.cover,
            ),
          ),
          child: Column(
            children: [
              Expanded(
                flex: 5,
                child: GridView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: numberOfSquares,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: numberInRow,
                  ),
                  itemBuilder: (context, index) {
                    if (playerPosition == index) {
                      return MyPixel(
                        color: Colors.transparent,
                        child: const Myplayer(),
                      );
                    } else {
                      return MyPixel(
                        color: Colors.transparent,
                        child: Text(index.toString()),
                      );
                    }
                  },
                ),
              ),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        RoundIconButton(
                          icon: Icons.arrow_upward,
                          onPress: () {
                            direction = "up";

                            startgame();
                          },
                        ),
                        RoundIconButton(
                          icon: Icons.arrow_downward,
                          onPress: () {
                            direction = "down";

                            startgame();
                          },
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        RoundIconButton(
                          icon: Icons.arrow_back,
                          onPress: () {
                            direction = "left";

                            startgame();
                          },
                        ),
                        RoundIconButton(
                          icon: Icons.arrow_forward,
                          onPress: () {
                            direction = "right";

                            startgame();
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Solution

so I solved this with creating an empty list , whenever the object index is equal to the box index the the index is added to a list

if (playerPosition == index) {
if (feelField.contains(index)) {
} else {
 feelField.add(index);
 }
}

and I created a new widget to replace the current widget

import 'package:flutter/material.dart';

class FeelField extends StatelessWidget {
  const FeelField({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(1.0),
      child: Container(
        color: const Color.fromARGB(155, 244, 67, 54),
      ),
    );
  }
}

and in the Grid View I returned this :

if (feelField.contains(index)) {
 return const FeelField();
} else {
 return MyPixel(
color: Colors.transparent,
);

The UI Looks ugly haha but it's a solution . now the stadium looks like this

Answered By - Hichem Boutalbi