更改正方形网格的正方形颜色

dart -我试图使一个页面与正方形网格所有与小方块。当触摸任何方块时，该方块的颜色应变为绿色。（触摸测试）有人能帮忙吗？
像这样：

import 'package:flutter/material.dart';
class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        double screenWidth = constraints.maxWidth;
        double screenHeight = constraints.maxHeight;
        
        double boxSize =
            screenWidth < screenHeight ? screenWidth / 10 : screenHeight / 10;
        int columns = (screenWidth / boxSize).floor();
        int rows = (screenHeight / boxSize).floor();
        int totalBoxes = columns * rows;

        return GestureDetector(
          onTapDown: (TapDownDetails details) {
            RenderBox box = context.findRenderObject() as RenderBox;
            Offset localPosition = box.globalToLocal(details.globalPosition);

            int tappedIndex = (localPosition.dx ~/ boxSize) +
                (localPosition.dy ~/ boxSize) * columns;

            if (tappedIndex >= 0 && tappedIndex < totalBoxes) {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailPage(),
                ),
              );
            }
          },
          child: GridView.count(
            crossAxisCount: columns,
            children: List.generate(
              totalBoxes,
              (index) => Container(
                decoration: BoxDecoration(
                  color: Colors.blue,
                  border: Border.all(color: Colors.white),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Page'),
      ),
      body: Center(
        child: Text('Detail Page Content'),
      ),
    );
  }
}

在这个程序中，通过触摸每个方块，它将返回到'DetailPage'我只是希望触摸方块的颜色改变。