Search code examples
flutterflutter-layoutscrollbar

Flutter how to hide a scrollbar(thumb) in scrollable widgets like Listview.builder, SingleChildScrollView, etc


Is there any way to remove scrollbar from a SingleChildScrollView and Listview.builder? After the latest update, it appears automatically while scrolling (Platform Windows).

I've tried this solution:

 NotificationListener<ScrollNotification>(
     onNotification: (_) => true,
     child: ...,
    );

And also tried to wrap my widget tree in a Scrollbar widget with isAlwaysShown and controller, but both variants didn't work.

Still here


Solution

  • To hide a scrollbar on desktop/web wrap your widget tree in a ScrollConfiguration widget with behavior of ScrollConfiguration.of(context).copyWith(scrollbars: false),

     ScrollConfiguration(
          behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
          child: ...,),
    
    

    or you can add scrollBehavior to MaterialApp widget

    class NoThumbScrollBehavior extends ScrollBehavior {
      @override
      Set<PointerDeviceKind> get dragDevices => {
            PointerDeviceKind.touch,
            PointerDeviceKind.mouse,
            PointerDeviceKind.stylus,
            PointerDeviceKind.trackpad,
          };
    }
    
    return MaterialApp(
          debugShowCheckedModeBanner: false,
          scrollBehavior: NoThumbScrollBehavior().copyWith(scrollbars: false),
          home: MainWindow(),
        );