Working with Tap function within LIstView

Question

I was testing the "tap function" for items within a ListView, but it does not seem to work. The print function does not work when I tap upon the list.

return Scaffold(
          appBar: AppBar(
            // App Bar
            title: Text(
              "ListView On-Click Event",
              style: TextStyle(color: Colors.grey),
            ),
            elevation: 0,
            backgroundColor: Colors.white,
          ),
          // Main List View With Builder
          body: ListView.builder(
              itemCount: imgList.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    print("button pressed");
                    print(index);
                  },
                  child: Container(
                    margin: const EdgeInsets.symmetric(
                      vertical: 2.0,
                      horizontal: 8.0,
                    ),
                    child: Stack(
                      children: <Widget>[
                        cardDesign,
                        cardImage,
                      ],
                    ),
                  ),
                ); // gesturedetector
              }));

Where am I going wrong?

Answer 1

Try to used Column instead of Stack

ListView.builder(
          shrinkWrap: true,
          itemCount: 10,
          itemBuilder: (context, index) {
            return GestureDetector(
               onTap: () {
                print("button pressed");
                print(index);
              },
              child: Container(
                margin: const EdgeInsets.symmetric(
                  vertical: 2.0,
                  horizontal: 8.0,
                ),
                child: Column(
                  children: <Widget>[
                    Text(index.toString()),//put your widgets here
                  ],
                ),
              ),
            ); // gesturedetector
          }),

Answer 2

//you can do like this

ListView.builder(
              itemCount: 5,
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, int index) {
                return VCContainer(
                  onTap: () {
                    for (int i = 0; i < 5; i++) {
                      if (i == index) {
                        setState(() {
                          selectedList[i] = true;
                        });
                      } else {
                        setState(() {
                          selectedList[i] = false;
                        });
                      }
                    }
                  },
                );
              },
            ),


// in VCContainer Class

VCContainer({required this.onTap});


  VoidCallback onTap;

Widget build(BuildContext context) {
    return 
        InkWell(
          onTap: onTap,
          child: Image.asset(
            imageList[index],
            width: 60,
            height: 60,
          ),
    );
  }