For reprint, please indicate the source: Flutter learning notes (32) -- PointerEvent event processing

In Android's native development, we all know that events can be divided into down, move, and up events. For ViewGroup, events can be distributed, intercepted, and consumed. For View, events can be distributed and consumed. For Flutter, events can be divided into down, move, and up events.

In Flutter, the Listener is used to listen to the original touch event. The Listener is constructed as follows:

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

Let's take a look at the demo example:

import 'package:flutter/material.dart';

class PointerEventDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PointerEventDemo',
      home: _PointerEventDemoHome(),
    );
  }
}

class _PointerEventDemoHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _PointerEventDemoHomeState();
  }
}

class _PointerEventDemoHomeState extends State {
  PointerEvent _event;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('PointerEventDemo'),
        ),
        body: new Container(
          alignment: Alignment.center,
          color: Colors.red,
          width: 400,
          height: 300,
          child: new Listener(
            child: new Container(
              alignment: Alignment.center,
              color: Colors.tealAccent,
              width: 200.0,
              height: 150.0,
              child: new Text(
                _event?.toString() ?? '',
                style: new TextStyle(color: Colors.red),
              ),
            ),
            //Handling of different responses
            onPointerDown: (PointerDownEvent event) =>
                setState(() => _event = event),
            onPointerMove: (PointerMoveEvent event) =>
                setState(() => _event = event),
            onPointerUp: (PointerUpEvent event) =>
                setState(() => _event = event),
            behavior: HitTestBehavior.translucent,
          ),
        ),
      ),
    );
  }
}

The Listener itself is a functional component, which is used to listen for touch events of internal components. Events will bubble up from the innermost widget to the outermost widget. When a user's touch event is monitored, it will callback to the corresponding response processing onPointerDown, onPointerMove, and onPointerUp.
demo is very simple, which is to respond to the user's touch operation, and then print the pointer coordinates.

Ignore PointerEvent

Listener(
  child: AbsorbPointer(
    child: Listener(
      child: Container(
        color: Colors.red,
        width: 200.0,
        height: 100.0,
      ),
      onPointerDown: (event)=>print("in"),
    ),
  ),
  onPointerDown: (event)=>print("up"),
)