vs_scrollbar Pub

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

Table of Contents


Add to pubspec.yaml file

  vs_scrollbar: ^0.1.2


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 adjust 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.

Wrap This ScrollBar to any ScrollableList.


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();

   controller: _scrollController,
   scrollDirection: Axis.vertical, // @REQUIRED
   allowDrag: true, // allows to scroll the list using scrollbar [default : true]
   color: Colors.purple[900], // sets color of vsScrollBar
   radius: 50, // sets radius of vsScrollBar
   thickness: 8, // sets thickness of vsScrollBar
   isAlwaysShown: true, // default false
   // sets scrollbar fade animation duration [ Default : Duration(milliseconds: 300)]
   scrollbarFadeDuration: Duration(milliseconds: 500),
   // Fades scrollbar after certain duration [ Default : Duration(milliseconds: 600)]
   scrollbarTimeToFade: Duration(milliseconds: 800),
   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

controllerScrollControllernullController for Scrollbar
scrollDirectionAxisnullNeeded for supporting Drag functionality to work properly
allowDragbooltrueAllows to scroll the list using scrollbar
colorColorColors.greyScrollBar Color
radiusdouble50Set Radius of ScrollBar
thicknessdouble8Set Thickness of ScrollBar
scrollbarFadeDurationDurationDuration(milliseconds: 300)Sets scrollbar fade animation duration
scrollbarTimeToFadeDurationDuration(milliseconds: 600)Fades scrollbar after certain duration

Pull request and feedback are always appreciated :)

Show some :heart: and star the repo.

GitHub followers Twitter Follow

: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.