How to change the color of the overscroll glow effect of ListView in Flutter?
Another option without using theme could be:
1- Wrap your ListView inside a GlowingOverscrollIndicator
2- Wrap your GlowingOverscrollIndicator
inside a ScrollConfiguration with a new scroll behavior
Here you have:
ScrollConfiguration(
behavior: ScrollBehavior(),
child: GlowingOverscrollIndicator(
axisDirection: AxisDirection.down,
color: Colors.yellow,
child: ListView.builder(
physics: ClampingScrollPhysics(),
itemCount: 15,
itemBuilder: (context, index) {
return ListTile(
title: Text("testing :$index"),
);
},
),
),
),
Simply add this to your MaterialApp widget in main.dart
theme: ThemeData(
accentColor: Colors.blue,
),
Reading here for GlowingOverscrollIndicator seems like you can change the value of ThemeData.accentColor
to change the overscroll glow color.
You could try with something similar to this to limit the Theme
change to the ListView
only
//store the current Theme to restore it later
final ThemeData defaultTheme = Theme.of(context);
Theme(
//Inherit the current Theme and override only the accentColor property
data: Theme.of(context).copyWith(
accentColor: Colors.yellow
),
child: ListView.builder(
//suppose data it's an array of strings
itemBuilder: (BuildContext context, int index) =>
EntryItem(data[index], defaultTheme),
itemCount: data.length,
),
);
//this is your class to render rows
class EntryItem extends StatelessWidget {
const EntryItem(this.entry, this.defaultTheme);
final String entry;
final ThemeData defaultTheme;
Widget _buildTiles(String entry) {
return Theme(
data: defaultTheme,
child: Text(entry)
);
}
@override
Widget build(BuildContext context) {
return _buildTiles(entry);
}
}
You can read more about how to style your
Theme
here
Previous answers suggesing ThemeData.accentColor
won't work starting with Flutter 2.2
The color of the overscroll glow effect is now defined in the ThemeData.colorScheme.secondary
property (docs). The easiest way to set it as below:
Theme(
data: Theme.of(context).copyWith(
// accentColor: Color(0xff936c3b), // Previously it was implemented like this
colorScheme: ColorScheme.fromSwatch(
accentColor: Color(0xff936c3b), // but now it should be declared like this
),
),
This constructor will set the secondary
property as below:
final Color secondary = accentColor ?? (isDark ? Colors.tealAccent[200]! : primarySwatch);
Therefore, if a light theme is being used in the code, overglow effect color can also be changed by setting ThemeData.colorScheme.primarySwatch
.