GitLocker: The Coding Marketplace

Description:

vs scrollbar

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
copied to clipboard
Import
import 'package:vs_scrollbar/vs_scrollbar.dart';
copied to clipboard
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));
},
),
)
copied to clipboard

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.