When it comes to controlling the gestures within the application, managing user gestures as per the user’s feedback is of prime importance; this is what GestureDetector Flutter is destined for.
You can recognize gestures like taps, drags, dropdowns, and swipes using the GestureDetector widget, and you can apply custom logic to the motions to determine how they should be handled.
This article will briefly explain what Flutter GestureDetector is and how it handles all the gestures within the Flutter-made application.
What Is Flutter GestureDetetor?
The GestureDetector in Flutter is a non-visible widget that manages all gestures made within an application. Gestute is a specific action made by the user to give a specific command to the device. Common gestures in Flutter include:
- Tapping
- Dragging
- LongPressing
Widgets like cards and containers cannot detect the gesture(s). They are generally wrapped with GestureDetector to execute the gesture made; however, unlike InkWell Flutter, it does not display any visual effect in the form of a ripple effect.
GestureDetector Flutter only responds to those gestures with predefined callbacks. With the child, it fits the size of the child for sizing. While if there is no child, it grows to the size of its parent. To disable this widget, you must make a null value to the callback.
Flutter GestureDetector Example
In this example, we will learn how to use GestureDetector in Flutter around the Container border flutter widget. To use the Flutter GestureDetector, you must first import the ‘materia.dart’ package. The GestureDetector takes a child and a callback. In this example, we use Container as a child, and we use an onTap callback. When we tap on the Container, a SnackBar will pop up from the bottom of the screen with the message ‘Tap!’.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('GestureDetector Example'),
),
body: const Center(child: MyGesture()),
),
);
}
}
class MyGesture extends StatelessWidget {
const MyGesture({super.key});
@override
Widget build(BuildContext context) {
// GestureDetector wraps the button
return GestureDetector(
// When the child is tapped
onTap: () {
const snackBar = SnackBar(content: Text('Tap!'));
// Find the ScaffoldMessenger in the widget tree
// and use it to show a SnackBar
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
// Our GestureDetector wraps a Container
child: Container(
padding: const EdgeInsets.all(12.0),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(8.0),
),
child: const Text(
'Tap me',
style: TextStyle(color: Colors.white),
),
),
);
}
}
Here is the video representation of the code:
Other gestures or callbacks which you can have other than ‘onTap’ are:
| Gestures in GestureDetector Flutter | Description |
| onDoubleTap | Triggered when the user taps the widget twice within a specific time frame. |
| onLongPress | Triggered when the user presses or holds the screen for a specified duration. |
| onSecondaryTap | There has been a secondary button tap. This starts when the tap gesture succeeds. OnSecondaryTapCancel is called in its place if the tap gesture is unsuccessful. |
| onLongPressDown | The user must press and hold the screen for the specified time for this callback to be activated. When the lengthy press is noticed, it is just called once. |
| onVerticalDragStart | It is triggered when a vertical drag gesture is recognized and starts. |
| onPanStart | Regardless of the direction of the flutter drag, the onPanStart callback of the GestureDetector is activated whenever a pan gesture (dragging across the screen) is detected and begins. |
Scale-Up Gestures In Flutter GestureDetector
These gestures are usually made in a Flutter when the user zooms in or out of the screen or enlarges it.
Here is how to scale gesturedetector android works
Following gestures are usually made in scale-up GestureDetector Flutter:
- onScaleStart: When the user initiates a scale gesture, the onScaleStart callback is activated. This callback is activated once when a user touches the screen for the first time with two fingers.
- onScaleUpdate: As the user scales the widget, the onScaleUpdate callback is continuously invoked. A ScaleUpdateDetails object containing details about the current scale factor is used to call this function..
- onScaleEnd: When a user ends a scale gesture, the callback function onScaleEnd is activated. This callback is activated once the user lifts their finger off the screen.
GestureDetector Navigation Flutter
Flutter uses navigation widgets to navigate within different pages. These navigation widgets take charge of a stack of routes. When handling mobile applications, users invoke different GestureDetector swipe flutter gestures to navigate across the images.
Flutter GestureDetectos take in all the navigation and invoke necessary callback gestures.
Gesture Arena Flutter
If you need more control over the gesture system, such as to recognize simultaneous gestures, you might need to use the lower-level GestureArena system or create your own GestureRecognizer.
The GestureRecognizers identify particular motion patterns and receive touch events from the Flutter gesture system. When several recognizers are perhaps interested in the same touch event sequence, these recognizers compete in the GestureArena, which chooses the winner.
Following are the steps to do it:
- Implementing a unique GestureRecognizer can be helpful if you want to identify a unique gesture. A GestureRecognizer receives several touch events and either recognize a particular gesture or forwards the events to other recognizers.
- Recognizers for multiple simultaneous gestures: The RawGestureDetector widget can detect multiple simultaneous gestures. You can do this by supplying your own recognizers and setting them up for simultaneous recognition. GestureRecognizer instances are created to accomplish this and connected via the team property.
- Direct control of the GestureArena flutter: If you require even greater control, you can direct the gesture arena. This lets you manually add or remove recognizers from the arena and choose which ones should triumph in challenging circumstances.
Flutter GestureDetector Vs. InkWell Widget
Though both useful widgets within Flutter handle the gesture interaction within the application, they still differ significantly in their functions.
Regarding functioning, Flutter GestureDetector tackles the callbacks for various touch interactions. They handle all the non-visible outputs. Whereas InkWell Flutter adds a splash to the touch interaction and creates a ripple effect to make an impression on the user that your command has been received.
Where GestureDetector handles touch interaction, the InkWell Flutter visually displays the touch using Material Widget.
Last, the GestureDetector navigation flutter is more complex, while the InkWell Flutter is more straightforward and best suited.
Conclusion
Like InkWell, GestureDetector Flutter also uses gesture callbacks to execute proper action. Though its output is not visible, it makes human interaction with their application easier and smooth. Understanding and effectively using Flutter’s gesture system is crucial for creating intuitive and responsive user interfaces, as it provides a comprehensive range of functionalities that caters to simple and advanced touch interactions.
