Flutter Gesturedetector Tutorial
Flutter Gesturedetector Tutorial
Below is an example Flutter code snippet that demonstrates the use of various gesture-related callbacks in a GestureDetector
. These callbacks include onTap
, onTapUp
, onTapDown
, onLongPress
, onDoubleTap
, onHorizontalDragStart
, onVerticalDragDown
, onPanDown
, and onScaleStart
.
import 'package: flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyGestureDemo(), ); } } class MyGestureDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Gesture Detector Example'), ), body: Center( child: GestureDetector( onTap: () { print('onTap'); }, onTapUp: (TapUpDetails details) { print('onTapUp: ${details.globalPosition}'); }, onTapDown: (TapDownDetails details) { print('onTapDown: ${details.globalPosition}'); }, onLongPress: () { print('onLongPress'); }, onDoubleTap: () { print('onDoubleTap'); }, onHorizontalDragStart: (DragStartDetails details) { print('onHorizontalDragStart: ${details.globalPosition}'); }, onVerticalDragDown: (DragDownDetails details) { print('onVerticalDragDown: ${details.globalPosition}'); }, onPanDown: (DragDownDetails details) { print('onPanDown: ${details.globalPosition}'); }, onScaleStart: (ScaleStartDetails details) { print('onScaleStart: ${details.focalPoint}'); }, child: Container( width: 200, height: 200, color: Colors.blue, child: Center( child: Text( 'Tap or Drag Here', style: TextStyle(color: Colors.white), ), ), ), ), ), ); } }