vickysalunkhe / vs_scrollbar

Customizable ScrollBar that can be dragged for quick navigation supporting both Horizontal and Vertical list.

vs_scrollbar

Customizable ScrollBar that can be dragged for quick navigation supporting both Horizontal and Vertical list.

---

Table of Contents

• Installing - How to install
• Package Details - Package Details
• Example - How this plugin works
• Code example - How to use
• VsScrollBar object properties - Modifying your VsScrollBar

---

Installing

Add to pubspec.yaml file

dependencies:
  vs_scrollbar: ^1.0.0

Import

import 'package:vs_scrollbar/vs_scrollbar.dart';

Package Details

Customizable ScrollBar that can be dragged for quick navigation supporting both Horizontal and Vertical list.

You can customize scrollbar's thickness, radius, set custom colors and handle support for list drag functionality with prebuilt methods of default ScrollBar for Flutter.

Control animation duration of scrollbar using scrollbarTimeToFade, scrollbarFadeDuration properties.

Drag Behaviour with scrollbar is by default supported, if ScrollController object is passed.

Wrap This ScrollBar to any ScrollableList.
SingleChildScrollView
GridView
ListView
Listview.builder

Example

Try out example code all parameters are optional, currently serving basic use case scenarios.

Horizontal List

---

Vertical List

Code example

// use same scrollController object to listview and scrollbar to support drag functionality
ScrollController _scrollController = ScrollController();

VsScrollbar(
   controller: _scrollController,
   showTrackOnHover: true,// default false
   isAlwaysShown: true, // default false
   scrollbarFadeDuration: Duration(milliseconds: 500), // default : Duration(milliseconds: 300)
   scrollbarTimeToFade: Duration(milliseconds: 800),// default : Duration(milliseconds: 600)
   style: VsScrollbarStyle(
            hoverThickness: 10.0, // default 12.0
            radius: Radius.circular(10), // default Radius.circular(8.0)
            thickness: 10.0, // [ default 8.0 ]
            color: Colors.purple.shade900, // default ColorScheme Theme
          ),
   child: ListView.builder(
             controller: _scrollController, 
             shrinkWrap: true,
             physics: BouncingScrollPhysics(),
             itemCount: 6,
             scrollDirection: Axis.vertical,
             itemBuilder: (BuildContext context, int index) {
                   return Container(
                          height: 100,
                          width: MediaQuery.of(context).size.width,
                          color: Colors.purple[900],
                          margin: EdgeInsets.all(15));
             },
   ),
)

---

VsScrollbar object properties

Name	Type	default	Description
controller	ScrollController	null	Controller for Scrollbar
scrollbarFadeDuration	Duration	Duration(milliseconds: 300)	Sets scrollbar fade animation duration
scrollbarTimeToFade	Duration	Duration(milliseconds: 600)	Fades scrollbar after certain duration
isAlwaysShown	bool	false	controls visibility of scrollbar when ideal
showTrackOnHover	bool	false	controls visibility of scrollbar while hovering
style	VsScrollbarStyle	VsScrollbarStyle()	Style Class for VsScrollBar

VsScrollbarStyle object properties

Name	Type	default	Description
color	Color	System ColorScheme Theme	ScrollBar Color
radius	Radius	Radius.circular(8.0)	Set Radius of ScrollBar
thickness	double	8.0	Set Thickness of ScrollBar
hoverThickness	double	12.0	Set Hover Thickness of ScrollBar

---

Pull request and feedback are always appreciated :)

---

Show some ❤️ and star the repo.

---

❤️ Found this project useful?

If you found this project useful, then please consider giving it a ⭐ on Github and sharing it with your friends via social media.

---

---

vs_scrollbar's Issues

Error: isPointerOverScrollbar - arguments: 2 required, 1 given

Hi, after a flutter upgrade a got this error on run:

vs_scrollbar.dart:317:31: Error: Too few positional arguments: 2 required, 1 given. if (isPointerOverScrollbar(event.position)) {

They added on more argument on isPointerOverScrollbar function (flutter scrollbar widget) as I saw.

My flutter doctor result:

[✓] Flutter (Channel stable, 2.2.0, on macOS 11.4 20F71 darwin-arm, locale el-GR)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.56.2)
[✓] Connected device (1 available)

Could you fix it please?

Thank you!

[Feature request] Support duration customization

Just add a property which default to _kScrollbarTimeToFade, the default duration 0.6s is too short if I use touchpad and want to catch the scrollbar.

reverse: true breaks the horizontal scrollbar

When setting a ListView to have reverse:true the scrollbar becomes unusable. I didn't test it with a vertical ListView but it won't work with a horizontal one.

Change track size

Hey, thanks for the awesome package.

it would be great if we could change scrollbar track size just like in the image.

Thanks.

scrollbar color and background style

hello,
i want to set scrollbar background style, what should i do!

Null safety

Could you please upgrade the package for null safety?

Flutter 3.12.0: Error: No named parameter with the name 'isAlwaysShown'.

On Flutter 3.12.0, i get the following error:

Error (Xcode): ../../.pub-cache/hosted/pub.dev/vs_scrollbar-0.2.1/lib/vs_scrollbar.dart:143:11: Error: No named parameter with the name 'isAlwaysShown'.

It happens because they removed the deprecated param isAlwaysShown from RawScrollbar (https://api.flutter.dev/flutter/widgets/RawScrollbar/isAlwaysShown.html)

No named parameter with the name 'isAlwaysShown'.

Run project in Flutter 3.13.1，as follow:

[+2710 ms] ../../.pub-cache/hosted/pub.dev/vs_scrollbar-0.2.1/lib/vs_scrollbar.dart:143:11: Error: No named parameter with the name 'isAlwaysShown'.
[ ] isAlwaysShown: isAlwaysShown,
[ ] ^^^^^^^^^^^^^
[+1184 ms] ../../.pub-cache/hosted/pub.dev/vs_scrollbar-0.2.1/lib/vs_scrollbar.dart:174:14: Error: The getter 'isAlwaysShown' isn't defined for the class '_MaterialScrollbar'.
[ ] - '_MaterialScrollbar' is from 'package:vs_scrollbar/vs_scrollbar.dart' ('../../.pub-cache/hosted/pub.dev/vs_scrollbar-0.2.1/lib/vs_scrollbar.dart').
[ ] Try correcting the name to the name of an existing getter, or defining a getter or field named 'isAlwaysShown'.
[ ] widget.isAlwaysShown ?? _scrollbarTheme.isAlwaysShown ?? false;
[ ] ^^^^^^^^^^^^^
[ ] ../../.pub-cache/hosted/pub.dev/vs_scrollbar-0.2.1/lib/vs_scrollbar.dart:174:47: Error: The getter 'isAlwaysShown' isn't defined for the class 'ScrollbarThemeData'.
[ ] - 'ScrollbarThemeData' is from 'package:flutter/src/material/scrollbar_theme.dart' ('../../GreenSoft/flutter/packages/flutter/lib/src/material/scrollbar_theme.dart').
[ ] Try correcting the name to the name of an existing getter, or defining a getter or field named 'isAlwaysShown'.
[ ] widget.isAlwaysShown ?? _scrollbarTheme.isAlwaysShown ?? false;
[ ] ^^^^^^^^^^^^^

Draggable Scrollbar

Is it possible to implement the function of dragging the scrollbar and moving the list?

Disable horizontal drag for vertical scroll views, vice verse

For example, the default scroll direction of ListView is vertical, and shouldn't response to horizontal drag event, but it did.

A ideal solution is check the scroll direction of child, I have no idea about that.
Another simple solution is split allowDrag param into allowVerticalDrag=true and allowHorizontalDrag=false.

Custom content for scrollbar thumb

Thanks for this cool package!

Would it be possible to add a property thumbContent or similar (of type Widget) for customizing the content of the scrollbar thumb?
E.g. I would want to add two arrows or maybe a text.