How to add scroll indicator in ListView

小开

最佳答案

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

小开

You can implement this designer scrollbar library :

OR

You can wrap ListView in Scrollbar widget

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

小开

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

小开

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,

小开

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

小开

final ScrollController _scroll = ScrollController();


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

小开

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