7

When the user scrolls to the edge of a list or TabView, an animated blue circle appears on the ending edge.

What is this called, and how do I change the colour of it?

2 Answers 2

14

This is the android scroll physics (ClampingScrollPhysics).

From the source code and docs:

glow color is specified to use [ThemeData.accentColor].

That been said, when you create your App, the best practice is to specify a custom theme, istead of appling colors manually.

Example:

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        brightness: Brightness.light,

        primarySwatch: Colors.grey,
        primaryColor: Colors.grey[50],
        primaryColorBrightness: Brightness.light,

        //this is what you want
        accentColor: Colors.orangeAccent[400],
        accentColorBrightness: Brightness.light,
      ),
      home: Home(),
    );
  }
}

I like to use this tool to define the primary and secondary (called accent color in flutter) and having a preview of the widgets.

Note: On IOs the physics is different, letting the user scroll beyond the bounds of the content, but then bounce the content back to the edge of those bounds (BouncingScrollPhysics).

2
  • Ah, perfect! Is there a way to disable this / make it transparent for a specific screen? My scrollable area is not full-screen, so the glowing area is cutoff vertically, and it looks a bit weird.
    – haz
    Apr 17, 2018 at 13:31
  • Perhaps using a different scroll physics, like the default: docs.flutter.io/flutter/widgets/ScrollPhysics-class.html Just add the physics property to you ScrollView: physics: ScrollPhysics()
    – Ian
    Apr 17, 2018 at 17:23
3

Since Flutter v2.3.0-0.1.pre, themes changed https://api.flutter.dev/flutter/material/ThemeData/accentColor.html

For setting the accent color, you must do something like

class Themes {
  static final light = ThemeData(
      // Colors
      backgroundColor: Colors.white,
      primaryColor: MyColors.blue,
      splashColor: MyColors.blue,
      cardColor: MyColors.blue,
      hoverColor: MyColors.blue,
      highlightColor: MyColors.blue,
      colorScheme: ColorScheme.light(primary: MyColors.blue),

      // Fonts
      fontFamily: 'Inter');

  static final lightV2 = light.copyWith(
      colorScheme: light.colorScheme.copyWith(secondary: MyColors.blue));
}

And assign ligthV2 in your MaterialApp

MaterialApp(
   ...
   theme: Themes.lightV2
   ...
)

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.