Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

gesture
detector
flutter
communitycreator

What is Gesture Detector in Flutter?

Hammad Qayyum

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Gesture Detector in Flutter is used to detect the user’s gestures on the application. It is a non-visual widget.

Inside the gesture detector, another widget is placed and the gesture detector will capture all these events (gestures) and execute the tasks accordingly. It notifies whenever the particular motion event has occurred.

Let’s create a new application and learn more about gesture detector. Use the following command to create a new flutter application:

flutter create gesture_detector_flutter

You can run the application by using the following command:

flutter run

Now in the main.dart file, we will add a gesture detector. The gesture detector will have the following features:

  • 1- Tap:
    When the widget inside the gesture detector is tapped once, the function or the code inside the onTap() function will run.

  • 2- Double Tap:
    When the widget inside the gesture detector is tapped twice, the function or the code inside the onDoubleTap() function will run.

  • 3- Long Press:
    When the widget inside the gesture detector is pressed for a long time, the function or the code inside the onLongPress() function will run.

Some other features of gesture detector are getting the current location of the gesture on the screen using the onHorizontalDragUpdate or onVerticalDragUpdate functions. We can also get the user’s gesture/swipe velocity with the dragEndDetails.

Now, we will make a simple gesture detection application that will contain a simple Container widget with all the above working functions. We will write the following code snippet in main.dart:

class _MyHomePageState extends State<MyHomePage> {
bool _lightIsOn = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
Padding(
child: Icon(
Icons.lightbulb_outline,
color: _lightIsOn ? Colors.yellow.shade600 : Colors.black,
size: 60,
),
),
GestureDetector(
onTap: () {
setState(() {
_lightIsOn = !_lightIsOn;
final snackBar = SnackBar(content: Text('Tap Function'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
});
},
onDoubleTap: (){
setState(() {
_lightIsOn = !_lightIsOn;
final snackBar = SnackBar(content: Text('Double Tap Function'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
});
},
onLongPress: (){
setState(() {
_lightIsOn = !_lightIsOn;
final snackBar = SnackBar(content: Text('Long Press Function'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
});
},
child: Text(_lightIsOn ? 'TURN LIGHT OFF' : 'TURN LIGHT ON'),
),
),
],
),
),
);
}
}

You can also download the complete application and code from the following link: https://github.com/hammad-qayyum/gesture_detector_flutter.git

RELATED TAGS

gesture
detector
flutter
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring