Scribd
Upload
35 views

Flutter - Introduction To Gestures

Flutter

Uploaded by

Erlin Setyowati
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views

Flutter - Introduction To Gestures

Flutter

Uploaded by

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

Pemrograman Mobile Programming

Flutter – Introduction to Gestures


Gestures are primarily a way for a user to interact with a mobile (or any touch based
device) application. Gestures are generally defined as any physical action / movement of
a user in the intention of activating a specific control of the mobile device. Gestures are
as simple as tapping the screen of the mobile device to more complex actions used in
gaming applications.
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.
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.
Some of the gestures and the corresponding events are given below:
 Tap
o onTapDown
o onTapUp
o onTap
o onTapCancel
 Double tap
o onDoubleTap
o Long press
o onLongPress
 Vertical drag
o onVerticalDragStart
o onVerticalDragUpdate
o onVerticalDragEnd
 Horizontal drag
o onHorizontalDragStart
o onHorizontalDragUpdate
o onHorizontalDragEnd
 Pan
o onPanStart

1|Page Muhammad Irvan


Pemrograman Mobile Programming

o onPanUpdate
o onPanEnd
 Now try to create sample 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:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Center(

child: GestureDetector(
//Gesture of onTap
onTap: () {
_showDialog(context);
},
child: Text(
'Click ME',
))),
);
}
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 Click
ME 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, How are you ?"),
actions: <Widget>[
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}

2|Page Muhammad Irvan


Pemrograman Mobile Programming

 The application will reload in the device using Hot Reload feature. Now, simply click
the message, Hello World and it will show the dialog as below:

The complete code (main.dart) is as follows:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World Demo Application',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: '.:: Home page - Gesture ::.'),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key? key, this.title=''}) : super(key: key);
final String title;
// 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, How are you ?"),

3|Page Muhammad Irvan


Pemrograman Mobile Programming

actions: <Widget>[
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Center(

child: GestureDetector(
//Gesture of onTap
onTap: () {
_showDialog(context);
},
child: Text(
'Click ME',
))),
);
}
}

Tugas :
- Buatlah sebuah aplikasi Latihan tersebut kemudian coba lakukan modifikasi.
- Kirimkan file project dan dokumentasi ke email :
Muhammad.irvan@mercubuana.ac.id
- Tugas boleh di kerjakan berkelompok – max 2 orang.

4|Page Muhammad Irvan

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy