Flutter Responsive grid view

I've just finished this small game , on the emulator that I'm using everything works perfectly , but when trying it on another device it doesn't look the same , so my question is how to make my grid view responsive with all the devices ? Grid View is the numbers from (0-170) .

in the Emulator :

in another device : I need to make this responsive ! and here's the full code of this screen :

 static int numberInRow = 19;
  int numberOfSquares = numberInRow * 9;

full code

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: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: GridView.builder(
                    shrinkWrap: true,
                    // physics: const NeverScrollableScrollPhysics(),
                    itemCount: numberOfSquares,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: numberInRow,
                    ),
                    itemBuilder: (context, index) {
                      //Enemy part
                      if (enemyposition == index) {
                        if (fillField.contains(enemyposition)) {
                          return Consumer<Myprovider>(
                            builder: (context, prov, child) {
                              return Enemy(
                                color: prov.fillColor ??
                                    Colors.blue.withOpacity(opacity),
                              );
                            },
                          );
                        }
                        return const Enemy(
                          color: Colors.transparent,
                        );
                      }
                      //Player Part
                      //Here i'm adding index to empty list so i can color the field
                      if (playerPosition == index) {
                        if (!fillField.contains(index)) {
                          fillField.add(index);
                        }
                      }

                      // here im puting the player in a random place in the field
                      if (playerPosition == index) {
                        return Consumer<Myprovider>(
                          builder: (context, prov, child) {
                            return MyPixel(
                              color: prov.fillColor ??
                                  Colors.blue.withOpacity(opacity),
                              child: direction == "left"
                                  ? Transform(
                                      alignment: Alignment.center,
                                      transform: Matrix4.rotationY(math.pi),
                                      child: const Myplayer(),
                                    )
                                  : const Myplayer(),
                            );
                          },
                        );
                        // Here i'm adding the remaining field without the player
                      } else {
                        // i'm checking if the player pass by a place then it should be colored
                        if (fillField.contains(index)) {
                          return const FillField();
                        } else {
                          // if it's not colored then it should be transparent
                          return MyPixel(
                            color: Colors.transparent,
                            child: Text(index.toString()),
                          );
                        }
                      }
                    },
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          RoundIconButtons(
                            icon: Icons.arrow_upward,
                            onPress: () {
                              direction = "up";
                            },
                          ),
                          RoundIconButtons(
                            icon: Icons.arrow_downward,
                            onPress: () {
                              direction = "down";
                            },
                          ),
                        ],
                      ),
                      Text(
                        "${((fillField.length / 1.7) - 1).round().toString()}%",
                        style: kTextStyle,
                      ),
                      Row(
                        children: [
                          RoundIconButtons(
                            icon: Icons.arrow_back,
                            onPress: () {
                              direction = "left";
                            },
                          ),
                          RoundIconButtons(
                            icon: Icons.arrow_forward,
                            onPress: () {
                              direction = "right";
                            },
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );