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

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

Answer 2

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(...),

Answer 3

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(...),
)

Answer 4

In this code: An example of how to show in ListView

child: Scrollbar( 
   child: ListView.builder(
   padding: EdgeInsets.all(5),
   itemCount: snapshot.data.length,
    physics: BouncingScrollPhysics(),
    itemBuilder: (context, index) {
      return generateColum(snapshot.data[index], index);
    }),
 ),

Answer 5

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

isAlwaysShown: false,

Answer 6

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

Answer 7

funcionou assim: "Lembrando que estou usando para linux e não testei para web, windows e mobile.

  final ScrollController _scroll = ScrollController();
  @override
  Widget build(BuildContext context) {
(...)
child: ListView.builder(
  controller: _scroll,

Answer 8

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


    

Answer 9

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