Listening for Slide Events in flutter

On the mobile side, the original pointer event model of each platform or UI system is basically 1, that is, a complete event is divided into three stages: finger pressing, finger moving, and finger lifting, while higher-level gestures (such as clicking, double-clicking, dragging, etc.) are based on these original events.

Listener widget can be used in Flutter to listen for raw touch events, which is also a functional widget.

Common Properties of Listener

属性	类型	说明
onPointerDown	(PointerDownEvent event){}	手指按下时触发
onPointerMove	(PointerDownEvent event){}	手指在屏幕滑动时触发
onPointerUp	(PointerDownEvent event){}	手指离开屏幕时触发
onPointerCancel	(PointerDownEvent event){}	取消触摸时触发

Listener({
 Key key,
 this.onPointerDown, // Finger press callback 
 this.onPointerMove, // Finger movement callback 
 this.onPointerUp,// Finger lift callback 
 this.onPointerCancel,// Touch event to cancel callback 
 this.behavior = HitTestBehavior.deferToChild, // How to behave during hit testing 
 Widget child
})

The usage is as follows:

Listener(
 onPointerDown: (dowPointEvent){},
 onPointerMove: (movePointEvent){},
 onPointerUp: (upPointEvent){},
 child: Container(
   child: Text('Listener Interception of ')
 )
);

Usage scenario 1: pull-down refresh, pull-up load

If pull-down refresh is implemented, RefreshIndicator must be used to wrap RefreshIndicator around listview, and then onRefresh method must be implemented inside RefreshIndicator. There are many kinds of monitoring methods, so I don't elaborate on 11. Here, I mainly say two methods that are often used under 1.

 ///  Drop-down refresh, where you must use async Otherwise, an error will be reported 
 Future<Null> _refresh() async {
  final Completer<Null> completer = new Completer<Null>();
  _dataList.clear(); //  Empty data 
  setState(() {
   page = 1;
  });
  loadData(completer); //  Load data 
  return completer.future;
 }

Loading more needs to monitor ListView, so it needs to set the listener and initialize the listener in State.

ScrollController _scrollController = new ScrollController(); //  Initialize the scroll listener and load more use 

1. Listen directly to _ scrollController and judge whether more needs to be loaded according to whether it slides to the bottom

_scrollController.addListener(() {
   //  If you slide to the bottom 
   if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      // do something
   }
 });

RefreshIndicator(
  onRefresh: _refresh, //  Drop-down refresh 
  child: ListView.builder(
    padding: EdgeInsets.only(bottom: Adapt.px(40)),
    shrinkWrap: true,
    controller: _scrollController,
    physics: AlwaysScrollableScrollPhysics(),
    itemCount: _dataList.length,
    itemBuilder: (context, item) {
       return listCard(_dataList[item]);
     }
   )
)

2. Use the above Listener to monitor, and use onPointerMove (finger sliding on the screen) of Listener to monitor the sliding distance, and load more data when sliding to the bottom

new Listener(
  onPointerMove: (event) {
    var position = event.position.distance;
    var detal = position - lastDownY;
    if (detal > 0) {
     print("================ Move down ================");
    } else {
      //  Length of touched point  + Sliding distance  = IistView The length of   Explain reaching the bottom 
      print("================ Move up ================");
      print("scrollController== Sliding distance =======${(position - downY)}");
      var scrollExtent = scrollController.position.maxScrollExtent;
      print("scrollController==ListView Maximum length ===${scrollExtent}");
      print("scrollController== Length of touched point ===${scrollController.offset}");
      print("scrollController== Distance between touched point and screen ===${position}");
      var result = scrollController.offset +(position - downY).abs();
      if (result >= scrollExtent) {
        print("scrollController==== Reach the bottom ");
         lastListLength = scrollExtent;
         loadMore(); //  Load more data 
       }
    }
   lastDownY = position;
   },
   child: new ListView.builder(
    controller: scrollController,
    itemCount: datas == null ? 0 : datas.length,
    itemBuilder: (BuildContext context, int index) {
        return Container(child: Text(' List ${index}') )
    }
   )
 );

Using Scenario 2, hide the keyboard while sliding the screen

When using TextField everyday, if the pop-up keyboard is submitted by a button, sometimes the keyboard will not be automatically hidden and closed, which can trigger the closing of the pop-up keyboard.

FocusScope.of(context).requestFocus(FocusNode());
//  Or 
FocusNode _foucusNode = new FocusNode();
_foucusNode.unfocus();
 Use  Listener  Monitor and turn off the keyboard while sliding the screen 

Listener(
  onPointerMove: (movePointEvent){
    _foucusNode.unfocus();
  },
  child: return SingleChildScrollView(
    controller: _scrollController,
    child: Column(
     children: <Widget>[
      // some widget
     ],
    )
  )
)