Draggable Scrollbar - A scrollbar that can be dragged for quickly navigation through a vertical list.

Last update: Jun 10, 2022

Flutter Community: draggable_scrollbar

Draggable Scrollbar

Pub

A scrollbar that can be dragged for quickly navigation through a vertical list. Additionaly it can show label next to scrollthumb with information about current item, for example date of picture created

Usage

You can use one of the three built-in scroll thumbs, or you can create a custom thumb for your own app!

You can play with all of these examples by running the app found in the example folder.

Example

Semicircle Thumb

DraggableScrollbar.semicircle(
  controller: myScrollController,
  child: GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 5,
    ),
    controller: myScrollController,
    padding: EdgeInsets.zero,
    itemCount: 1000,
    itemBuilder: (context, index) {
      return Container(
        alignment: Alignment.center,
        margin: EdgeInsets.all(2.0),
        color: Colors.grey[300],
      );
    },
  ),
);

Arrows thumb + label

DraggableScrollbar.arrows(
  labelTextBuilder: (double offset) => Text("${offset ~/ 100}"),
  controller: myScrollController,
  child: ListView.builder(
    controller: myScrollController,
    itemCount: 1000,
    itemExtent: 100.0,
    itemBuilder: (context, index) {
      return Container(
        padding: EdgeInsets.all(8.0),
        child: Material(
          elevation: 4.0,
          borderRadius: BorderRadius.circular(4.0),
          color: Colors.purple[index % 9 * 100],
          child: Center(
            child: Text(index.toString()),
          ),
        ),
      );
    },
  ),
);

Rounded Rectangle Thumb

DraggableScrollbar.rrect(
  controller: myScrollController,
  child: ListView.builder(
    controller: myScrollController,
    itemCount: 1000,
    itemExtent: 100.0,
    itemBuilder: (context, index) {
      return Container(
        padding: EdgeInsets.all(8.0),
        child: Material(
          elevation: 4.0,
          borderRadius: BorderRadius.circular(4.0),
          color: Colors.green[index % 9 * 100],
          child: Center(
            child: Text(index.toString()),
          ),
        ),
      );
    },
  ),
);

Custom

DraggableScrollbar(
  controller: myScrollController,
  child: ListView.builder(
    controller: myScrollController,
    itemCount: 1000,
    itemExtent: 100.0,
    itemBuilder: (context, index) {
      return Container(
        padding: EdgeInsets.all(8.0),
        child: Material(
          elevation: 4.0,
          borderRadius: BorderRadius.circular(4.0),
          color: Colors.cyan[index % 9 * 100],
          child: Center(
            child: Text(index.toString()),
          ),
        ),
      );
    },
  ),
  heightScrollThumb: 48.0,
  backgroundColor: Colors.blue,
  scrollThumbBuilder: (
    Color backgroundColor,
    Animation<double> thumbAnimation,
    Animation<double> labelAnimation,
    double height, {
    Text labelText,
  }) {
    return FadeTransition(
      opacity: thumbAnimation,
      child: Container(
        height: height,
        width: 20.0,
        color: backgroundColor,
      ),
    );
  },
);

GitHub

