Flutter - Using Scrollbar Widget Example

This tutorial shows you how to use Scrollbar widget in Flutter.

Flutter has some widgets that allows you to create a scrollable list of items. If the list is very long, providing a scrollbar can be helpful for the users to make them more comfortable. However, Flutter's ScrollView widgets (e.g. ListView, GridView, CustomScrollView) do not display a scrollbar by default. Fortunately, Flutter provides an easy way to display the scrollbar. You can use a ScrollBar widget and pass a widget that contains ScrollView as the child. Below are the usage examples.

Using Scrollbar Widget

Below is the constructor of Scrollbar.

  const Scrollbar({
    Key? key,
    required Widget child,
    ScrollController? controller,
    bool? isAlwaysShown,
    bool? showTrackOnHover,
    double? hoverThickness,
    double? thickness,
    Radius? radius,
    ScrollNotificationPredicate? notificationPredicate,
  })

The only required argument is child whose type is Widget. The passed widget must contain a ScrollView in its subtree. If not, the below assertion error will be thrown.

  ScrollController not attached to any scroll views.
  'package:flutter/src/widgets/scroll_controller.dart':
  Failed assertion: line 108 pos 12: '_positions.isNotEmpty

You need to pass a widget subtree whose one of the nodes is a subclass of ScrollView (e.g. ListView, GridView, CustomScrollView).

For this tutorial, we are going to create a ListView

  Widget _buildListView() {
    return ListView.builder(
      itemCount: 20,
      itemBuilder: (BuildContext context, int index){
        return ListTile(title : Text('Item $index'));
      },
    );
  }

Then, set the ListView as the child of a ScrollBar widget.

  Scrollbar(
    child: _buildListView(),
  )

Output:

Set Visibility

By default, the scrollbar is only visible when a scroll is underway. To make the scrollbar always visible, you can set the isAlwaysShown argument to true.

  Scrollbar(
    child: _buildListView(),
    isAlwaysShown: true,
  )

Set Thickness

The thickness of the scrollbar can be set by passing the thickness argument whose type is double.

  Scrollbar(
    child: _buildListView(),
    thickness: 10,
  )

Output:

Set Thumb Radius

The radius of the scrollbar thumb can be set by passing the radius argument whose type is Radius. If the argument is not passed, the default value depends on the platform. On Android, there will be no radius applied. On iOS, the default value is CupertinoScrollbar.defaultRadius. The default value for other platforms is Radius.circular of 8.0 pixels.

  Scrollbar(
    child: _buildListView(),
    thickness: 10,
    radius: Radius.circular(50),
  )

Output:

Set Notification Predicate

In Flutter, Scrollable widgets may notify other widgets about scrolling-related events by creating a ScrollNotification. You can control whether a ScrollNotification should be handled or not by passing a function as notificationPredicate. The passed function needs to accept a parameter whose type is ScrollNotification. Based on the passed ScrollNotification object, it has to return a bool which indicates whether the notification should be handled.

  Scrollbar(
    child: _buildListView(),
    notificationPredicate: (ScrollNotification notification) {
      return notification.depth == 0;
    },
  )

Scrollbar Parameters

• Key? key: The widget's key, used to control how a widget is replaced with another widget.
• required Widget child: The widget under this widget in the tree.
• ScrollController? controller: The ScrollController used to implement Scrollbar dragging.
• bool? isAlwaysShow: Whether the scrollbar should always be visible, even when a scroll is not underway.
• bool? showTrackOnHove: Whether the track will show on hover and remain, including during drag.
• double? hoverThickness: The thickness of the scrollbar in hover state.
• double? thickness: The thickness of the scrollbar.
• Radius? radius: The color of the scrollbar thumb.
• ScrollNotificationPredicate? notificationPredicate: Specifies whether a ScrollNotification should be handled.

?: value can be null.
required: value must be passed.

Summary

That's how to use ScrollBar widget in Flutter. You need to pass a widget that contains any ScrollView widget in its subtree as the child of the ScrollBar. The appearance of the scrollbar (visibility, thickness, thumb radius) can be customized as well.