Flutter - Introducción a los gestos

Los gestos son principalmente una forma para que un usuario interactúe con una aplicación móvil (o cualquier dispositivo táctil). Los gestos se definen generalmente como cualquier acción / movimiento físico de un usuario con la intención de activar un control específico del dispositivo móvil. Los gestos son tan simples como tocar la pantalla del dispositivo móvil para acciones más complejas utilizadas en aplicaciones de juegos.

Algunos de los gestos más utilizados se mencionan aquí:

Tap - Tocar la superficie del dispositivo con la yema del dedo durante un período breve y luego soltar la yema del dedo.
Double Tap - Tocando dos veces en poco tiempo.
Drag - Tocar la superficie del dispositivo con la yema del dedo y luego mover la yema del dedo de manera constante y finalmente soltar la yema del dedo.
Flick - Similar a arrastrar, pero haciéndolo más rápido.
Pinch - Pellizcar la superficie del dispositivo con dos dedos.
Spread/Zoom - Lo contrario de pellizcar.
Panning - Tocar la superficie del dispositivo con la yema del dedo y moverlo en cualquier dirección sin soltar la yema del dedo.

Flutter brinda un excelente soporte para todo tipo de gestos a través de su widget exclusivo, GestureDetector. GestureDetector es un widget no visual que se utiliza principalmente para detectar el gesto del usuario. Para identificar un gesto dirigido a un widget, el widget se puede colocar dentro del widget GestureDetector. GestureDetector capturará el gesto y enviará varios eventos en función del gesto.

Algunos de los gestos y los eventos correspondientes se dan a continuación:

onTapDown
onTapUp
onTap
onTapCancel

Doble toque

onDoubleTap

Pulsación larga

onLongPress

Arrastre vertical

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

Arrastre horizontal

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

onPanStart
onPanUpdate
onPanEnd

Ahora, modifiquemos la aplicación Hola mundo para incluir la función de detección de gestos e intentemos comprender el concepto.

Cambie el contenido del cuerpo del widget MyHomePage como se muestra a continuación:

body: Center( 
   child: GestureDetector( 
      onTap: () { 
         _showDialog(context); 
      }, 
      child: Text( 'Hello World', ) 
   ) 
),

Observe que aquí hemos colocado el widget GestureDetector encima del widget Text en la jerarquía de widgets, capturamos el evento onTap y finalmente mostramos una ventana de diálogo.
Implemente la función * _showDialog * para presentar un diálogo cuando el usuario presiona el mensaje de hola mundo . Utiliza el widget genérico showDialog y AlertDialog para crear un nuevo widget de diálogo. El código se muestra a continuación:

// user defined function void _showDialog(BuildContext context) { 
   // flutter defined function 
   showDialog( 
      context: context, builder: (BuildContext context) { 
         // return object of type Dialog
         return AlertDialog( 
            title: new Text("Message"), 
            content: new Text("Hello World"),   
            actions: <Widget>[ 
               new FlatButton( 
                  child: new Text("Close"),  
                  onPressed: () {   
                     Navigator.of(context).pop();  
                  }, 
               ), 
            ], 
         ); 
      }, 
   ); 
}

La aplicación se recargará en el dispositivo usando la función Hot Reload. Ahora, simplemente haga clic en el mensaje, Hola mundo y se mostrará el cuadro de diálogo de la siguiente manera:

Ahora, cierre el cuadro de diálogo haciendo clic en la opción cerrar en el cuadro de diálogo.

El código completo (main.dart) es el siguiente:

import 'package:flutter/material.dart'; 
void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget { 
   // This widget is the root of your application.    
   @override 
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application', 
         theme: ThemeData( primarySwatch: Colors.blue,), 
         home: MyHomePage(title: 'Home page'), 
      ); 
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
   
   // user defined function 
   void _showDialog(BuildContext context) { 
      // flutter defined function showDialog( 
         context: context, builder: (BuildContext context) { 
            // return object of type Dialog return AlertDialog(
               title: new Text("Message"), 
               content: new Text("Hello World"),   
               actions: <Widget>[
                  new FlatButton(
                     child: new Text("Close"), 
                     onPressed: () {   
                        Navigator.of(context).pop();  
                     }, 
                  ), 
               ],
            );
         },
      );
   }
   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center(
            child: GestureDetector( 
               onTap: () {
                  _showDialog(context);
               },
            child: Text( 'Hello World', )
            )
         ),
      );
   }
}

Finalmente, Flutter también proporciona un mecanismo de detección de gestos de bajo nivel a través del widget Listener . Detectará todas las interacciones del usuario y luego enviará los siguientes eventos:

PointerDownEvent
PointerMoveEvent
PointerUpEvent
PointerCancelEvent

Flutter también proporciona un pequeño conjunto de widgets para realizar gestos específicos y avanzados. Los widgets se enumeran a continuación:

Dismissible - Soporta gestos rápidos para cerrar el widget.
Draggable - Soporta gestos de arrastre para mover el widget.
LongPressDraggable - Admite el gesto de arrastrar para mover un widget, cuando su widget principal también se puede arrastrar.
DragTarget- Acepta cualquier widget arrastrable
IgnorePointer - Oculta el widget y sus hijos del proceso de detección de gestos.
AbsorbPointer - Detiene el proceso de detección de gestos en sí mismo y, por lo tanto, cualquier widget superpuesto tampoco puede participar en el proceso de detección de gestos y, por lo tanto, no se genera ningún evento.
Scrollable - Soporte de desplazamiento del contenido disponible dentro del widget.

↰ Previous page Next page ↱