Flutter ListView 中去除滑动波纹的实现

使用过 ListView 的读者们应该了解到 ListView 的一个特性，即若 ListView 在滚动至顶部或底部后继续滚动，组件中将会出现一条带有默认主体颜色的波纹。在某些情况下，我们为了美观并不希望显示过度滚动波纹，这个时候我们应该怎么操作呢？

方法一 配置一个 ScrollConfiguration

第一步 定义一个 ScrollBehavior

class _OverScrollBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
    if (getPlatform(context) == TargetPlatform.android || getPlatform(context) == TargetPlatform.fuchsia) {
      return GlowingOverscrollIndicator(
        child: child,
        showLeading: false,
        showTrailing: false,
        axisDirection: axisDirection,
        color: Theme.of(context).accentColor,
      );
    } else {
      return child;
    }
  }
}

第二步 将 ScrollBehavior 配置到 ScrollConfiguration 中

class Demo extends StatelessWidght {
  @override
  Widget build(BuildContext context) {
    return ScrollConfiguration(
      behavior: _OverScrollBehavior(),
      child: ListView(
        ...
      ),
    );
  }
}

是不是觉得如果每个 ListView 都需要单独封装的话未免也太麻烦了点？
没关系，已经帮你们想到了！作者已经帮你们封装好了现成的仓库，我们只需要直接调用就行！

方法二 直接使用现成第三方库 noripple_overscroll（推荐）

第一步 进入 pub.dev 查看依赖的最新版本

进入依赖的仓库主页后，检查到最新的依赖版本。

截止至文章发布，版本为 0.0.2

第二步 安装依赖

dependencies:
  noripple_overscroll: ^0.0.2    # 具体版本因依赖版本发布而异，具体参见 Pub 仓库

第三步 引入依赖并使用

这个依赖使用非常简单，我们只需要将需要取消显示波纹的ListView传入即可。

class _NorippleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NoRippleOverScroll(  // 调用 NoRippleOverScroll
      child: ListView(          // 传入 ListView
        ...
      ),
    );
  }
}

做到这里，波纹已经被取消了。