Remove selection in List after second Click flutter List

Question

I have a list which show List of string the code is here below:

class CmCoinsValue extends StatefulWidget {
  @override
  _CmCoinsValueState createState() => new _CmCoinsValueState();
}

class _CmCoinsValueState extends State<CmCoinsValue> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.all(8),
        itemCount: CoinsChoice.coins.length,
        itemBuilder: (BuildContext context, int index) {
          return FlatButton(
            onPressed: () {
              if (selected) {
                // Again Click on Same Item
                setState(() {
                  selected = false;
                });
                // Set to -1 to indicate nothing is selected!
              } else {
                setState(() {
                  selected = true;
                });
                // Set Index to note the Selected Item
              }
            },
            child: new Card(
              color: Colors.lightBlueAccent,
              shape: selected // Check whether it is selected
                  ? new RoundedRectangleBorder(
                      side: new BorderSide(color: Colors.redAccent, width: 6.0),
                      borderRadius: BorderRadius.circular(4.0))
                  : new RoundedRectangleBorder(
                      side: new BorderSide(color: Colors.transparent, width: 2.0),
                      borderRadius: BorderRadius.circular(4.0)),
              child: new Padding(
                padding: const EdgeInsets.all(4.0),
                child: Container(
                  height: 35,
                  width: 100,
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Text(
                        '${CoinsChoice.coins[index]}',
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
        });
  }
}

the problem is , at the moment i didnt achieve what I want. Actually if I click on an Item all the items will be selected and a border appears to all, what I want is first of all if I click again the item will be unselected and, I want that just one item is selected and unselected not all. any info about that?

Answer 1

I could give you an idea. Do something like this,

class _CmCoinsValueState extends State<CmCoinsValue> {
  bool selected = false;
  int selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.all(8),
        itemCount: CoinsChoice.coins.length,
        itemBuilder: (BuildContext context, int index) {
          return FlatButton(
            onPressed: (){
              if(selectedIndex == index) {    // Again Click on Same Item
                  setState(() {
                     selectedIndex = -1;
                     selected = false;
                   });  
                // Set to -1 to indicate nothing is selected!
              } else {
                setState(() {
                  selectedIndex = index;
                  selected = true;    
                });
                // Set Index to note the Selected Item
              }
            },
            child: new Card(
              color: Colors.lightBlueAccent,
              shape: ( selected && selectedIndex == index)      // Check whether it is selected
                  ? new RoundedRectangleBorder(
                  side: new BorderSide(color: Colors.redAccent, width: 6.0),
                  borderRadius: BorderRadius.circular(4.0))
                  : new RoundedRectangleBorder(
                  side: .......

Hope that works!