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}"),),
)

May be helpful for you:https://stackoverflow.com/questions/49675720/how-to-create-a-scroll-indicator — Blasanka, Oct 28 '18 at 13:04
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. — Günter Zöchbauer, Oct 28 '18 at 14:55
@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. — , Oct 30 '18 at 14:26
I expected so as well. If not just wrap it in a Scrollbar https://docs.flutter.io/flutter/material/Scrollbar-class.html — Günter Zöchbauer, Oct 30 '18 at 14:38
@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. — , Oct 30 '18 at 16:45

score 193 · Accepted Answer · edited Jun 20 '20 at 09:12

193

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}"),),),
)

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 30 '18 at 16:45

1

Based on my Android knowledge I'm wondering if you are not now rendering all elements and putting everything in a Scrollbar – rekire Oct 13 '19 at 19:56
If you remove itemCount: 50, the list will be infinity and by default, the scroll should not be here – Võ Quang Hòa Dec 24 '19 at 08:03
In a list of 500 items, where 37 are visible, it renders only 50 items (which is good). – user48956 Dec 24 '19 at 18:09
2

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. – Mabsten Aug 23 '21 at 20:36
You should mention that you need a ScrollController. At least MY ListView + Scrollbar didn't work without controller. – The incredible Jan Nov 15 '22 at 12:28

score 17 · Answer 2 · answered May 04 '20 at 02:32

17

I think better to use CupertinoScrollbar instead of Scrollbar. CupertinoScrollbar is can touch and scroll to the bottom..

Ex:

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

Or

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

answered May 04 '20 at 02:32

BIS Tech

17,000
12
99
148

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. – The incredible Jan Nov 15 '22 at 12:24
I dont know why, but cuppertinoScrollBar really do the trick. It just make Listview and Scrollbar work in same direction. – Thiago Silva Feb 18 '23 at 12:03

score 8 · Answer 3 · edited Mar 22 '20 at 14:54

8

You can implement this designer scrollbar library :

OR

You can wrap ListView in Scrollbar widget

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

edited Mar 22 '20 at 14:54

CopsOnRoad

237,138
77
654
440

answered Jan 30 '20 at 10:28

Sanjayrajsinh

15,014
7
73
78

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. – Mabsten Aug 23 '21 at 20:21

score 8 · Answer 4 · edited Oct 31 '22 at 10:33

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,

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! — RyanNa, Feb 23 '21 at 04:19

score 4 · Answer 5 · answered Jun 12 '21 at 00:23

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),
                  ],
                ),
              ),
            );
          },
        ),
      )

"_controller().transactonsList.length"? "amountOfTransaction"? Where do you conjure all this stuff from? — The incredible Jan, Nov 15 '22 at 12:35

score 0 · Answer 6 · edited Aug 18 '22 at 14:14

0

final ScrollController _scroll = ScrollController();

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

edited Aug 18 '22 at 14:14

Tyler2P

2,324
26
22
31

answered Jun 27 '22 at 22:23

André

71
2

Kasujja Muhammed · Answer 7 · 2022-11-01T10:15:32.133

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}"),
            ),
          ),
        ),
  }

score -1 · Answer 8 · answered Dec 23 '22 at 09:26

-1

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,-----

answered Dec 23 '22 at 09:26

Johnson Redonyx Silva

11
2

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](/help/how-to-answer). – Community Dec 27 '22 at 06:11

How to add scroll indicator in ListView

8 Answers8

Thanks to Günter Zöchbauer.

Linked