CODEWITHSUNDEEP
flutter
Daniel Oliveira
Daniel Oliveira

Reputation: 8963

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

Upvotes: 40

Views: 32417

Answers (9)

David Machara
David Machara

Reputation: 589

you can also use this inside your MaterialApp theme

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

Upvotes: 3

harun_me
harun_me

Reputation: 301

'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),
    ),

Upvotes: 2

MatPag
MatPag

Reputation: 44813

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

Upvotes: 37

Hossein Azem
Hossein Azem

Reputation: 381

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

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

  ),

Upvotes: 5

CodeSpartan
CodeSpartan

Reputation: 331

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.

Upvotes: 23

goldensoju
goldensoju

Reputation: 721

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

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

Upvotes: 4

Lash
Lash

Reputation: 168

Simply add this to your MaterialApp widget in main.dart

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

Upvotes: 5

JSAN L.
JSAN L.

Reputation: 492

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

Upvotes: 2

diegoveloper
diegoveloper

Reputation: 103421

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

Upvotes: 39

Related Questions