desktop_scrollbar 1.0.5

A flutter package that adds track clicking behavior to Scrollbars.

A Desktop/Web scrollbar for flutter that implements correct track click > jump behavior.

Desktop Scrollbar

Please see the comparisions below. On the top, you have the default flutter scrollbar. On the bottom, a Desktop scrollbar using this package.

Notice how when the track is clicked on the default flutter scrollbar, that it only jumps toward the cursor by a small amount? That is not how scrollbars are supposed to work on desktop.

You can see the correct behavior in the desktop scrollbar example gif, where the scrollbar thumb jumps to the clicked position on the track.

Features

• Correct implementation of scrollbar track click > jump behavior.
• Uses the same code as the flutter RawScrollbar widget, meaning the API is the same for the desktop_scrollbar package.

Install

To install, import the plugin using

flutter pub add desktop_scrollbar

Or, add desktop_scrollbar to your dependencies in your pubspec.yaml file

# pubspec.yaml
dependencies:
  desktop_scrollbar:

Then include it in your source code by importing the library via:

import 'package:desktop_scrollbar/desktop_scrollbar.dart';

Usage

To use a desktop scrollbar, wrap a scrollable widget with DesktopScrollbar and pass a ScrollControllerinstance to both DesktopScrollbar and the scrollable widget:

DesktopScrollbar(
     controller: scrollController,
     child: ListView.builder(
        controller: scrollController,

Preventing duplicate scrollbars on Desktop

To hide the scrollbar that automatically gets attached to scrollable widgets on desktop platforms, use the following code to disable the default scrollbar.

DesktopScrollbar(
        controller: widget.scrollController,
        trackVisibility: true,
        thumbVisibility: true,
        thickness: 10,
        trackColor: Colors.black,
        child: ScrollConfiguration(
          behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
          child: ListView.builder()

You can find a full example in the example file.

Customization

Please refer to the RawScrollbar documentation, as DesktopScrollbar uses the same underlying code.

Support this project