Change the color of an element when another element is selected in the ListView Flutter-CodePudding

Tell. When I select an item in the list, the item's color changes to green, so I can select all items - all items change color to green. But I need that when another element is selected, the previous element returns to its previous state. That is, so that only one element can burn green, and not all. Tell me how to implement? I will be grateful.

code

class _ListPoynts extends State<ListPoynts> {

  final List<bool> _selected = [];

  @override
  void initState() {
    for (var i = 0; i < poynts.length; i  ) {
      _selected.add(false);
    }
    super.initState();
  }

ListView.builder(
        physics: const BouncingScrollPhysics(),
        itemCount: poynts.length,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) => Stack(
          alignment: Alignment.topRight,
          children: [
            Positioned(
              child: Container(
                width: 176,
                alignment: Alignment.bottomCenter,
                child: InkWell(
                  onTap: () {
                    setState(() {
                      _selected[index] = !_selected.elementAt(index);
                    });
                  },
                  child: Container(
                    height: 72,
                    width: 146,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16),
                      color: _selected[index]
                          ? constants.Colors.greenMiddle
                          : constants.Colors.greyDark.withOpacity(0.7),
                    ),

CodePudding user response：

I would instead of a list of selected, just have an int. selectedIndex for example. Something like this might work:

class _ListPoynts extends State<ListPoynts> {

  int? _selectedIndex;

  @override
  void initState() {
    //no need to do anything here now
    super.initState();
  }

ListView.builder(
        physics: const BouncingScrollPhysics(),
        itemCount: poynts.length,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) => Stack(
          alignment: Alignment.topRight,
          children: [
            Positioned(
              child: Container(
                width: 176,
                alignment: Alignment.bottomCenter,
                child: InkWell(
                  onTap: () {
                    setState(() {
                      _selectedIndex = index;
                    });
                  },
                  child: Container(
                    height: 72,
                    width: 146,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16),
                      color: _selectedIndex == index
                          ? constants.Colors.greenMiddle
                          : constants.Colors.greyDark.withOpacity(0.7),
                    ),

CodePudding user response：

Use the one variable to save the selected index item. And use the null if there is no selected index.

class _ListPoynts extends State<ListPoynts> {
  int? _selectedIndex; // <-- HERE

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      physics: const BouncingScrollPhysics(),
      itemCount: poynts.length,
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) => Stack(
        alignment: Alignment.topRight,
        children: [
          Positioned(
            child: Container(
              width: 176,
              alignment: Alignment.bottomCenter,
              child: InkWell(
                onTap: () {
                  setState(() {
                    if (_selectedIndex == index) { // <-- HERE
                      _selectedIndex = null;
                    } else {
                      _selectedIndex = index;
                    }
                  });
                },
                child: Container(
                  height: 72,
                  width: 146,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    color: _selectedIndex == index 
                        ? constants.Colors.greenMiddle
                        : constants.Colors.greyDark.withOpacity(0.7),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}