How to add scroll indicator in ListView
FlutterListviewDartScrollviewFlutter WidgetFlutter Problem Overview
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}"),),
)
Flutter Solutions
Solution 1 - Flutter
Günter Zöchbauer.
Thanks toYou can wrap your ListView
in Scrollbar
Scrollbar(
child: ListView.builder(
itemCount: 50,
itemBuilder: (context, index) => ListTile(title: Text("Item= ${index + 1}"),),),
)
Solution 2 - Flutter
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 3 - Flutter
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 4 - Flutter
You can implement this designer scrollbar library :
OR
You can wrap ListView in Scrollbar
widget
Scrollbar(
child: ListView.builder(...),
)
Solution 5 - Flutter
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,
Solution 6 - Flutter
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),
],
),
),
);
},
),
)