Flutter ListView remove the default shadow

If you are interested to see the realization of skip to the end the

 

android using slider control when the default will be to have such a water ripple effect is really very ugly, native overscroll property can be used to turn off this effect, but seemingly not in the Flutter in this attribute it to see ListView constructor is also a look ignorant force

Some say the Internet designated physics properties to avoid water ripple effect BouncingScrollPhysics, this indeed useful, but also to add to the rebound effect. So not very good!

I also tried several other physics, are lower than the desired effect. But when seeing ClampingScrollPhysics found some clues

translate:

Use ScrollConfiguration provide default scrolling behavior to android

 BouncingScrollPhysics: one kind of rebound effect is similar to IOS

 GlowingOverscrollIndicator ScrollConfiguration is used to provide water ripple effect. This effect usually appears on the android device. When using MaterialApp, the ripple effect of the color is specified by ThemeData.accentColor

 

There are two very important classes ScrollConfiguration and GlowingOverscrollIndicator, "overscroll" finally appeared.

And there's another very important message, ThemeData.accentColor. The last sentence, which means that water ripples color is specified by the attribute this, that since this is the case I direct accentColor set to transparent not on the list? However, the reality is very cruel, is set to appear transparent after following effects

That they not transparent Okay, opacity water ripple effect will follow the sliding distance of changing the visual is still visible.

This time can only see GlowingOverscrollIndicator the view of local references this class we found ScrollConfiguration

More specific look at how the use of ScrollConfiguration

逻辑很简单，只是判断了设备类型，ios直接把child返回，而android和fuchsia则使用了水波纹效果

接下来我们再看下GlowingOverscrollIndicator的构造方法

由字面意思我们可以猜到是否有水波纹效果取决于showLeading和showTrailing两个属性，查看这两个属性的说明也印证了我们的猜测是对的

 

结论

所以我们只需要自定义一个Behavior并且重写buildViewportChrome就能实现去除水波纹的目的了

class OverScrollBehavior extends ScrollBehavior{

  @override
  Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
        return child;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
        return GlowingOverscrollIndicator(
          child: child,
          //不显示头部水波纹
          showLeading: false,
          //不显示尾部水波纹
          showTrailing: false,
          axisDirection: axisDirection,
          color: Theme.of(context).accentColor,
        );
    }
    return null;
  }

}

如何使用

Behavior是结合着ScrollConfiguration来使用的，来看一下具体的用法

//将ListView用ScrollConfiguration包裹
ScrollConfiguration(
          behavior: OverScrollBehavior(),
          child: ListView.builder(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return RankChildItem(_topList[index]);
            },
            itemCount: _topList.length,
          ),
        )

ScrollConfiguration结合着pull_to_refresh使用

ScrollConfiguration(
                  behavior: OverScrollBehavior(),
                  child: SmartRefresher(
                    controller: model.refreshController,
                    enablePullDown: true,
                    enablePullUp: true,
                    header: CustomHeader(
                        builder: (context, mode) => DefaultRefreshHeader(mode)),
                    footer: CustomFooter(
                        builder: (context, LoadStatus mode) =>
                            DefaultLoadMoreFooter(mode)),
                    onRefresh: () => model.initData(),
                    onLoading: () => model.requestGuessList(),
                    child: body(model),
                  ))

 

注：这种方式不仅仅针对ListView有效，而是所有继承自ScrollView的widget（ListView，GridView， CustomScrollView， BoxScrollView）