desktop_scrollbar

Description:

desktop scrollbar

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
copied to clipboard
Or, add desktop_scrollbar to your dependencies in your pubspec.yaml file
# pubspec.yaml
dependencies:
desktop_scrollbar:
copied to clipboard
Then include it in your source code by importing the library via:
import 'package:desktop_scrollbar/desktop_scrollbar.dart';
copied to clipboard
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,
copied to clipboard
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()
copied to clipboard
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 #