CODEWITHSUNDEEP
dartmaterial-designflutter
haz
haz

Reputation: 2288

How to change colour scroll-overflow indicators?

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?

Upvotes: 7

Views: 8337

Answers (2)

Aymeric Le Feyer
Aymeric Le Feyer

Reputation: 376

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

Upvotes: 3

Ian
Ian

Reputation: 2984

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

Upvotes: 14

Related Questions