如何更改颜色滚动溢出指示器？

Question

当用户滚动到列表或 TabView 的边缘时，结束边缘会出现一个动画蓝色圆圈。

这叫什么，如何改变它的颜色？

干杯。

Answer 1

自 Flutter v2.3.0-0.1.pre 以来，主题发生了变化 https://api.flutter.dev/flutter/material/ThemeData/accentColor.html

要设置强调色，您必须执行类似的操作

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

并在您的 MaterialApp 中分配 ligthV2

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

Answer 2

这是 android 滚动物理 (ClampingScrollPhysics)。

来自source code 和文档：

指定发光颜色使用 [ThemeData.accentColor]。

也就是说，当您创建 App 时，最佳做法是指定自定义主题，而不是手动应用颜色。

例子：

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

我喜欢使用this tool 来定义主要和次要颜色（在颤动中称为强调色）并预览小部件。

注意：在 IO 上，物理原理不同，让用户滚动超出内容的边界，然后将内容弹回这些边界的边缘 (BouncingScrollPhysics)。