Aleteo – Gestos

Los gestos se utilizan para interactuar con una aplicación. Generalmente se usa en dispositivos táctiles para interactuar físicamente con la aplicación. Puede ser tan simple como un solo toque en la pantalla hasta una interacción física más compleja, como deslizar el dedo en una dirección específica para desplazarse hacia abajo en una aplicación. Se usa mucho en los juegos y más o menos todas las aplicaciones lo requieren para funcionar, ya que los dispositivos se vuelven más táctiles que nunca. En este artículo, los discutiremos en detalle.

Algunos gestos ampliamente utilizados se mencionan aquí:

• Tocar: tocar la superficie del dispositivo con la yema del dedo durante un breve período de tiempo y finalmente soltar la yema del dedo.
• Toque doble: toque dos veces en poco tiempo.
• Arrastrar: 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 de una manera más rápida.
• Pellizcar: pellizcar la superficie del dispositivo con dos dedos.
• Zoom: Lo contrario de pellizcar.
• Panorámica: Tocar la superficie del dispositivo con la yema del dedo y moverlo en la dirección deseada sin soltar la yema del dedo.

El widget GestureDetector en flutter se usa para detectar la interacción física con la aplicación en la interfaz de usuario. Si se supone que un widget debe experimentar un gesto, se mantiene dentro del widget GestureDetector. El mismo widget capta el gesto y devuelve la acción o respuesta adecuada.

A continuación se muestra la lista de gestos y sus eventos correspondientes:

Tocar

• onTapDown
• onTapUp
• en el toque
• onTapCancelar

Doble toque

• onDoubleTap

Pulsación larga

• onLongPress

Arrastre vertical

• onVerticalDragStart
• onVerticalDragUpdate
• onVerticalDragEnd

Arrastre horizontal

• onHorizontalDragStart
• onHorizontalDragUpdate
• onHorizontalDragEnd

Sartén

• enPanStart
• onPanActualizar
• enPanEnd

Ejemplo:

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    const title = 'Gestures';
 
    return const MaterialApp(
      title: title,
      home: MyHomePage(title: title),
    );
  }
}
 
class MyHomePage extends StatelessWidget {
  final String title;
 
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: const Center(child: MyButton()),
    );
  }
}
 
class MyButton extends StatelessWidget {
  const MyButton({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    // The GestureDetector wraps the button.
    return GestureDetector(
      // show snackbar on tap of child
      onTap: () {
        const snackBar =
            SnackBar(content: Text(" You just Tapped on the Button"));
 
        // ignore: deprecated_member_use
        Scaffold.of(context).showSnackBar(snackBar);
      },
      // The tap button
      child: Container(
        padding: const EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          // ignore: deprecated_member_use
          color: Theme.of(context).buttonColor,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: const Text('Tap Button'),
      ),
    );
  }
}

Producción:

Flutter es compatible con los widgets de Listener que son un mecanismo de detección de gestos de bajo nivel. Detecta la interacción del usuario y envía uno de los eventos correspondientes mencionados a continuación:

• PointerDownEvent
• PointerMoveEvent
• PointerUpEvento
• PunteroCancelarEvento

Flutter también tiene widgets para hacer gestos específicos y avanzados. Estos widgets son los siguientes:

• Desechable: Admite gestos rápidos para finalizar el widget.
• Arrastrable: Admite el gesto de arrastrar para hacer que el widget sea móvil.
• LongPressDraggable: si los widgets principales se pueden arrastrar, admite el gesto de arrastrar para mover el widget secundario.
• DragTarget: acepta cualquier widget arrastrable
• IgnorePointer: cuando se usa, oculta el widget y sus hijos correspondientes del proceso de detección de gestos.
• AbsorbPointer: detiene el proceso de detección de gestos para evitar el envío de acciones en widgets superpuestos.
• Desplazable: hace que el contenido esté disponible dentro del widget desplazable.