The fluent removes the blue wave effect when the rolling component is pulled to the bottom

Time:2020-12-18

This blue wave is sometimes unnecessary. At present, I think it’s the only one that can be seen on the whole screen with a long list. However, various small modules (such as: There is no need to use listview for navigation list or GridView for grid layout chart navigation). What’s more, when this small listview component is nested under a long list, not only local ugly blue ripples will appear, but also serious experience problems. When the finger reaches the local listview, it will trigger the local listview to scroll, which conflicts with the large outer scroll component It may be better to use wrap.

So, you have to use listview. After all, listview is particularly convenient for building such list data. What should I do?

  • Import IO package and basic material package
import 'dart:io';
import 'package:flutter/services.dart';
  • Wrap the slider layout with scrollconfiguration:
ScrollConfiguration(
    Behavior: mybehavior(), // custom behavior
    Child: listview() // your scrolling layout component
);
  • Custom behavior:
class MyBehavior  extends ScrollBehavior{
 @override
 Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
    if(Platform.isAndroid||Platform.isFuchsia){
     return child;
  }else{
    return super.buildViewportChrome(context,child,axisDirection);
    }
 }
}

The method can be used for reference( https://www.jianshu.com/p/b9e92c37f4ec )