- Customizing Fonts in Flutter with ExampleFlutter Skeleton Text with ExampleFlutter Themes with ExampleFlutter Lazy Loader with ExampleFlutter UI Orientation with ExampleFlutter Animation in Route Transition with ExampleFlutter Physics Simulation in Animation with ExampleFlutter Radial Hero Animation with ExampleFlutter Hinge Animation with ExampleFlutter Lottie Animation with Example
- URLs in Flutter with ExampleRoutes and Navigator in FlutterFlutter WebSockets with ExampleFlutter Named Routes with ExampleFlutter Arguments in Named RoutesMulti Page Applications in FlutterFlutter Updating Data on the InternetFlutter Fetching Data From the InternetFlutter Deleting Data On The InternetFlutter Sending Data To The InternetFlutter Send Data to Screen with Example
Flutter Gestures with Example
Flutter provides a rich set of gestures that can be used to create interactive user interfaces. In this blog, we'll explore some of the most commonly used gestures in Flutter and how to implement them with examples.
onTap
The onTap gesture is used to detect when a user taps on a widget.
Let's look at an example of how to use it
GestureDetector(
onTap: () {
print('Widget tapped!');
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
);
In this code, we're using the GestureDetector widget to detect when the user taps on the blue container. When the container is tapped, the onTap function will be called and the message "Widget tapped!" will be printed to the console.
onDoubleTap
The onDoubleTap gesture is used to detect when a user double-taps on a widget.
Let's look at an example of how to use it
GestureDetector(
onDoubleTap: () {
print('Widget double-tapped!');
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
);
In this code, we're using the GestureDetector widget to detect when the user double-taps on the blue container. When the container is double-tapped, the onDoubleTap function will be called and the message "Widget double-tapped!" will be printed to the console.
onLongPress
The onLongPress gesture is used to detect when a user long-presses on a widget.
Let's look at an example of how to use it:
GestureDetector(
onLongPress: () {
print('Widget long-pressed!');
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
);
In this code, we're using the GestureDetector widget to detect when the user long-presses on the blue container. When the container is long-pressed, the onLongPress function will be called and the message "Widget long-pressed!" will be printed to the console.
onHorizontalDragUpdate
The onHorizontalDragUpdate gesture is used to detect when a user horizontally drags on a widget.
Let's look at an example of how to use it
GestureDetector(
onHorizontalDragUpdate: (DragUpdateDetails details) {
print('Horizontal drag update: ${details.delta.dx}');
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
);
In this code, we're using the GestureDetector widget to detect when the user horizontally drags on the blue container. When the container is dragged, the onHorizontalDragUpdate function will be called and the horizontal drag distance will be printed to the console.
onVerticalDragUpdate
The onVerticalDragUpdate gesture is used to detect when a user vertically drags on a widget.
Let's look at an example of how to use it
GestureDetector(
onVerticalDragUpdate: (DragUpdateDetails details) {
print('Vertical drag update: ${details.delta.dy}');
},
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
);
In this code, we're using the GestureDetector widget to detect when the user vertically drags on the blue container. When the container is dragged