(Flutter, dart) How to select specific Card in in Listview and toggle an icon color from white to gr-CodePudding

I have a listview that gets properties from a map like a picture and how many clicks. I am wondering how I can change color so I can display a green checkbox icon on a specific Card. As is now I am only able to change the color on all the checkboxes on all the cards at once. I guess I would like to be able to select just the tapped Card so that its checkbox changes to green. This is the most relevant code:

Main:

return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: ListView.builder(
            itemCount: widget._passoverCol.keys.length,
            itemBuilder: (BuildContext context, int index) 
             

              return Container(
                  height: 100,
                  padding: const EdgeInsets.all(8.0),
                  child: Stack(
                    children: <Widget>[
                      myCard(
                        fileName: widget._passoverCol.keys.elementAt(index),
                       

                        displayName: widget._passoverCol.values
                            .elementAt(index)
                            .displayName,
                        

                        tapsCount: widget._passoverCol.values
                            .elementAt(index)
                            .tapsCount,
                        

                        color: cardColor,
                        onTap: () {
                          setState(() {
                            cardColor = Colors.green;
});
                        },
                      ),
                      
                    ],
                  ));
            }),
      ),
    );
  }
}

Card:

class myCard extends StatefulWidget {
  const myCard({
    required this.tapsCount,
    required this.fileName,
    required this.displayName,
    this.onTap,
    this.color,
  });

  final int? tapsCount;
  final String? fileName;
  final String? displayName;
  final Color? color;
  final Function()? onTap;

  @override
  _myCardState createState() => _myCardState();
}

class _myCardState extends State<myCard> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap!,
      child: Card(
        child: Row(
          children: <Widget>[
            Expanded(
                child: Image.asset(
              //getImageFile()
              widget.fileName!,
              height: 100.0,
              width: 100.0,
            )),
            Padding(
              padding: const EdgeInsets.only(left: 32.0),
              child: Text(widget.displayName!),
            ),
            SizedBox(
              width: 15.0,
            ),
            Padding(
              padding: const EdgeInsets.only(right: 12.0),
              child: Text(
                widget.tapsCount!.toString(),
              ),
              
            ),
            Icon(FontAwesomeIcons.check, color: widget.color!),
            SizedBox(
              width: 200.0,
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

you can use the list of white colors for a specific card; otherwise set a color property in _passoverCol with the default value white color.

List<Color> colors = [Colors.white,Colors.white,Colors.white,Colors.white,Colors.white];

color: colors[index],
setState(() {
          colors[index] = Colors.green;
  });
},

//  set a color property in _passoverCol class  and change it like this
setState(() {
          widget._passoverCol.values
                .elementAt(index)
                .color = Colors.green;
  });
},

CodePudding user response：

Thank you guys a lot! I dicided to go for @BloodLoss answer! I had to mod a little though. I converted the map keys to a list. And then I used that variable in onTap as you can see in my code otherwise It was very much as the solution:

Main:

var keys = widget._passoverCol.keys.toList();

return Container(
                  height: 100,
                  padding: const EdgeInsets.all(8.0),
                  child: Stack(
                    children: <Widget>[
                      foodCard(
                        fileName: widget._passoverCol.keys.elementAt(index),
                        

                        displayName: widget._passoverCol.values
                            .elementAt(index)
                            .displayName,
                        

                        tapsCount: widget._passoverCol.values
                            .elementAt(index)
                            .tapsCount,
                        

                        color: selectColorKey!.contains(keys[index])
                            ? Colors.green
                            : Colors.white,
                        onTap: () {
                          setState(() {
                            selectColorKey!.add(keys[index]);
                          });
                        },

CodePudding user response：

Create Array to store your tap keys.

List<String> selectColorKey = [];

Add keys to array

selectColorKey.add(widget._passoverCol.keys.elementAt(index));

If you want to remove from the array when tapping again or click the remove button

 selectColorKey.removeWhere((e) => e == widget._passoverCol.keys.elementAt(index));

Checking logic

if(selectColorKey.contains(widget._passoverCol.keys.elementAt(index))) {
// set color to green
} else {
// set default color
}

Your Full Code

return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: ListView.builder(
            itemCount: widget._passoverCol.keys.length,
            itemBuilder: (BuildContext context, int index) 
              return Container(
                  height: 100,
                  padding: const EdgeInsets.all(8.0),
                  child: Stack(
                    children: <Widget>[
                      myCard(
                        fileName: widget._passoverCol.keys.elementAt(index),
                       

                        displayName: widget._passoverCol.values
                            .elementAt(index)
                            .displayName,
                        

                        tapsCount: widget._passoverCol.values
                            .elementAt(index)
                            .tapsCount,
                        

                        color:selectColorKey.contains(widget._passoverCol.keys.elementAt(index))? Colors.green:Colors.white,
                        onTap: () {
                          setState(() {selectColorKey.add(widget._passoverCol.keys.elementAt(index));
});
                        },
                      ),
                      
                    ],
                  ));
            }),
      ),
    );
  }
}