Gesture – related widgets: GestureDetector and distransmissible

This article was first published on the public account “Liu Wangshu”

ReactNative Features the ReactNative component Flutter Foundation series

preface

User interaction is an important part of mobile development. Touch, click, swipe and other events are handled by Android apis. Flutter is also implemented by widgets. The gesture system in Flutter has two separate layers. The first layer is pointer Events, which describe the position and movement of on-screen Pointers such as touch, mouse, and stylus. The second layer is gestures, which consist of one or more pointer movements that are recognized as different gestures.

1. Pointer events

Pointers represent raw data that the user interacts with the device screen. There are four types of pointer events:

• PointerDownEvent: The pointer touches a specific location on the screen.
• PointerMoveEvent: The pointer has moved from one position on the screen to another.
• PointerUpEvent: Pointer has stopped touching the screen.
• PointerCancelEvent: The input to this pointer no longer points to the application.

When a pointer is pressed, the Flutter framework performs a hit test on the current application to determine which Widget the pointer touches the screen on. Then PointerDownEvent events (and subsequent events of the pointer) are scheduled to the innermost Widget found by the hit test. From the innermost Widget to all the widgets in the root path of the tree.

2. Hand gestures

A gesture represents an action consisting of one or more pointer movements. There are mainly the following types:

Click on the

OnTapDown: The pointer has touched the screen at a specific location. OnTapUp: The pointer stops touching the screen at a specific location. OnTap: The click event is triggered. OnTapCancel: The onTapDown that was previously triggered by the pointer will no longer trigger the click event.

Double click on the

OnDoubleTap: The user taps the screen in the same place twice in quick succession.

Long press

OnLongPress: The pointer remains in contact with the screen for a long time in the same position.

Vertical drag

OnVerticalDragStart: The pointer has touched the screen and may begin to move vertically. The onVerticalDragUpdate pointer is in contact with the screen and has moved vertically. OnVerticalDragEnd The pointer that previously touched the screen and moved vertically no longer touches the screen and moves at a specific speed when it stops touching the screen.

Horizontal scrolling

OnHorizontalDragStart: The pointer has touched the screen and may start moving horizontally onHorizontalDragUpdate: The pointer has touched the screen and moved horizontally onHorizontalDragEnd: A pointer that previously touched the screen and moved horizontally no longer touches the screen and moves at a specific speed when it stops touching the screen.

How do you detect these gestures? GestureDetector can be used.

3. Use the GestureDetector

To detect click, double click, vertical drag, etc., just use GestureDetector to nest methods to detect the gesture Widget and implement the gesture you want to listen for.

import 'package:flutter/material.dart';

void main(a) => runApp(GestureDetectorWidget());

class GestureDetectorWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter",
      home: Scaffold(
        appBar: AppBar(
          title: Text("GestureDetector sample"),
        ),
        body: Center(
          child: GestureDetector(
            child: Text('Gesture recognition'),
            onTap: () {
              print('click');
            },
            onDoubleTap: () {
              print('double');
            },
            onLongPress: () {
              print('long press');
            },
            onHorizontalDragStart: (DragStartDetails details) {
              print('Drag horizontally'); },),),),); }}Copy the code

Just click on the gesture recognition text and the corresponding gesture will be printed out.

4. Use Dismissible

Swiping to delete is a common operation. For example, in a list, we swipe left to delete an item directly or give an option to delete it. Flutter provides Dismissible, transmissible deletes.

import 'package:flutter/material.dart';

void main(a) => runApp(DismissibleWidget(
      items: new List<String>.generate(300, (i) => "Line $I")));class DismissibleWidget extends StatelessWidget {
  final List<String> items;

  DismissibleWidget({@required this.items});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dismissible sample'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return Dismissible(
              key: Key(item),
              onDismissed: (direction) {
                items.removeAt(index);
                print(index);
              },
              child: ListTile(
                leading: Icon(Icons.access_time),
                title: Text('${items[index]}'),),); },),),); }}Copy the code

This example was similar to the ListView example: the main change was to nest listtiles with disalgorithms. When the delete operation is performed, the OnElectionEering method in the ListView is called back, and we can remove the deleted item directly from the List by onElectioneering.

If we swipe left on the first and second items, the deletion animation will appear, as shown below.