如何在Flutter中更改ListView的过度滚动发光效果的颜色？

Question

如何在Flutter中更改ListView的发光效果的颜色？

Answer 1

之前的答案表明ThemeData.accentColor从 Flutter 2.2 开始不起作用

过度滚动发光效果的颜色现在在ThemeData.colorScheme.secondary属性（文档）中定义。最简单的设置方法如下：

Theme(
    data: Theme.of(context).copyWith(
      // accentColor: Color(0xff936c3b), // Previously it was implemented like this
      colorScheme: ColorScheme.fromSwatch(
        accentColor: Color(0xff936c3b), // but now it should be declared like this
      ),
    ),

该构造函数将设置secondary属性如下：

final Color secondary = accentColor ?? (isDark ? Colors.tealAccent[200]! : primarySwatch);

因此，如果代码中使用浅色主题，也可以通过设置来更改过度发光效果颜色ThemeData.colorScheme.primarySwatch。

Answer 2

不使用主题的另一种选择可能是：

1-将您的ListView包裹在一个 GlowingOverscrollIndicator

2- GlowingOverscrollIndicator用新的滚动行为将您的ScrollConfiguration 包装在 内部

这里您有：

  ScrollConfiguration(
            behavior: ScrollBehavior(),
            child: GlowingOverscrollIndicator(
              axisDirection: AxisDirection.down,
              color: Colors.yellow,
              child: ListView.builder(
                physics: ClampingScrollPhysics(),
                itemCount: 15,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text("testing :$index"),
                  );
                },
              ),
            ),
          ),

Answer 3

在这里阅读GlowingOverscrollIndicator似乎可以更改的值ThemeData.accentColor以更改过度滚动发光颜色。

您可以尝试与此类似的操作以将Theme更改限制为ListView唯一

//store the current Theme to restore it later
final ThemeData defaultTheme = Theme.of(context);

Theme(
  //Inherit the current Theme and override only the accentColor property
  data: Theme.of(context).copyWith(
    accentColor: Colors.yellow
  ),
  child: ListView.builder(
      //suppose data it's an array of strings
      itemBuilder: (BuildContext context, int index) =>
          EntryItem(data[index], defaultTheme),
      itemCount: data.length,
  ),
);

//this is your class to render rows
class EntryItem extends StatelessWidget {
  const EntryItem(this.entry, this.defaultTheme);

  final String entry;
  final ThemeData defaultTheme;

  Widget _buildTiles(String entry) {
    return Theme(
      data: defaultTheme,
      child: Text(entry)
    );
  }

  @override
  Widget build(BuildContext context) {
    return _buildTiles(entry);
  }
}

您可以在此处了解更多有关如何设置样式的Theme 信息

Answer 4

只需将此添加到您的 MaterialApp 小部件中 main.dart

theme: ThemeData(
          accentColor: Colors.blue,
        ),

Answer 5

您应该MaterialApp在新版本 flutter 的小部件中使用此代码。（颤动2）

theme: ThemeData(
      colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.green),

  ),