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.

Tags:

Flutter