(Трепетание) Выберите Эффект для элементов в Grid View Builder?

Question

как изменить цвет виджета CARD, если щелкнуть по одному из элементов сетки, то CARD меняет цвет. но вы можете выбрать только один предмет. как мне это сделать ???

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

Это будет работать отлично, проверьте код ниже:

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

Вывод: введите описание изображения здесь

I надеюсь, что это поможет вам.