Flutter Gestures
  Nhts4LcX4RvQ 2023年11月02日 83 0

Learn to handle Flutter gestures like tap, press, long press, drags, etc. It is very important to know the actions of user.
Gestures are physical action and movement on the app screen with the purpose to give command or control the app. It is very important feature to interact with users. Some of the examples of gestures are:

sliding the lock screen.
Tap on mobile screen
Holding touch on the button.

Different types of Gestures:
Tap: It is a touching screen with a fingertip for very short time and releasing it instantly. This gesture contains the following events:

onTapDown
onTapUp
onTap
onTapCancel

Double Tap: It is touching screen and releasing it instantly two times with a fingertip. This gesture contains the following events:

onDoubleTap
Press: It is pressing screen with a fingertip for short time. This gesture contains the following events:

onPressed
Long Press: It is touching the screen with a fingertip for a long time. This gesture contains the following events:

onLongPress

Drag: It is pressing on any component on app screen and move it from one location to another location. This gesture contains the following events:

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd
onVerticalDragStart
onVerticalDragStart
onVerticalDragStart

How to detect Gestures:
On app, you may need to respond to users according to their actions. For example, we need to execute some blocks of code on button press and give output to the user. In Flutter, some widgets have default gesture responder parameters on which we need to pass the sets of code-block. For example, FlatButton widgets has onLongPress and onPressed parameters on which we can assign code block or any method to execute.

FlatButton(
onLongPress: (){
//sets of code to execture after button long press
print("Button is long pressed.");
},
onPressed: (){
//sets of code to execute after button press
print("Button is pressed");
},
child: Text("Press Button"),
)

This is the way you can put code block to the gesture listener parameter of widgets, but the problem will arise when widget has no such parameters. For example, you have an image on app and want to respond whenever user taps on it. Flutter has some widgets to respond to the gestures from users. You simply need to wrap the non-interactive widgets with such gesture detector widgets.

  1. GestureDetector( )

GestureDetector() widget helps to detect wide variety of gestures from users. Suppose you need to respond to the user when every they tap on card or any images. Simply wrap such widgets with GestureDetector() and place sets of code-blocks on its gesture listener parameter like an example below:

GestureDetector( 
child: Card(
child: Text("Click on Me"),
),

onTap: (){
print("Card is tapped.");
},

onDoubleTap: ()=> print("Card is double tapped."),

onLongPress: (){
print("Card is long pressed.");
},
)
  1. InkResponse()

InkResponse() widgets help to detect some sorts of gestures and it creates splash effects on screen touch. Wrap non-interactive widgets with InkResponse() to make them interactive like below:

InkResponse( 
child: Card(
child: Text("Click on Me"),
),

onTap: (){
print("Card is tapped.");
},

onDoubleTap: ()=> print("Card is double tapped."),

onLongPress: (){
print("Card is long pressed.");
},
)

作者:​​我北漂沪漂的这几年​​,


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  sX9JkgY3DY86   2023年11月13日   43   0   0 idesedImage
  sX9JkgY3DY86   2023年11月13日   18   0   0 分割线ideText
  sX9JkgY3DY86   2023年11月13日   35   0   0 ci控件Text
  sX9JkgY3DY86   2023年11月13日   26   0   0 ideTextflutter
  sX9JkgY3DY86   2023年11月13日   37   0   0 Textsed
Nhts4LcX4RvQ