Scribd
Upload
3 views11 pages

Lecture 7-1 (Gesture)

The document outlines various gestures used for mobile device interactions, such as tap, double tap, drag, and pinch. It explains how Flutter supports gesture detection through widgets like GestureDetector and InkWell, detailing their functionalities and callback functions. The comparison between GestureDetector and InkWell highlights their respective strengths, with GestureDetector offering more control and InkWell providing a ripple effect for touch actions.

Uploaded by

Hasaan Bin Arif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views11 pages

Lecture 7-1 (Gesture)

The document outlines various gestures used for mobile device interactions, such as tap, double tap, drag, and pinch. It explains how Flutter supports gesture detection through widgets like GestureDetector and InkWell, detailing their functionalities and callback functions. The comparison between GestureDetector and InkWell highlights their respective strengths, with GestureDetector offering more control and InkWell providing a ripple effect for touch actions.

Uploaded by

Hasaan Bin Arif
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Gestrues

IT Industry-Academia Bridge Program


Gesture

Gestures are primarily a way for a user to interact with a mobile (or any
touch based device) application. Some examples of gestures are:
• When the mobile screen is locked, you slide your finger across the screen to
unlock it.
• Tapping a button on your mobile screen, and
• Tapping and holding an app icon on a touch-based device to drag it across
screens.

IT Industry-Academia Bridge Program


Some Basic Gestures in Mobile Apps

IT Industry-Academia Bridge Program


Gestures Description
Some of the widely used gestures are mentioned here:
Tap: Touching the surface of the device with fingertip for a short period.
Double Tap: Tapping twice in a short time.
Drag: Touching the surface of the device with fingertip and then moving the
fingertip in a steady manner and then finally releasing the fingertip.
Flick: Similar to dragging, but doing it in a speeder way.
Pinch: Touch the surface of the device using two fingers and bring them closer together.
Spread/Zoom: Touch the surface with two fingers and move them in opposite direction.
Panning: Touching the surface of the device with fingertip and moving it in any
direction without releasing the fingertip.

IT Industry-Academia Bridge Program


Gestures in Flutter?
• Flutter provides an excellent support for all type of gestures through its exclusive
widgets, GestureDetector and InkWell. Both are almost similar. InWell has limited
gestures, whereas GestrueDetector has more gesture control.
GestureDectectro
• GestureDetector is a non-visual widget primarily used for detecting the
user’s gesture.
• To identify a gesture targeted on a widget, the widget can be placed inside
GestureDetector widget. GestureDetector will capture the gesture and dispatch
multiple events based on the gesture.
• If this widget has a child, it defers to that child for its sizing behavior. If it does not
have a child, it grows to fit the parent instead.
• By default a GestureDirector with an invisible child ignores touches; this behavior can
be controlled with behavior class
Gesture Syntax
Some widgets, like Container and Card widgets, don’t have an inbuilt way
of detecting gestures. Such widgets are wrapped in the GestureDectector
widget.

body: Center(
child: GestureDetector(
onTap: () {
// do your code
},
child: Container
child: Text( 'Hello World’, ),
color: Colors.yellow) ),
IT Industry-Academia Bridge Program
GestrueDetector Callback Functions
• Tap: The user briefly touched the screen with a fingertip.
Callback Functions:- onTapDown, onTapUp, onTap, onTapCancel
Applications:- Select / Cancel / Submit
• Double-tap:- The user tapped the screen at the same location twice in quick succession.
Callback Functions: onDoubleTapDown / onDoubleTap / onDoubleTapCancel
Applications: Like / dislike, Screen on/off, Resize an image
• Long Press:- The user made contact with the screen at the same location for a long period of time.
Callback Functions: nLongPressDown, onLongPressStart, onLongPress, onLongPressEnd, onLongPressUp
Applications: Show more options, Move an icon
• Scale:- The user pinched or spread the screen.
Callback Functions: onScaleStart, onScaleEnd, onScaleUpdate, screenPossible
Applications: Zoom in/out, Rotation.
• Vertical Drag:- The user made contact with the screen and moved their fingertip in a steady manner
vertically.
Callback Function: onVerticalDragDown, onVerticalDragStart, onVerticalDragEnd, onVerticalDragCancel,
onVerticalDragDown
Applications: Scrool
Horzontal Drag: The user made contact with the screen and moved their fingertip in a steady manner
horizontally.
GestureDetector with Scalling
With Scalling user pinched or spread the screen. Its callback
function are
onScaleStart: triggered when contact with the screen has
established. It has a parameter of type ScaleStartDetails.
onScaleEnd: triggered when user is no longer making contact
with. It has a parameter of type ScaleEndDetails.
onScaleUpdate: triggered when contact with the screen has
indicated a new focal point and/or scale. It has a parameter
of type onScaleUpdate.

IT Industry-Academia Bridge Program


InWell

InkWell is the material widget in flutter. It responds to the touch action


as performed by the user. it is very similar to the gesture detector.
InkWell is best for the following actions
• onTap()
• onDoubleTap()
• onLongPress()
The InkWell class is a rectangular area, mean the area that responds to
touch is rectangular shape and shows a ‘splash’ effect in circular shape.

IT Industry-Academia Bridge Program


GestureDirector vs Inwell
• They both provide many common features like onTap, onLongPress
etc. The main difference is GestureDetector provides more controls
like dragging etc. on the other hand it doesn't include ripple effect
tap, which InkWell does.
• You can use either of them according to your needs, you want ripple
effects go with InkWell, need more controls go with GestureDetector
or even combine both of them.

IT Industry-Academia Bridge Program


IT Industry-Academia Bridge Program

You might also like