Is it possible to have a different color for the top and bottom Overscroll indicator of a ListView?
I have the background of the ListView a color gradient and want it the top Overscroll indicator to match the top of the gradient and the bottom indicator to match the bottom of the gradient.
You can wrap the ListView with a GlowingOverscrollIndicator and set its color parameter. For changing the color for the top and bottom, you can add a listener to the scroll controller of the ListView.
var _color = Colors.blue;
_listener() {
if (_scrollController.offset >=
_scrollController.position.maxScrollExtent &&
!_scrollController.position.outOfRange) {
// bottom
setState(() {
_color = Colors.red;
});
}
if (_scrollController.offset <=
_scrollController.position.minScrollExtent &&
!_scrollController.position.outOfRange) {
// top
setState(() {
_color = Colors.blue;
});
}
}
@override
void initState() {
super.initState();
_scrollController.addListener(_listener);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: GlowingOverscrollIndicator(
axisDirection: AxisDirection.down,
color: _color,
child: ListView.builder(
controller: _scrollController,
physics: ClampingScrollPhysics(),
itemCount: 30,
itemBuilder: (context, index) {
return ListTile(
title: Text('$index'),
);
},
),
));
}
Result:
