How to change colour scroll-overflow indicators?

Question

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?

Cheers.

Answer 1

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).