Flutter: Select effect on items in Grid View Builder

Question

How can I change the color of the CARD widget if one of the gridview items is clicked and then the CARD changes color? But you can only choose one item. How do I make it?

Widget listDenomPulsa(AsyncSnapshot <List<Payload>> snapshot) {
    return GridView.builder(
        shrinkWrap: false,
        scrollDirection: Axis.vertical,
        itemCount: snapshot.data.length,
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: MediaQuery.of(context).size.width / (MediaQuery.of(context).size.height / 3),
        ),
        itemBuilder: (BuildContext context, int index) {
          bool _selectItem = false;
          return GestureDetector(
            onTap: () {
              setState(() {
                  _selectItem = true;
              });
            },
            child: Card(
              color: _selectItem ? Colors.blue:Colors.amber,
              child: Container(
                height: SizeConfig.heightMultiplier * 3,
                child: Padding(
                  padding: EdgeInsets.all(SizeConfig.heightMultiplier * 3),
                  child: Text(
                    snapshot.data[index].desc,
                    style: AppTheme.styleSubTitleBlackSmall,
                  ),
                ),
              ),
            ),
          );
        }
    );
  }

Answer 1

This would work perfectly. Check the code below:

class MyGridView extends StatefulWidget {
  @override
  _MyGridViewState createState() => _MyGridViewState();
}

class _MyGridViewState extends State<MyGridView> {

  // Set an int with value -1 since no card has been selected
  int selectedCard = -1;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        shrinkWrap: false,
        scrollDirection: Axis.vertical,
        itemCount: 10,
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 3),
        ),
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
              setState(() {
                // Ontap of each card, set the defined int to the grid view index
                selectedCard = index;
              });
            },
            child: Card(
              // Check if the index is equal to the selected Card integer
              color: selectedCard == index ? Colors.blue : Colors.amber,
              child: Container(
                height: 200,
                width: 200,
                child: Center(
                  child: Text(
                    '$index',
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ),
            ),
          );
        });
  }
}

Output: