How to change the color of a container in a row having multiple containers in Flutter

Issue

I know this question has been asked before, and here's the link to that question:

How do i change the color and text of Container at onTap event in FLUTTER

However in my case I have around 50 containers in a row, so using the provided solution would be extremely lengthy.

Is there any shortcut using UniqueKeys()??

Solution

Try this:

    class _TestState extends State<Test> {
      int selected = 0;
    
      List<Widget> _containerList() {
        return List.generate(50, (index) {
          return GestureDetector(
              onTap: () {
                setState(() {
                  selected = index;
                });
              },
              child: Container(
                height: 200,
                width: 200,
                color: selected == index ? Colors.blue : Colors.transparent,
                child: Text("$index"),
              ),
            );
        }).toList();
      }
    
      @override
      Widget build(BuildContext context) {
        return Column(
          children: _containerList(),
        );
      }
    }

OR

ListView.builder(
scrollDirection: Axis.horizontal,
          itemCount: 50,
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: () {
                setState(() {
                  selected = index;
                });
              },
              child: Container(
                height: 200,
                width: 200,
                color: selected == index ? Colors.blue : Colors.transparent,
                child: Text("$index"),
              ),
            );
          }
        )

OR

Wrap(children: _containerList(),)

Answered By - Jim