unable to add GestureDetector to scrollable items

[lastmeta]

say I scroll to a particular item. Then I tap it, well I can't tap it because if I put a GestureDetector on the item it will pick up the behavior and now I can't scroll.

so I can't have any behavior occur on the items if I want to use this package. for instance, I scroll to an item then tap it to enter it's details or edit or something. no. not going to happen. I have to click a button outside the scrolling widget, not a parent of the scrollable list or child in the item builder, but a button somewhere else.

am I wrong about this? is this a known limitation of the scroll_snap_list? or is there a very simple solution that I don't see?

for example:

GestureDetector(
      onTap: () {
        print('hitparents'); // never hits
      },
      child: Container(
          height: 70,
          width: screen.width * 2 / 3,
          alignment: Alignment.bottomCenter,
          child: ScrollSnapList(
              dispatchScrollNotifications: true,
              scrollPhysics: BouncingScrollPhysics(),
              listController: listScroll,
              selectedItemAnchor: SelectedItemAnchor.START,
              scrollDirection: Axis.horizontal,
              curve: Curves.easeInOutCubic,
              duration: 100,
              onItemFocus: (index) => setState(() {
                    print(index);
                    selectedIndex = index;
                  }),
              itemSize: screen.width / 3,
              itemCount: 107,
              itemBuilder: (buildContext, index) =>
                // unable to have a GestureDetector here or else I can't click on a item in the list to auto focus it... even if I set it to translucent. 
                  Container(
                    width: screen.width / 3,
                    padding: EdgeInsets.only(left: .25, bottom: 2),
                    alignment: Alignment.bottomCenter,
                    child: CircleImage(image: HypyrIcons.ad('ad').image),
                  ))))
]);

[Mohamed-Ayman-Dev]

Did you find any solution please?

[Mohamed-Ayman-Dev]

for anyone stuck with this ,

just create a key like this
GlobalKey sslKey = GlobalKey(); // Create a GlobalKey

now go to the snap list and add the key like this and set the focusonitemtap = true :
ScrollSnapList(
key: sslKey,
focusOnItemTap: true,
and in the on tab method add : sslKey.currentState?.focusToItem(index);

now you good to go

here is full code check it if i forgot someting:
ScrollSnapList(
key: sslKey,
// Set the GlobalKey here
margin: const EdgeInsets.symmetric(horizontal: 10),
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
// Set the selected index when an item is tapped
setState(() {
selectedIndex = index;
});
// Perform the desired action for the tapped item here
print('Tapped on item: $index');
// For example, navigate to item details or edit screen
// Manually trigger focus to the tapped item
sslKey.currentState?.focusToItem(index);
},
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: index == 0 || selectedIndex == index
? Colors.black
: Colors.transparent,
width: 0.8),
),
),
);
},
itemSize: 90,
selectedItemAnchor: SelectedItemAnchor.MIDDLE,
scrollDirection: Axis.horizontal,
dynamicItemSize: true,
reverse: true,
onReachEnd: () {},
focusOnItemTap: true,
// Allow automatic focus on item tap
itemCount: _effectsList.length,
onItemFocus: (index) {
// This method is called when an item is focused, but you can also use it to switch effects
_controller.switchEffect(_effectsList[index]);
setState(() {
selectedIndex = index;
});
},
)