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

Question

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

I think you should read here: https://stackoverflow.com/a/51119796/2910520, instead of removing it, you can simply change the default color in your custom `ScrollBehavior` — MatPag, Oct 08 '18 at 22:31
But this explains how to remove it. There is not a simpler way of changing its color? — Daniel Oliveira, Oct 08 '18 at 22:32

score 38 · Answer 1 · answered Oct 08 '18 at 23:05

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

I think your approach is a lot cleaner than mine, thanks for sharing +1 — MatPag, Oct 09 '18 at 06:57

score 37 · Accepted Answer · edited Nov 29 '21 at 22:31

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

CodeSpartan · Answer 3 · 2021-08-17T09:52:09.413

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.

Thanks for this answer! Btw does anyone know why is there a hardcoded `tealAccent` for dark theme?? That's so weird... — Grzegorz D., Mar 03 '22 at 21:01

score 5 · Answer 4 · answered Mar 23 '21 at 17:50

5

Simply add this to your MaterialApp widget in main.dart

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

answered Mar 23 '21 at 17:50

Lash

168
2
5

score 4 · Answer 5 · answered Jul 04 '21 at 05:50

4

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

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

answered Jul 04 '21 at 05:50

goldensoju

606
1
6
14

This is the right answer because `accentColor` was deprecated. – Joaquin Iurchuk Dec 09 '21 at 03:58

score 4 · Answer 6 · answered Sep 19 '21 at 07:13

4

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

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

  ),

answered Sep 19 '21 at 07:13

Hossein Azem

331
3
8

score 3 · Answer 7 · answered Nov 29 '22 at 10:18

3

you can also use this inside your MaterialApp theme

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

answered Nov 29 '22 at 10:18

David Machara

559
9
13

score 1 · Answer 8 · answered Apr 20 '20 at 14:05

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

/// 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(...),
 );
}

score 1 · Answer 9 · answered Sep 01 '22 at 10:26

'accentColor' is deprecated and shouldn't be used. Use colorScheme.secondary instead. For more information, consult the migration guide at https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties#migration-guide. 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),
    ),

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

9 Answers9

Linked

Related