onHorizontalDragUpdate
- Flutter course
- Beginner
- Lesson 54/99
- 4 min
Learn to catch horizontal drag events.
onHorizontalDragUpdate
onHorizontalDragUpdate is called repeatedly as the user drags horizontally. Each drag move triggers another call. Its parameter is a DragUpdateDetails object that tells you the direction and amount of the drag.
GestureDetector(
onHorizontalDragUpdate: (details) {
print(details.delta.dx);
},
child: Container(width: 200, height: 80),
)DragUpdateDetails.delta
The delta property of DragUpdateDetails gives how much the finger moved since the last event. delta.dx gives the horizontal change, delta.dy the vertical change. By summing these values during a drag you can compute the total offset.
Practice Write the drag callback
Write a function onDrag that takes a DragUpdateDetails parameter and prints details.delta.dx. In main call onDrag with DragUpdateDetails(globalPosition: Offset.zero, delta: Offset(7, 0)).
Starter code
import 'package:flutter/material.dart';
// surukleme fonksiyonu DragUpdateDetails parametresi alsin
// details.delta.dx degerini print ile yazdirsin
void main() {
// surukleme fonksiyonunu su degerlerle cagir:
// DragUpdateDetails(globalPosition: Offset.zero, delta: Offset(7, 0))
}Sample solution
import 'package:flutter/material.dart';
void surukleme(DragUpdateDetails details) {
print(details.delta.dx);
}
void main() {
surukleme(DragUpdateDetails(
globalPosition: Offset.zero,
delta: const Offset(7, 0),
));
}Expected output
7.0
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What type is the parameter of the onHorizontalDragUpdate callback?
- TouchUpdateDetails
- SwipeDetails
- DragUpdateDetails Correct answer
- TapDetails
Explanation: The onHorizontalDragUpdate callback takes a parameter of type DragUpdateDetails; this object contains fields such as delta and globalPosition.
2 Access delta.dx
onHorizontalDragUpdate: (details) {
print(details.____.dx);
},onHorizontalDragUpdate: (details) {
print(details.delta.dx);
},Explanation: In DragUpdateDetails the movement amount is in the delta property; delta.dx gives the horizontal change.
3 Drag parts
| Term | Meaning |
|---|---|
onHorizontalDragUpdate |
Horizontal drag callback |
DragUpdateDetails |
The callback's parameter type |
delta.dx |
The horizontal change |
delta.dy |
The vertical change |