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(),
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),

Solution

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(),
                      ),
                    ),
                  ))
            ],
          ),
        ),
      ],
    ),

Comments

[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.