Flutter gesture: Useful understanding you need to explore

flutter gesture

When advertising the same products, which is more optimal, a video or an app? Surely an app plays a vital role as clients can interact directly within an app. Do you know what is the biggest difference? Thanks to gestures, apps are much more simple and quick to launch. For that reason, our committed team in ArrowHiTech today will focus on Flutter Gesture –  a crucial factor that results in the success of a Flutter app!

Today’s contents are:

  1. Pointer
  2. Gesture
  3. Detection
  4. Disambiguation

Before going into technical stuff, let’s review ‘What are gestures?’

It’s the movement of body parts to express ideas or feelings. In terms of technology, we mainly talk about gesture recognition. In fact, we are using it on our mobile devices every single day without notice:

  • Swipe to unlock
  • Hold and drag to move an app
  • Double tap to resize a photo
  • And many more…

As for Flutter Gesture, there are 2 main types that we are focusing on today: pointer and gesture!

flutter gesture app
Time to learn MORE about Flutter!

#1. Pointer

Firstly, Pointer represents the raw data about the UI. What’s more, it has events that describe location and movement of the pointer itself. For instance, touces, mice and styles are some that shown in events

There are 4 main types, click into the name will land you at its properties:

  • PointerDownEvent: allow pointer to contact the screen at a particular spot
  • PointerMoveEvent: allow pointer to move to one spot on the screen to others
  • PointerUpEvent: make pointer stop contacting the screen
  • PointerCancelEvent: is sent when cancelling pointer interaction

Flutter offers a Listener widget to directly listen to pointer events. Yet, most use the following gestures instead!

#2. Gesture

Gesture is the second layer and it represents semantic actions. This picture has gathered some of the most common ones:

flutter gestures
Flutter Gestures

Moreover, Flutter gesture can execute many different events. Let’s dig into it a bit further:

Tap

Tap is touching the surface of the screen for a short time. Plus, it has to be done by the fingertip. There are 4 events:

  • Firstly, onTapDown
  • Secondly, onTapUp
  • Thirdly, onTap
  • And finally, onTapCancel

Double Tap

Can you guess what it is? Similar to Tap, Double Tap in Flutter Gesture requires tapping twice. There is only one event: onDoubleTap.

Long Press

It means a pointer remains at the same location on the screen for a long time. Particularly, the event is onLongPress.

Drag

Touching surface for a long time and moving to another spot before releasing. In Flutter Gesture, there are 2 types:

  • Horizontal Drag including
    • Firstly, onHorizontalDragStart
    • Secondly, onHorizontalDragUpdate
    • And finally, onHorizontalDragEnd
  • Vertical Drag including
    • onVerticalDragStart
    • onVerticalDragStart
    • And finally, onVerticalDragStart

Pan

Similar to Drag, the only difference is that Pan does not need releasing any object. There are: onPanStart, onPanUpdate, and onPanEnd

Pinch

This Flutter Gesture means using two fingers to zoom in or zoom out a screen.

#3. Gesture Detector & Disambiguation

This is an amazing support for Flutter Gesture. Furthermore, the idea of detecting users’ gestures works effectively. To successfully add the gesture detection to widgets, you can follow this official link from Flutter. On the other hand, Disambiguation is the process of identifying which meaning of a word is used in context. It is closely connected to Gesture arena, which also has an official link to refer!

What’s more, when there is more than one gesture recognizer (detector), the framework would gesture user intends via the gesture arena. There are 2 rules:

  • A detector can leave the arena at any time until there’s only 1 left which is the winner.
  • A detector and declare victory at any time, which means the others lose.

However, the gesture arena is beneficial if there to be only ONE horizontal or vertical drag recognizer. As a result, the user doesn’t have to wait for disambiguation.

Read more about Flutter right here!

An example of Flutter Gesture that you can try!

import 'package:flutter/gestures.dart';  
import 'package:flutter/material.dart';  
  
//It is the entry point for your Flutter app.  
void main() {  
  runApp(  
    MaterialApp(  
      title: 'Multiple Gestures Demo',  
      home: Scaffold(  
        appBar: AppBar(  
          title: Text('Multiple Gestures Demo'),  
        ),  
        body: DemoApp(),  
      ),  
    ),  
  );  
}  
  
class DemoApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return RawGestureDetector(  
      gestures: {  
        AllowMultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<  
            AllowMultipleGestureRecognizer>(  
              () => AllowMultipleGestureRecognizer(),  
              (AllowMultipleGestureRecognizer instance) {  
            instance.onTap = () => print('It is the parent container gesture');  
          },  
        )  
      },  
      behavior: HitTestBehavior.opaque,  
      //Parent Container  
      child: Container(  
        color: Colors.green,  
        child: Center(  
          //Now, wraps the second container in RawGestureDetector  
          child: RawGestureDetector(  
            gestures: {  
              AllowMultipleGestureRecognizer:  
              GestureRecognizerFactoryWithHandlers<  
                  AllowMultipleGestureRecognizer>(  
                    () => AllowMultipleGestureRecognizer(),  //constructor  
                    (AllowMultipleGestureRecognizer instance) {  //initializer  
                  instance.onTap = () => print('It is the nested container');  
                },  
              )  
            },  
            //Creates the nested container within the first.  
            child: Container(  
              color: Colors.deepOrange,  
              width: 250.0,  
              height: 350.0,  
            ),  
          ),  
        ),  
      ),  
    );  
  }  
}  
  
class AllowMultipleGestureRecognizer extends TapGestureRecognizer {  
  @override  
  void rejectGesture(int pointer) {  
    acceptGesture(pointer);  
  }  
}  

The result is an orange square on a green screen! Try it out.

Looking for help? AHT is only one call away!

Founded in 2007, ArrowHitech JSC is one of the leading IT outsourcing companies in Vietnam. We have worked with over 1,000 customers worldwide and completed more than 10,000 projects. Based in an Asian country, we provide effective services at a very low cost.

Arrowhitech
ArrowHiTech is one of the leading IT outsourcing companies from Vietnam!

We value every customer, treat them like family and build relationships on trust. For that reason, we are confident that we can help YOU operate your online stores and deliver the best solutions at an affordable cost. For reference, check out our Flutter App Development services right now – we welcome customers all the time!

Final Words

Finally, we have come to the end of today’s topic: Flutter Gesture. AHT hopes that you have learned lots of new ideas and concepts. Again, as usual, we truly wish you the best of good luck and success!

We’d love to hear from you at Contact Us



Tags

Share