How to change the color of the overscroll glow effect of ListView in Flutter?

How do I change the color of the glow effect of a ListView in Flutter?

[![Glow effect][1]][1]


[1]:

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

Heres a widget to change the Overscroll-Color of the descendant widgets (in this instance your `ListView`):

```dart
/// Overrides the [GlowingOverscrollIndicator] color used by descendant widgets.
class GlowingOverscrollColorChanger extends StatelessWidget {
final Widget child;
final Color color;

const GlowingOverscrollColorChanger({Key key, this.child, this.color})
: super(key: key);

@override
Widget build(BuildContext context) {
return ScrollConfiguration(
behavior: SpecifiableOverscrollColorScrollBehavior(color),
child: child,
);
}
}

class SpecifiableOverscrollColorScrollBehavior extends ScrollBehavior {
final Color _overscrollColor;

const SpecifiableOverscrollColorScrollBehavior(this._overscrollColor);

@override
Widget buildViewportChrome(
BuildContext context, Widget child, AxisDirection axisDirection) {
switch (getPlatform(context)) {
case TargetPlatform.iOS:
case TargetPlatform.macOS:
return child;
case TargetPlatform.windows:
case TargetPlatform.linux:
case TargetPlatform.android:
case TargetPlatform.fuchsia:
default:
return GlowingOverscrollIndicator(
child: child,
axisDirection: axisDirection,
color: _overscrollColor,
);
}
}
}
```

Usage should be:

```
Widget build() {
GlowingOverscrollColorChanger(
color: overscrollColor,
child: ListView(...),
);
}
```

Simply add this to your MaterialApp widget in `main.dart`

theme: ThemeData(
accentColor: Colors.blue,
),

In case you use ThemeData with colorScheme, the value "secondary" affects the glow color.

ThemeData(
colorScheme: ColorScheme(
[...]
**secondary: Colors.red,**
[...]),
);

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][1]). The easiest way to set it as below:
```dart
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`.


[1]:

[To see links please register here]

You should use this code in your `MaterialApp` widget in new versions flutter. (Flutter 2)

theme: ThemeData(
colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.green),

),

Reading here for [GlowingOverscrollIndicator][1] 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][2]


[1]:

[To see links please register here]

[2]:

[To see links please register here]

'accentColor' is deprecated and shouldn't be used. Use colorScheme.secondary instead. For more information, consult the migration guide at

[To see links please register here]

. This feature was deprecated after v2.3.0-0.1.pre..

Replace your code from

theme: ThemeData(
accentColor: Colors.red,
),

to this

theme: ThemeData(
colorScheme: ColorScheme.fromSwatch()
.copyWith(secondary: Colors.red),
),

you can also use this inside your MaterialApp theme
```
theme: ThemeData(
colorScheme: ColorScheme.fromSwatch()
.copyWith(secondary: Colors.red),
),

```