CODEWITHSUNDEEP
flutterdartflutter-layout
Max
Max

Reputation: 1301

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

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

enter image description here

Upvotes: 0

Views: 900

Answers (2)

MaNDOOoo
MaNDOOoo

Reputation: 1555

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

Upvotes: 2

Ivo
Ivo

Reputation: 23357

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

Upvotes: 4

Related Questions