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

2,366

Solution 1

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,
      };
}

return MaterialApp(
      debugShowCheckedModeBanner: false,
      scrollBehavior: NoThumbScrollBehavior().copyWith(scrollbars: false),
      home: MainWindow(),
    );

Solution 2

Wrap your scrollable widget in ScrollConfiguration

ScrollConfiguration(
 behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
 child: ListView(...)
)
Share:
2,366
Kirill
Author by

Kirill

Updated on December 30, 2022

Comments

  • Kirill
    Kirill over 1 year

    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