How to change the color of each square by touching it in a square grid?

Question

Change the color of the squares of the square grid

dart - I am trying to make a page with a square grid all over with small squares. When any square is touched, the color of that square should change to green. (for touch test) Can anyone help?

Like this :

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'),
      ),
    );
  }
}

In this program, by touching each square, it will be return to the 'DetailPage' I just want the color of the touched square to change.

Answer 1

If you are wanting to change the colour on tap, you will first need to use a stateful widget so that the List of BoxDecorations can update without a refresh.

The program you have above already has a way of finding the index of the box that has been tapped (tappedIndex), so we can use that and just check whether this tappedIndex is equal to the index of each box (found in List.generate(), and set the box to green if true.

We also need to remember to use setState() when setting the tappedIndex so that the grid view will update.

Here is the final MyPage () code.

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  int? tappedIndex;
  @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);

            setState(() {
              tappedIndex = (localPosition.dx ~/ boxSize) +
                  (localPosition.dy ~/ boxSize) * columns;
            });
          },
          child: GridView.count(
            crossAxisCount: columns,
            children: List.generate(
              totalBoxes,
              (index) => Container(
                decoration: BoxDecoration(
                  color: index == tappedIndex ? Colors.green : Colors.blue,
                  border: Border.all(color: Colors.white),
                ),
              ),
            ),
          ),
        );
      },
    );
  }

The above is just the simplest way to achieve a colour changing box based on the example you gave, with the fewest changes. There are other ways to achieve the same result!

Hope this helps!