How to add scroll indicator in ListView

Question

Is there any way to show the scroll indicator on the ListView?

Here is my basic code:

ListView.builder(
  itemCount: 50,
  itemBuilder: (context, index) => ListTile(title: Text("Item= ${index + 1}"),),
)

Clyte

May be helpful for you:#49676220 – Enow

You need to ensure the ListView is actually smaller than it's content, otherwise it won't show a scrollbar. If you put ListView into a scrollable there won't be a scrollbar because it has infinite size. – Rangy

@GünterZöchbauer I am using 50 elements and only 10 are visible at the same time on the screen so ListView is smaller than it's content and which is why it scrolls, I thought there would be some inbuilt indicator attached with the ListView but there was nothing like that. – Clyte

I expected so as well. If not just wrap it in a Scrollbar docs.flutter.io/flutter/material/Scrollbar-class.html – Rangy

@GünterZöchbauer it worked. I answered my own question, if you want I can delete it and you can write it and i will accept and upvote it. – Clyte

Answer 1

Thanks to Günter Zöchbauer.

You can wrap your ListView in Scrollbar

Scrollbar(
    child: ListView.builder(
      itemCount: 50,
      itemBuilder: (context, index) => ListTile(title: Text("Item= ${index + 1}"),),),
)

Clyte

Based on my Android knowledge I'm wondering if you are not now rendering all elements and putting everything in a Scrollbar – Ammerman

If you remove itemCount: 50, the list will be infinity and by default, the scroll should not be here – Lovash

In a list of 500 items, where 37 are visible, it renders only 50 items (which is good). – Ileum

Note that this solution (to wrap in Scrollbar) applies to any scrollable widget (for example SingleChildScrollView), not only to ListView. Set the isAlwaysShown param to true so that the scrollbar is visible even when not scrolling; however even if isAlwaysShown is true if there is no need for a scrollbar (because the scrollable content does not exceed its limits) the scrollbar will not be displayed. – Petaloid

You should mention that you need a ScrollController. At least MY ListView + Scrollbar didn't work without controller. – Mascagni

Answer 2

I think better to use CupertinoScrollbar instead of Scrollbar. With CupertinoScrollbar, you can grab the scrollbar to move around in the list with it, whereas Scrollbar is just a visual cue and you cannot interact with the scrollbar directly.

Ex:

 CupertinoScrollbar(
            child: ListView.builder(...),

Or

Scrollbar(
    child: ListView.builder(...),

Velarde

I would claim every element of flutter "can touch" and every Scrollbar can scroll to the bottom if the list is finite. Could you elaborate on what you really mean? I'm only testing as Windows application and don't see much difference. – Mascagni

I dont know why, but cuppertinoScrollBar really do the trick. It just make Listview and Scrollbar work in same direction. – Psychognosis

Answer 3

Create a ScrollController variable (ScrollController _scrollController); Instatiate _scrollController inside initState() or wherever you want, _scrollController = ScrollController();
Add _scrollController variable inside Scrollbar and ListView properties,

controller:_scrollController

Here's the code:

ScrollController _scrollController;
  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
  }
Scrollbar(
        isAlwaysShown: true,
         controller: _scrollController,
         child: ListView(
         controller: _scrollController,
   )

if you don't want it always shown set to false

thumbVisibility: false,

Trevethick

This works better if you need the scroll bar to be visible right from the start, which is what I was looking for in my case. Thanks for the answer! – Photoemission

Answer 4

You can implement this designer scrollbar library :

1. draggable_scrollbar

2. alphabet scrolling

OR

You can wrap ListView in Scrollbar widget

Scrollbar(
    child: ListView.builder(...),
)

Pawnshop

The indication of the two external packages is very useful. In Flutter it is more important than in other frameworks the integration with external dependencies. – Petaloid

Answer 5

Scrollbar(
        thickness: 10,
        isAlwaysShown: true,
        child: ListView.builder(
          itemCount: _controller().transactonsList.length,
          itemBuilder: (context, index) {
            return Card(
              elevation: 5,
              child: Container(
                padding: const EdgeInsets.only(bottom: 16),
                height: 80,
                child: Row(
                  children: [
                    SizedBox(width: 10),
                    amountOfTransaction(index),
                    SizedBox(width: 16),
                    dateAndTitleOfTransaction(index),
                  ],
                ),
              ),
            );
          },
        ),
      )

Prepare

"_controller().transactonsList.length"? "amountOfTransaction"? Where do you conjure all this stuff from? – Mascagni

Answer 6

final ScrollController _scroll = ScrollController();

@override
Widget build(BuildContext context) {
  (...)
  child: ListView.builder(
    controller: _scroll,
  )
}

Racing

Answer 7

If u need to style your scroll bar a bit wrap the ListView in RawScrollbar and use the same scroll controller instance for both widgets

final ScrollController _scrollController = ScrollController();

@override
Widget build(BuildContext context) {
      (...)
      child: RawScrollbar(
          controller: _scrollController,
          thumbColor: Colors.redAccent,
          radius: const Radius.circular(8),
          crossAxisMargin: 2,
          child: ListView.builder(
            controller: _scrollController,
            itemCount: 50,
            itemBuilder: (context, index) => ListTile(
              title: Text("Item= ${index + 1}"),
            ),
          ),
        ),
  }


    

Cove

Answer 8

Scrollbar( child:ListView.builder( itemCount:20, itemBuilder:(c,i) => MyItem(i), ), ),

You have to give itemcount as how many list you have -----Example: itemCount: items.length,-----

Mcguire

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Sumerlin

Answer 9

You can also tune this scrollbar with ScrollbarTheme.

            Container(
                constraints: const BoxConstraints(maxHeight: 200),
                child: ScrollbarTheme(
                  data: const ScrollbarThemeData(
                    crossAxisMargin: -8,
                    thickness: MaterialStatePropertyAll(4.0),
                    thumbColor: MaterialStatePropertyAll(Colors.red),
                  ),
                  child: Scrollbar(
                    child: ListView.separated(
                      ...
                    ),
                  ),
                ),
              ),

Acescent