vs_scrollbar

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

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: ^0.2.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 :heart: and star the repo.

:heart: Found this project useful?

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

vs_scrollbar package