flutterscrollflutter-web

How to enable horizontal scroll on flutter web?


I hate posting previously asked questions but I think previous solutions for this issue are not supported anymore. I use the structure below to enable scrolling. The vertical scroll is fine on the web and mobile but the horizontal scroll is not active on the web. I searched for this issue and found out that horizontal scroll on the web is not supported on the new version of flutter. Even in some Google products such as Gmail, this feature is not usable.

Scrollbar(
                thumbVisibility: true,
                trackVisibility: true,
                child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                        child: Column(children: [scrollWiew()]))))

Is there a new way to activate the horizontal scroll on the web? Maybe using the default scrollbar of the browser may fit my project but I don't know whether it is doable.

Thanks.


Solution

  • You should add a custom scroll behaviour and horizontal scroll will work.

    class CustomScrollBehavior extends MaterialScrollBehavior {
      @override
      Set<PointerDeviceKind> get dragDevices => {
            PointerDeviceKind.touch,
            PointerDeviceKind.mouse,
          };
    }
    

    then inside MaterialApp widget:

    scrollBehavior: CustomScrollBehavior(),