Making a list view skip its parent's padding while maintaining clickability

Question

Here's my ListView. I want it to be clickable not just visible, while skipping its parent column's padding. Right now it's just visible and not clickable because of the OverflowBox widget.

   return SizedBox(
      height: 65,
      child: OverflowBox(
        maxWidth: MediaQuery.of(context).size.width,
        alignment: Alignment.centerLeft,
        child: ListView.builder(
          itemCount: galleryItems.length,
          scrollDirection: Axis.horizontal,
          physics: const BouncingScrollPhysics(),
          itemBuilder: (_, idx) {
            final galleryItem = galleryItems[idx];
            return InkWell(
              onTap: () {
                Get.to(
                  () => CustomerPictureScreen(),
                  arguments: {
                    'galleryImage': galleryItem.galleryImage,
                  },
                );
              },
              child: GalleryItemDetailsScreen(
                galleryImage: galleryItem.galleryImage,
                galleryImageId: galleryItem.galleryImageId,
              ),
            );
          },
        ),
      ),
    );
  }
}

And here's my column:

return Padding(
    padding: EdgeInsets.only(
      top: small + 4,
      left: medium,
      right: medium,
    ),
    child: Column(
      children: [
        LabelSection(text: 'About', style: headingBookingScreen),
        SizedBox(
          height: medium,
        ),
        AboutSection(
          about: about,
        ),
        SizedBox(
          height: medium,
        ),
        LabelSection(
          text: 'Gallery',
          style: headingBookingScreen,
        ),
        SizedBox(
          height: medium,
        ),
        const GalleryDetailsScreen(),
        SizedBox(
          height: medium,
        ),
      ],
    ),
  );
}
}

Here's what I mean in pictures:

Any help would be appreciated.

Thank you.

score 1 · Answer 1 · answered Jun 23 '23 at 19:21

To make a ListView clickable and skip its parent column's padding, you can wrap the ListView widget with a GestureDetector and adjust the padding accordingly. Here's an example code snippet to demonstrate this:

Column(
 children: [
 Padding(
   padding: EdgeInsets.symmetric(horizontal: 20.0),
   child: GestureDetector(
     onTap: () {
       // Handle ListView click event here
     },
     child: OverflowBox(
        maxHeight: 200.0, // Set the desired height
        child: ListView(
          shrinkWrap: true,
          children: [
           // Your ListView items here
         ],
       ),
     ),
   ),
 ),
],)

In the above code, the ListView is wrapped with a GestureDetector widget to make it clickable. The GestureDetector's onTap callback is where you can handle the click event. The Padding widget is used to add the desired padding around the ListView. The OverflowBox widget ensures that the ListView can exceed the parent's constraints and display its full content.

Making a list view skip its parent's padding while maintaining clickability

1 Answers1