Flutter - Introdução aos Gestos

Gestos são principalmente uma forma de um usuário interagir com um aplicativo móvel (ou qualquer dispositivo baseado em toque). Gestos são geralmente definidos como qualquer ação / movimento físico de um usuário com a intenção de ativar um controle específico do dispositivo móvel. Gestos são tão simples quanto tocar na tela do dispositivo móvel para ações mais complexas usadas em aplicativos de jogos.

Alguns dos gestos amplamente usados são mencionados aqui -

Tap - Tocar a superfície do dispositivo com a ponta do dedo por um curto período e depois liberar a ponta do dedo.
Double Tap - Tocar duas vezes em um curto espaço de tempo.
Drag - Tocar na superfície do dispositivo com a ponta do dedo e, em seguida, mover a ponta do dedo de forma estável e, finalmente, liberar a ponta do dedo.
Flick - Semelhante a arrastar, mas fazendo isso de forma mais rápida.
Pinch - Apertar a superfície do dispositivo com dois dedos.
Spread/Zoom - Oposto de beliscar.
Panning - Tocar a superfície do dispositivo com a ponta do dedo e movê-lo em qualquer direção sem soltar a ponta do dedo.

Flutter fornece um excelente suporte para todos os tipos de gestos através de seu widget exclusivo, GestureDetector. GestureDetector é um widget não visual usado principalmente para detectar o gesto do usuário. Para identificar um gesto direcionado a um widget, o widget pode ser colocado dentro do widget GestureDetector. GestureDetector irá capturar o gesto e enviar vários eventos com base no gesto.

Alguns dos gestos e os eventos correspondentes são fornecidos abaixo -

onTapDown
onTapUp
onTap
onTapCancel

Toque duplo

onDoubleTap

Pressão longa

onLongPress

Arrasto vertical

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

Arrasto horizontal

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

onPanStart
onPanUpdate
onPanEnd

Agora, vamos modificar o aplicativo hello world para incluir o recurso de detecção de gestos e tentar entender o conceito.

Altere o conteúdo do corpo do widget MyHomePage conforme mostrado abaixo -

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

Observe que aqui colocamos o widget GestureDetector acima do widget Texto na hierarquia do widget, capturamos o evento onTap e finalmente mostramos uma janela de diálogo.
Implemente a função * _showDialog * para apresentar um diálogo quando o usuário tabular a mensagem hello world . Ele usa o genérico showDialog e AlertDialog widget para criar um widget de diálogo novo. O código é mostrado abaixo -

// 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();  
                  }, 
               ), 
            ], 
         ); 
      }, 
   ); 
}

O aplicativo será recarregado no dispositivo usando o recurso Hot Reload. Agora, basta clicar na mensagem, Hello World e ela mostrará a caixa de diálogo abaixo -

Agora, feche a caixa de diálogo clicando na opção Fechar da caixa de diálogo.

O código completo (main.dart) é o seguinte -

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', )
            )
         ),
      );
   }
}

Por fim, o Flutter também fornece um mecanismo de detecção de gestos de baixo nível por meio do widget Listener . Ele detectará todas as interações do usuário e, em seguida, enviará os seguintes eventos -

PointerDownEvent
PointerMoveEvent
PointerUpEvent
PointerCancelEvent

Flutter também oferece um pequeno conjunto de widgets para fazer gestos específicos e avançados. Os widgets estão listados abaixo -

Dismissible - Suporta gesto de movimento para dispensar o widget.
Draggable - Suporta gesto de arrastar para mover o widget.
LongPressDraggable - Suporta gesto de arrastar para mover um widget, quando seu widget pai também pode ser arrastado.
DragTarget- Aceita qualquer widget arrastável
IgnorePointer - Oculta o widget e seus filhos do processo de detecção de gestos.
AbsorbPointer - Interrompe o próprio processo de detecção de gestos e, portanto, qualquer widget sobreposto também não pode participar do processo de detecção de gestos e, portanto, nenhum evento é gerado.
Scrollable - Suporte à rolagem do conteúdo disponível dentro do widget.

↰ Previous page Next page ↱