GestureDetector In Flutter
When it comes to creating applications, you have to handle user reactions such as touch and drags. This makes your application interactional beneficially handle gestures, you need to listen to the gestures and greet them. Flutter offers a change of widgets that help add interactivity to your apps.
In this article, we will explore the GestureDetector In Flutter. We will see how to implement a demo program to create a GestureDetector and also shows properties in your flutter applications.
Table Of Contents::
Introduction:
There are many widgets in a flutter, like Container, Column, Text, etc. They don’t have a basic way of detecting gestures. Such widgets are covered in the “GestureDetector” widget which is simply used for detecting gestures and does not give any visual response like a wave effect.
It’s a widget that detects gestures. Attempts to acknowledge gestures that correspond to its non-null callbacks. If this widget has a child, it stays with that child for its sizing behavior. If it does not have a child, it fattens to fit the parent instead. By default a Gesture Detector with an unseeable child ignores touches; this behavior can be supervised with behavior. Gesture Detector also listens for accessibility events and maps them to the callbacks. To ignore availability events.
GestureDetector({
Key key,
Widget? child,
void Function(TapDownDetails)? onTapDown,
void Function(TapUpDetails)? onTapUp,
void Function()? onTap,
void Function()? onTapCancel,
void Function()? onSecondaryTap,
});Properties:
There are some properties of GestureDetector are:
- > child: This widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row, Column, or Stack, which have a children property, and then provide the children to that widget.
Implementation:
final Widget? child;- onTap(): Touching the surface of the device with a fingertip for a short period and then releasing the fingertip.
Implementation:
final GestureTapCallback? onTap;- onTapDown(): Triggered when the user makes contact with the screen, might be a tap.
Implementation:
final GestureTapDownCallback? onTapDown;- onDoubleTap(): The user tapped the screen at the same location twice in quick succession.
Implementation:
final GestureTapCallback? onDoubleTap;- onHorizontalDragEnd(): A pointer that was previously in contact with the screen with a primary button and moving horizontally is no longer in contact with the screen and was moving at a specific velocity when it stop final GestureDragEndCallback? onHorizontalDragEnd;ped contacting the screen.
Implementation:
final GestureDragEndCallback? onHorizontalDragEnd;- onDoubleTapDown(): The pointer that previously triggered onDoubleTapDown will not end up causing a double-tap.
Implementation:
final GestureTapCancelCallback? onDoubleTapCancel;- onLongPress(): Triggered when a pointer has remained in contact with the screen at the same location for a long period.
Implementation:
final GestureLongPressCallback? onLongPress;Implementation:
In the Gesture Detector demo, first, we take a Stateful class and create color and text variable in which we pass the initial color, the value of color is Teal and the value of the text is “Hello! it’s Teal Color”.
In BuildContext() we return Scaffold() and use the property of AppBar() and pass the title of the application. In the body of Scaffold(), we pass Center() and after that, we pass GestureDetector() as a child of it. We create a Container() and pass the color and text which is already passed the code. And use the properties of GestureDetector(), We use onTap(): onTap() is used when the user makes contact with the screen, which might be a tap.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepPurpleAccent,
centerTitle: true,
title: Text('Gesture Detector Demo'),
),
body: Center(
child: GestureDetector(
child: Container(
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(20)
),
width: 250,
height: 200,
child: Center(
child: text,
)),
),
),
);
}In the onTap() we pass the setState() and in the setState() we pass the different colors which are Amber colors and pass the new Text “Hello! it’s Amber Color”. When we click on that container, The color, and the text will be changed.
onTap: (){
setState(() {
color = Colors.amber;
text = Text("Hello! it's Amber Color",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),);
});
},After that, we use onDoubleTap(): onDoubleTap() is used when the user tapped the screen at the same location twice in quick succession. In this, we pass the setState() and in this, we pass the different color which is Blue color and pass the new Text “Hello! it’s Blue Color”. When we double click on that container, The color, and the text will be changed.
onDoubleTap: (){
setState(() {
color = Colors.blueAccent;
text = Text("Hello! it's Blue Color",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),);
});
},And at last, we create onLongPress(): onLongPress() is used when a pointer has remained in contact with the screen at the same location for a long period. In this, we pass the setState() and in this, we pass the different color which is Orange color, and pass the new Text “Hello! it’s Orange Color”. When we press the container for a long time, The color and the text will be changed.
onLongPress: (){
setState(() {
color = Colors.deepOrangeAccent;
text = Text("Hello! it's Orange Color",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),);
});
},When we run the application, we ought to get the screen’s output like the underneath screen video.
Conclusion:
In this article, we have been through What is GestureDetector in Flutter along with how to implement it in a Flutter. By using we can perform many orations of tap or we can say we can perform different type onClick. You can use this according to your requirement.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the Gesture Detector:
GitHub – flutter-devs/flutter_gesture_detector
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
