Flutter : How to add scroll indicator in ListView
46,912
Solution 1
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(...),
Solution 2
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);
}),
),
Solution 3
You can implement this designer scrollbar library :
OR
You can wrap ListView in Scrollbar
widget
Scrollbar(
child: ListView.builder(...),
)
Solution 4
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),
],
),
),
);
},
),
)
Solution 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,
Author by
Admin
Updated on July 05, 2022Comments
-
Admin almost 2 years
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}"),), )
-
RyanNa about 3 yearsThis 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!
-
Mabsten over 2 yearsThe indication of the two external packages is very useful. In Flutter it is more important than in other frameworks the integration with external dependencies.