Mobile Application Development class 005

Mobile Application Development
class 05
Dr. Mazin Alkathiri
IT Department
Seiyun University
2023-2024

Flutter - Introduction to Gestures
• Gestures are an interesting feature in Flutter that allows us to interact
with the mobile app (or any touch-based device).
• Generally, gestures define any physical action or movement of a user in
the intention of specific control of the mobile device.
• Some of the 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.
• Flutter divides the gesture system into two different layers, which are
given below:
– Pointers
– Gestures

Pointers
• Pointers are the first layer that represents the raw data about
user interaction.
• It has events, which describe the location and movement of
pointers such as touches, mice, and style across the screens.
• Flutter does not provide any mechanism to cancel or stop the
pointer-events from being dispatched further.
• Flutter provides a Listener widget to listen to the pointer-
events directly from the widgets layer.
• The pointer-events are categories into mainly four types:
– PointerDownEvents
– PointerMoveEvents
– PointerUpEvents
– PointerCancelEvents

• PointerDownEvents: It allows the pointer to
contact the screen at a particular location.
• PointerMoveEvents: It allows the pointer to
move from one location to another location
on the screen.
• PointerUpEvents: It allows the pointer to stop
contacting the screen.
• PointerCancelEvents: This event is sent when
the pointer interaction is canceled.

Listener(
onPointerDown: (event) {
print('Pointer down');
},
onPointerUp: (event) {
print('Pointer up');
},
onPointerMove: (event) {
print('Pointer move');
},
child:Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
),

Gestures
• It is the second layer that represents semantic
actions such as tap, drag, and scale, which are
recognized from multiple individual pointer
events.
• It is also able to dispatch multiple events
corresponding to gesture lifecycle like drag start,
drag update, and drag end.
• Some of the popularly used gesture are listed
below:

Some of the widely used gestures are
mentioned here −
• Tap − Touching the surface of the device with fingertip for a
short period and then releasing the fingertip.
• 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 − Pinching the surface of the device using two
fingers.
• Spread/Zoom − Opposite of pinching.
• Panning − Touching the surface of the device with fingertip
and moving it in any direction without releasing the
fingertip.

Gesture Detector
• Flutter provides an excellent support for all type of
gestures through its exclusive widget,
GestureDetector.
• 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.

return new Scaffold(
appBar: new AppBar(
title: new Text('Gestures Example'),
centerTitle: true,
),
body: new Center(child: GestureDetector(
onTap: () {
print('Box Clicked');
},
child: Container(
height: 60.0,
width: 120.0,
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.circular(15.0),
),
child: Center(child: Text('Click Me')),
)
)),
);

Some of the gestures and the
corresponding events are given below
• Tap
– onTapDown
– onTapUp
– onTap
– onTapCancel
• Double tap
– onDoubleTap
• Long press
– onLongPress
• Vertical drag
– onVerticalDragStart
– onVerticalDragUpdate
– onVerticalDragEnd
• Horizontal drag
– onHorizontalDragStart
– onHorizontalDragUpdate
– onHorizontalDragEnd
• Pan
– onPanStart
– onPanUpdate
– onPanEnd

• let us modify the hello world application to include
gesture detection feature and try to understand the
concept.
• Change the body content of the MyHomePage widget
as shown below −
body: Center(
child: GestureDetector(
onTap: () {
_showDialog(context);
},
child: Text( 'Hello World', )
)
),

• Observe that here we have placed the
GestureDetector widget above the Text widget in
the widget hierarchy, captured the onTap event
and then finally shown a dialog window.
• Implement the *_showDialog* function to
present a dialog when user tabs the hello world
message. It uses the
generic showDialog and AlertDialog widget to
create a new dialog widget.
• The code is shown below –

// user defined function void _showDialog(BuildContext context)
{
// flutter defined function
showDialog(
context: context, builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: new Text("Message"),
content: new Text("Hello World"),
actions: <Widget>[
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}

Flutter also provides a set of widgets that can allow you to do a specific as
well as advanced gestures. These widgets are given below:
• Dismissible: It is a type of widget that supports the flick gesture to
dismiss the widget.
• Draggable: It is a type of widget that supports drag gestures to move
the widget.
• LongPressDraggable: It is a type of widget that supports drag gesture to
move a widget along with its parent widget.
• DragTarget: It is a type of widget that can accept any Draggable widget
• IgnorePointer: It is a type of widget that hides the widget and its
children from the gesture detection process.
• AbsorbPointer: It is a type of widget that stops the gesture detection
process itself. Due to this, any overlapping widget cannot able to
participate in the gesture detection process, and thus, no event is
raised.
• Scrollable: It is a type of widget that supports scrolling of the content
which is available inside the widget.

Mobile Application Development class 005

Recommended

More Related Content

Similar to Mobile Application Development class 005 (20)

More from Dr. Mazin Mohamed alkathiri (20)

Recently uploaded (20)

Mobile Application Development class 005