GithubHelp home page GithubHelp logo

inyong1 / vs_scrollbar Goto Github PK

View Code? Open in Web Editor NEW

This project forked from vickysalunkhe/vs_scrollbar

0.0 0.0 1.0 954 KB

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

License: MIT License

Objective-C 0.23% Kotlin 0.79% Dart 96.52% Swift 2.46%

vs_scrollbar's Introduction

vs_scrollbar Pub

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


Table of Contents


Installing

Add to pubspec.yaml file

dependencies:
  vs_scrollbar: ^0.2.1

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.

GitHub followers Twitter Follow


❤️ 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 People

Contributors

vickysalunkhe avatar jonmountjoy avatar bestfastfire avatar

Forkers

awtrepo

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.