https://github.com/fluttercommunity/flutter-draggable-scrollbar
Comments
  • 1. Perfect

    This is awesome.

    I have a request. You know how in a contracts app where you have a draggable scrollbar and it shows the first letter of the area you up to. For example as I drag scroll from N to O in the list it shows an O near the scroll bar ( or maybe in the top right of the screen ).

    Not sure how to do it because it means the scroll batmr needs to be sent a signal from the list view as it goes from N to O. So it's coupled.

    Reviewed by ghost at 2018-06-27 19:50
  • 2. [Proposed change] Possible to make the function generic so the list does not have to extend BoxScrollView?

    I wanted to use this with ImplicitlyAnimatedReorderableList, but that widget does not extend BoxScrollView which is needed by the draggable scrollbar. Would converting the DraggableScrollbar class into a generic class work for this widget?

    class DraggableScrollbar<T> extends StatefulWidget { /// The view that will be scrolled with the scroll thumb final T child;

    To use: DraggableScrollbar<ImplicitlyAnimatedReorderableList>

    Reviewed by ngxingyu at 2020-10-15 06:01
  • 3. Desktop windows : When the window is resize (ex : height is changed) -> thumb position is not correct.

    Hi,

    When the window is resize (ex : height is changed) -> thumb position is not correct.

    Steps :

    • Window is fullscreen, scroll position top most
    • Scroll down to middle
    • Resize window to smaller height
    • Scroll to top

    Thumb will not reach top position

    Maybe must add layout builder ? Not sure

    Reviewed by x4080 at 2020-10-07 22:02
  • 4. When i Scroll listview it showing this error

    ════════ Exception caught by gesture library ═══════════════════════════════════
    The following assertion was thrown while resolving a PointerSignalEvent:
    Cannot get size from a render object that has been marked dirty for layout.
    
    
    The size of this render object is ambiguous because this render object has been modified since it was last laid out, which typically means that the size getter was called too early in the pipeline (e.g., during the build phase) before the framework has determined the size and position of the render objects during layout.
    
    The size getter was called for the following element: DraggableScrollbar
        dirty
        dependencies: [_EffectiveTickerMode]
        state: _DraggableScrollbarState#f7719(tickers: tracking 2 tickers)
    The render object from which the size was to be obtained was: _RenderLayoutBuilder#671ac relayoutBoundary=up11 NEEDS-LAYOUT
    
    Consider using debugPrintMarkNeedsLayoutStacks to determine why the render object in question is dirty, if you did not expect this.
    
    When the exception was thrown, this was the stack
    C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 212:49      throw_
    packages/flutter/src/widgets/framework.dart 3812:9                                                                             <fn>
    packages/flutter/src/widgets/framework.dart 3829:7                                                                             get size
    packages/draggable_scrollbar/draggable_scrollbar.dart 359:20                                                                   get barMaxScrollExtent
    packages/draggable_scrollbar/draggable_scrollbar.dart 426:11                                                                   <fn>
    ...
    Event: PointerScrollEvent#1a7b4(position: Offset(321.0, 507.0), scrollDelta: Offset(-0.0, 5.0))
        position: Offset(321.0, 507.0)
        scrollDelta: Offset(-0.0, 5.0)
    ════════════════════════════════════════════════════════════════════════════════
    
    ════════ Exception caught by gesture library ═══════════════════════════════════
    Cannot get size from a render object that has been marked dirty for layout.
    ════════════════════════════════════════════════════════════════════════════════
    
    ════════ Exception caught by gesture library ═══════════════════════════════════
    Cannot get size from a render object that has been marked dirty for layout.
    ════════════════════════════════════════════════════════════════════════════════
    
    ════════ Exception caught by gesture library ═══════════════════════════════════
    Cannot get size from a render object that has been marked dirty for layout.
    ════════════════════════════════════════════════════════════════════════════════
    
    
    Reviewed by anandsubbu007 at 2020-08-25 03:20
  • 5. change BoxScrollView to Widget (rebase of #12)

    I rebased #12 on the current master as I wanted both the changes from #12 as well as null safety

    To use the fork, one can add the following to the pubspec.yaml:

      draggable_scrollbar:
        git:
          url: https://github.com/thielepaul/flutter-draggable-scrollbar.git
          ref: cfd570035bf393de541d32e9b28808b5d7e602df
    
    Reviewed by thielepaul at 2022-05-21 10:07
  • 6. Ability to use with PositionedList

    I have the Positioned List plugin, and it doesn't use a ScrollView, so it can't be the child of the DraggableScrollbar.

    Any way to support this? Or does it have to be a completely different widget?

    Reviewed by dovahkiin98 at 2022-05-02 08:58
  • 7. Reset thumb position

    I have a ListView and a DraggableScrollbar with it.

    The page has Search. So this scenario happens.

    The user scrolls to the middle of the page, and searches for an item. The list is filtered, but the thumb is still at the middle. Even if the user resets the list, the thumb is still at the middle.

    I tried controller.jumpTo but that didn't change the thumb position.

    Is there a way to control the thumb? Change its position or at least reset it along with the ListView?

    Reviewed by dovahkiin98 at 2022-02-23 12:06
  • 8. Fix scrollthumb shrinking when vertical padding provided

    When vertical padding is provided to the scrollbar, scroll thumb shrinks on reaching the end of scroll. This happens because barMaxScrollExtent doesn't count vertical padding provided to the widget.

    My fix changes this behavior by subtracting widget.padding?.vertical in barMaxScrollExtent.

    Reviewed by emvaized at 2021-12-09 21:14
  • 9. Ability to Add to CustomScrollView

    The flutter original scrollbar works on all scrolling widgets but is not as customizable as this package. Can you please fix the error with custom scrollviews or tell me how to implement it.

    Reviewed by anass-naoushi at 2021-06-19 02:18

Related

A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents.
A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents.

Sliding Sheet A widget that can be dragged and scrolled in a single gesture and snapped to a list of extents. Click here to view the full example. Ins

Mar 3, 2022
Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map.
Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map.

Custom Radio Group List Flutter package to create list of radio button, by providing a list of objects it can be a String list or list of Map. Feature

Nov 30, 2021
A widget that shows an image which can be scaled and dragged using gestures.
A widget that shows an image which can be scaled and dragged using gestures.

[DISCONTINUED] - 24.05.2021 While this widget was useful in the early days of Flutter, the Flutter team introduced an own way to zoom and pan, see Int

May 3, 2022
A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier.
A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier.

Draggable Home A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier! Based on the Scaffold and Sliver. Us

May 24, 2022
Show a draggable floating chat icon button and show messages on screens
Show a draggable floating chat icon button and show messages on screens

Show a draggable floating chat icon button and show messages on screens Features A widget for displaying a chat icon (or custom widget) on top of a ba

May 5, 2022
FLUTTER API: It's powerful navigation by gestures and taps. You can scroll from left to right or tap on the navigation icons.
FLUTTER API: It's powerful navigation by gestures and taps. You can scroll from left to right or tap on the navigation icons.

scroll_navigation My other APIs Video Viewer Video Editor Helpers Features Fancy animations. Customizable colors. Works with the back button. Scrollin

Jun 14, 2022
May 13, 2022
A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions
A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions

Snapping Sheet A package that provides a highly customizable sheet widget that snaps to different vertical & horizontal positions Can adapt to scrolla

Jun 21, 2022
App that simulates a flow of screens for the course of navigation and routes with nuvigator through Flutter
App that simulates a flow of screens for the course of navigation and routes with nuvigator through Flutter

Rotas app App que simula um fluxo de telas para o curso de navegação e rotas com

Dec 19, 2021
Feb 10, 2022
Flutter Navigation - all types of navigation in flutter run main.tabBar.dart to see tabBar, and run main.dart to see the otheres

pop_up_bar A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

Jan 1, 2022
Quickly configure three theme styles

flytheme 快速实现三种主题效果。 本插件是从矿小助App中拆分出来的,优化了很多细节,更加简单易用。 内置持久化存储(使用share_preference实现) 矿小助App:https://kxz.atcumt.com/ pub插件地址:https://pub.dev/packages/f

Apr 21, 2022
A super powerful widget to help developers build complex views quickly and comfortably.
A super powerful widget to help developers build complex views quickly and comfortably.

FSuper FSuper can help developers build complex views quickly and comfortably. It supports rich text, rounded corners, borders, pictures, small red do

Jun 30, 2022
A super powerful widget to help developers build complex views quickly and comfortably.
A super powerful widget to help developers build complex views quickly and comfortably.

FSuper FSuper can help developers build complex views quickly and comfortably. It supports rich text, rounded corners, borders, pictures, small red do

Jun 9, 2022
Flutter plugin for building pull to refresh effects with PullToRefreshNotification and PullToRefreshContainer quickly.

pull_to_refresh_notification Language: English | 中文简体 widget to build pull to refresh effects. Web demo for PullToRefreshNotification Chinese blog pul

Jun 20, 2022
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Jan 8, 2022
Flutter qidgets - Build widgets hierarchies quickly with qidgets

Build widgets hierarchies quickly with qidgets. Quick widgets → qidgets. Feature

Mar 31, 2022
Quickly is build as a tool to enhance your Flutter UI development experience and make code easier

Quickly is build as a tool to enhance your Flutter UI development experience and make code easier. It is highly inspired by Bootstrap and Tailwind CSS. It also provide lots of extension methods on String, List and Map.

Mar 14, 2022
Localize your flutter application quickly and easily.

EzLocalization This package allows you to setup a powerful localization system with ease and in only a few minutes. Features Here are some features: E

Dec 18, 2021