Flutter web - horizontal singlechildscrollview cannot scroll with mouse wheel

Question

I want to scroll a SingleChildScrollView() horizontally with mouse wheel in Flutter web but the SingleChildScrollView() is inside a ListView() and when i try to scroll it with the mouse wheel it scrolls the ListView().

This is my code

 child: ListView(
 children: [
 Container(
 width: 420.0,
 child: Row(
 children: [
 Expanded(
 child: Text(
 'Popular Search',
 ),
 ),
 Expanded(
 flex: 3,
 child: SingleChildScrollView(
 scrollDirection: Axis.horizontal,
 child: Row(
 children: categoriesList.map((e) {
 return Container(
 decoration: BoxDecoration(
 borderRadius:
 BorderRadius.all(Radius.circular(12.0)),
 color: Colors.white,
 ),
 child: Text(
 e,
 style: TextStyle(
 fontSize: 13.0,
 ),
 ),
 );
 }).toList(),
 ),
 ),
 )
 ],
 ),
 ),
 ],
 ),

• Jefriiyer S: I'm also having the same issue :(
• Soorya: I'm also facing the same issue. I tried this stackoverflow.com/questions/69154468/… answer but did not work for me. Let me know if you found a solution. As a quick fix, I added a scrollbar & made it always visible for scrolling.

Answer 1

Wrap your inner SingleChildScrollView with Listener and add onPointerSignal callback, and you can get a offset in y axis when use mouse wheel. Then, scroll inner SingleChildScrollView and forbid outer ListView from scrolling. Here is my code and it works on dartpad.

final outerController = ScrollController();
final innerController = ScrollController();
ListView(
 controller: outerController,
 children: [
 Container(
 width: 420.0,
 child: Row(
 children: [
 Expanded(
 child: Text(
 'Popular Search',
 ),
 ),
 Expanded(
 flex: 3,
 child: Listener(
 onPointerSignal: (event) {
 if (event is PointerScrollEvent) {
 final offset = event.scrollDelta.dy;
 innerController.jumpTo(innerController.offset + offset);
 outerController.jumpTo(outerController.offset - offset);
 }
 },
 child: SingleChildScrollView(
 controller: innerController,
 scrollDirection: Axis.horizontal,
 child: Row(
 children: categoriesList.map((e) {
 return Container(
 decoration: BoxDecoration(
 borderRadius:
 BorderRadius.all(Radius.circular(12.0)),
 color: Colors.white,
 ),
 child: Text(
 e,
 style: TextStyle(
 fontSize: 13.0,
 ),
 ),
 );
 }).toList(),
 ),
 ),
 ))
 ],
 ),
 ),
 ],
 ),