OverScrollGlowColor always blue on Android

[Albert-Jan Plate]

Seems like the app uses a different styling property compared to the default theme of the app, which results in a different overscroll glow color compared to the rest of the app.

When looking into the ThemeData class of Flutter, the following explanation can be found for the accent color:

  /// The foreground color for widgets (knobs, text, overscroll edge effect, etc).
  ///
  /// Accent color is also known as the secondary color.
  ///
  /// The theme's [colorScheme] property contains [ColorScheme.secondary], as
  /// well as a color that contrasts well with the secondary color called
  /// [ColorScheme.onSecondary]. It might be simpler to just configure an app's
  /// visuals in terms of the theme's [colorScheme].
  final Color accentColor;

and also:

 The [accentColor], sometimes called the secondary color, and,
  ///    if the accent color is specified, its brightness
  ///    ([accentColorBrightness]), so that the right contrasting text
  ///    color will be used over the accent color.

However, setting the secondary color using the following code, doesn’t change the color of the overscroll effect.

colorScheme: Theme.of(context).brightness == Brightness.light
          ? ColorScheme.light(
              primary: Colors.blue.shade50,
              onPrimary: Colors.grey.shade900,
              secondary: Theme.of(context).accentColor,
              onSecondary: Theme.of(context).accentColor,
              background: Colors.transparent,
              onBackground: Colors.black)
          : ColorScheme.dark(
              primary: Colors.white,
              onPrimary: Colors.white,
              secondary: Theme.of(context).accentColor,
              onSecondary: Theme.of(context).accentColor,
              background: Colors.transparent,
              onBackground: Colors.white70),

PS: I’m sorry to bother you with such a nitty pitty issue, but I’m too perfectionistic, sorry 😅

Picture:

‌

[Albert-Jan Plate]

Managed to fix it up manually in the source code with the following code:

return ScrollConfiguration(
                behavior: ScrollBehavior(),
                child: GlowingOverscrollIndicator(
                    axisDirection: AxisDirection.down,
                    color: Theme
                            .of(context)
                            .accentColor,
                    child: ListView(
                        padding: EdgeInsets.zero,
                        children: _controller.children.map((
                                Node node) {
                            return TreeNode(node: node);
                        }).toList(),
                    ),
                ));

Although a more general styling would be better fitting I believe.

‌

[Kevin Armstrong]

Hi Albert-Jan, I understand wanting to get it exactly the way you want it. I’m very much the same. I actually just refactored the code to use a parent theme if it exists. This will eliminate the need for a parent widget to control the overscroll color but instead allow you to do it through theming and changing the accent Color as you did in your example.

I just need a few minutes to run my unit tests and upload the changes.

[Kevin Armstrong]

Fixes issue #8: Updated TreeView widget so that it inherits the ThemeData from context

→ <<cset fff55dff7e61>>

[Albert-Jan Plate]

This is awesome! Thank you very much for the quick reply and fix! You’re the best