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

Question

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()??

Answer 1

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(),)

Answer 2

You can do something like this..

class HomePage extends StatefulWidget {
  
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  
  var _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
        onRefresh: () async {
          //write your code here to update the list*********
        },
        child: ListView.builder(
          itemCount: 100,
          itemBuilder: (BuildContext context, int index) {
            return InkWell(
              onTap: () {
                setState(() { _selectedIndex = index; });
              },
              child: Text(
                'Line $index', 
                style: TextStyle(
                  color: _selectedIndex == index ? Colors.red : Colors.black,
                )
              ),
            );
          }
        )
      ),
    );
  }
}

Answer 3

List<String> _selectedIndexs = [];ListView.separated(
                    padding: EdgeInsets.zero,
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext context, int index) {
                      final _isSelected = _selectedIndexs.contains(index);
                      return GestureDetector(
                        onTap: () {
                          setState(() {
                            if (_isSelected) {
                              _selectedIndexs.remove(index);
                            } else {
                              _selectedIndexs.add(index);
                            }
                           print(_selectedIndexs);
                          });
                        },
                        child: Container(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 25, vertical: 10),
                          decoration: BoxDecoration(
                              color: _isSelected
                                  ? ContainerColors.selectedBgColor
                                  : priorityChipBg,
                              borderRadius: BorderRadii.radius8px,
                              border: Border.all(
                                  color: _isSelected
                                      ? BorderColor.bordersecondaryBlue
                                      : chipBorderColor)),
                          child: Text(
                            requestPriority[index],
                            style: _isSelected
                                ? AppFonts.mediumTextBB.copyWith(
                                    color: TextColors.themeColor,
                                    fontSize: 14,
                                    fontWeight: FontWeight.w900)
                                : chipTextStyle,
                          ),
                        ),
                      );
                    },
                    separatorBuilder: (BuildContext context, int index) {
                      return const SizedBox(
                        width: 20,
                      );
                    },
                    itemCount: 3,
                  ),
                ),