How to use Scrollbar in flutter

Before we’re going to learn how to use Scrollbar in Flutter, let’s know one important fact about this widget. This widget belongs to Scrolling Widgets; and, we have a category dedicated to these widgets.

Therefore, you may want to take a look at the other Scrolling Widgets, we have a list below.

Not only Scrollbar widget belongs to only Scrolling widgets, but also it’s a Material Design widget.

To add a Scrollbar, we need to have a ScrollView. Why? Because we can only add a Scrollbar to a ScrollView; otherwise, it doesn’t make any sense.

To make our point strong, let’s see the screenshot of a flutter app that we’ve built for this purpose.

As the above screenshot displays, our items are not many. We have only 10 items to show on the screen. As a result, our Scrollbar thumb looks bigger.

What if we’ve added more items on the screen?

As a result the Scrollbar thumb gets smaller. As we scroll vertically, the Scrollbar thumb moves.

The Scrollbar thumb shows the exact spot of the ScrollView, which is actually visible

By the way, in our code, as a ScrollView widget we’ve used ListView.builder constructor of ListView widget.

Therefore, now it makes sense if we take a look at the full code. After that, we’ll discuss a few parts of the code to understand Scrollbar widget in great detail.

import 'package:flutter/material.dart';

/// This is the main application widget.
class ScrollbarSample extends StatelessWidget {
  const ScrollbarSample({Key? key}) : super(key: key);

  static const String _title = 'Scrollbar Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: ScrollbarSampleHome(),
        ),
      ),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class ScrollbarSampleHome extends StatefulWidget {
  const ScrollbarSampleHome({Key? key}) : super(key: key);

  @override
  State<ScrollbarSampleHome> createState() => _ScrollbarSampleHomeState();
}

/// This is the private State class that goes with ScrollbarSampleHome.
class _ScrollbarSampleHomeState extends State<ScrollbarSampleHome> {
  // Generate a dummy list
  final myProducts = List<String>.generate(10, (i) => 'Product $i');
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return Row(
          children: [
            SizedBox(
              width: constraints.maxWidth / 2,
              child: Scrollbar(
                isAlwaysShown: true,
                child: ListView.builder(
                  itemCount: myProducts.length,
                  itemBuilder: (context, index) {
                    return Card(
                      //key: UniqueKey(),
                      child: Padding(
                        padding: const EdgeInsets.all(10),
                        child: Text(
                          myProducts[index],
                          style: const TextStyle(
                            color: Colors.red,
                            fontSize: 40.0,
                            fontFamily: 'Allison',
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
            SizedBox(
              width: constraints.maxWidth / 2,
              child: Container(
                margin: const EdgeInsets.all(10),
                padding: const EdgeInsets.all(10),
                child: const Text(
                  'A Scrollbar Sample on our left',
                  style: TextStyle(
                    color: Colors.purple,
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            )
          ],
        );
      },
    );
  }
}

If you’re interested to know more about such Flutter widgets, please visit the relevant GitHub repository.

As we can see, we have distinctly divided the screen in two parts by using a Row widget.

On the left side we have our Scrollbar widget with a ListView.builder constructor.

return Row(
          children: [
            SizedBox(
              width: constraints.maxWidth / 2,
              child: Scrollbar(
                isAlwaysShown: true,
                child: ListView.builder(
                  itemCount: myProducts.length,
                  itemBuilder: (context, index) {
                    return Card(
                      //key: UniqueKey(),
                      child: Padding(
                        padding: const EdgeInsets.all(10),
                        child: Text(
                          myProducts[index],
                          style: const TextStyle(
                            color: Colors.red,
                            fontSize: 40.0,
                            fontFamily: 'Allison',
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
...

Certainly, above that, we have declared our dummy products.

final myProducts = List<String>.generate(10, (i) => 'Product $i');

Please have a look at how we have declared our products in a list and generated 10 items. This is a nice sample of declarative programming style that Flutter uses and lifts the heavy burden off developers

Since we’ve not provided the vertical scroll view a ScrollController, it’s using the PrimaryScrollController.

As the scroll view scrolls, the Scrollbar thumb will fade in and out. It happens by default.

If we’ve made the Scrollbar parameter isAlwaysShown true, the Scrollbar thumb will remain visible without the fade animation.

With reference to what we’ve learned so far, we can say that, if the child ScrollView (here we’ve used ListView.builder constructor) is infinitely long, the RawScrollbar will not be painted. In that case, the Scrollbar cannot precisely show the location of the visible area.

By the way, every Scrollbar is interactive and can use the PrimaryScrollController if a controller is not set. However, we’ll discuss that property in our next section.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter