Flutter -  Usando GestureDetector

Hoje veremos como usar a classe GestureDetector para implementar gestos personalizados no Flutter.

O que é o Flutter ?

O Flutter é um SDK de aplicativo móvel do Google que ajuda a criar aplicativos móveis modernos para iOS e Android usando uma única (quase) base de código.

Se você não conhece o Flutter veja o meu artigo :  Flutter - Primeiros contatos e impressões

Gestures

Estou traduzindo Gestures como Gestos, mas, na verdade os gestos incluem a ação de tocar, pressionar, arrastar e redimencionar objetos na tela do dispositivo.

Os gestos são uma forma do usuário interagir com um aplicativo móvel (ou qualquer dispositivo baseado em toque)e são 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.

Segundo a documentação, no Flutter, o sistema de gestos possui duas camadas separadas.

  1. A primeira camada possui eventos de ponteiro não processados que descrevem a localização e o movimento dos ponteiros (toques, mouses e pontas) pela tela.
  2. A segunda camada possui gestos que descrevem ações semânticas que consistem em um ou mais movimentos do ponteiro.

Assim os Gestos representam ações semânticas (tocar, arrastar, dimensionar) que são reconhecidas a partir de vários eventos de ponteiros individuais, e potencialmente até de vários ponteiros individuais.

Para poder ouvir esses gestos a partir da camada de widgets, geralmente usamos a classe GestureDetector.

O 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 o qual irá irá capturar o gesto e despachar vários eventos com base no gesto.

Se você estiver usando componentes do Material Design , muitos desses widgets já respondem a toques ou gestos. Por exemplo, IconButton e FlatButton respondem a pressionamentos (toques) e o ListView responde ao deslize  para acionar a rolagem.

Geralmente os gestos mais usados são:

A seguir temos uma lista de gestos e os eventos correspondentes mais usados no Flutter:

Vamos então mostrar na prática como usar esse recurso.

recursos usados:

Criando Gestos personalizados

Para começar vamos aprender como podemos usar esses gestos em um aplicativo com um simples evento onTap() e determinar como o GestureDetector processa isso.

Aqui, vamos criar uma caixa usando o widget Container, e projetá-la de acordo com a especificação desejada e a seguir adicionar a função onTap() ao widget

A primeira coisa a fazer é criar um projeto Flutter chamado flut_gesture1:

No Visual Studio Code tecle CTRL+ SHIFT+P para abrir a paleta de comandos e a seguir selecione a opção : Fluter:New Project;

A seguir informe o nome do projeto : flut_anima1 e tecle ENTER;

Na janela de diálogo a seguir selecione uma pasta local onde o projeto vai ser salvo e clique em : Select a folder to create the project in;

O Flutter vai criar um projeto padrão onde todo o código da aplicação vai estar no arquivo main.dart dentro da pasta lib do projeto;
 

A seguir vamos criar uma definir o código abaixo no arquivo main.dart:

import 'package:flutter/material.dart';    
void main() => runApp(MyApp());    
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Flutter GestureDetector', theme: ThemeData(  
      primarySwatch: Colors.green,),  
      home: HomePage(),  
    );  
  }  
}  
class HomePage extends StatefulWidget {  
  @override  
  HomePageState createState() => new HomePageState();  
}    
class HomePageState extends State<HomePage> {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Gestures Exemplo'),  
        centerTitle: true,  
      ),  
      body: Center(child: GestureDetector(  
          onTap: () {  
            print('A caixa foi Clicada');  
          },  
          child: Container(  
            height: 60.0,  
            width: 120.0,  
            padding: EdgeInsets.all(10.0),  
            decoration: BoxDecoration(  
              color: Colors.cyan,  
              borderRadius: BorderRadius.circular(15.0),  
            ),  
            child: Center(child: Text('Clique Aqui')),
          )  
      )),  
    );  
  }  
}

Abaixo vemos o resultado da execução do projeto após o botão ser clicado alguma vezes:

No projeto em execução cima vemos um botão com bordas arredondadas no centro da tela. Quando você tocar na caixa, ela vai se comportar como um botão e o evento onTap() definido vai imprimir a o texto no console.

Tudo isso porque definimos o widget GestureDetector() para escutar o toque do usuário.

Pegue o código do projeto aqui: main_gesturedetector.txt

"Ai dos que ajuntam casa a casa, reúnem campo a campo, até que não haja mais lugar, e fiquem como únicos moradores no meio da terra!"
Isaías 5:8

Referências:

José Carlos Macoratti