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: ^0.1.2
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 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.
SingleChildScrollView
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,
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
Name | Type | Default | Description |
---|---|---|---|
controller | ScrollController | null | Controller for Scrollbar |
scrollDirection | Axis | null | Needed for supporting Drag functionality to work properly |
allowDrag | bool | true | Allows to scroll the list using scrollbar |
color | Color | Colors.grey | ScrollBar Color |
radius | double | 50 | Set Radius of ScrollBar |
thickness | double | 8 | Set Thickness of ScrollBar |
scrollbarFadeDuration | Duration | Duration(milliseconds: 300) | Sets scrollbar fade animation duration |
scrollbarTimeToFade | Duration | Duration(milliseconds: 600) | Fades scrollbar after certain duration |
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.