128 – UI Avançada em FLUTTER – Mouse, Gestures, Ponteiros, Click, Double Click

Playlist: Curso Grátis de FLUTTER e DART Completo

UI Avançada em Flutter
Taps, Drags e gestos

O sistema de gestos no Flutter tem duas camadas separadas. A primeira camada tem eventos de ponteiro brutos, que descrevem a localização e o movimento dos ponteiros (por exemplo, toques, mouse e styli) na tela. A segunda camada possui gestos, que descrevem ações semânticas que consistem em um ou mais movimentos de ponteiro.

Ponteiros
Os ponteiros representam dados brutos sobre a interação do usuário com a tela do dispositivo. Existem quatro tipos de eventos de ponteiro:

PointerDownEvent O ponteiro entrou em contato com a tela em um determinado local.
PointerMoveEvent O ponteiro foi movido de um local na tela para outro.
PointerUpEvent O ponteiro parou de entrar em contato com a tela.
PointerCancelEvent A entrada deste ponteiro não é mais direcionada para este aplicativo.
No ponteiro para baixo, o framework faz um teste de hit em seu aplicativo para determinar qual widget existe no local em que o ponteiro entrou em contato com a tela. O evento de ponteiro para baixo (e eventos subseqüentes para esse ponteiro) são então despachados para o widget mais interno encontrado pelo teste de ocorrência. A partir daí, os eventos formam a árvore e são enviados para todos os widgets no caminho do widget mais interno para a raiz da árvore. Não há mecanismo para cancelar ou impedir que os eventos do ponteiro sejam despachados.

Para ouvir eventos de ponteiro diretamente da camada de widgets, use um widget Listener. No entanto, geralmente, considere o uso de gestos (como discutido abaixo).

Gestos
Os gestos representam ações semânticas (por exemplo, tocar, arrastar e dimensionar) que são reconhecidas a partir de vários eventos de ponteiro individuais, potencialmente até vários ponteiros individuais. Os gestos podem enviar vários eventos, correspondentes ao ciclo de vida do gesto (por exemplo, arrastar início, arrastar atualização e arrastar final):

Toque
onTapDown Um ponteiro que pode causar um toque entrou em contato com a tela em um determinado local.
onTapUp Um ponteiro que acionará um toque parou de entrar em contato com a tela em um determinado local.
onTap Ocorreu um toque.
onTapCancel O ponteiro que acionou anteriormente o onTapDown não acabará causando um toque.
Toque duplo
onDoubleTap O usuário tocou na tela no mesmo local duas vezes em rápida sucessão.
Imprensa longa
onLongPress Um ponteiro permaneceu em contato com a tela no mesmo local por um longo período de tempo.
Arrasto vertical
onVerticalDragStart Um ponteiro entrou em contato com a tela e pode começar a se mover verticalmente.
onVerticalDragUpdate Um ponteiro que está em contato com a tela e se move verticalmente moveu-se na direção vertical.
onVerticalDragEnd Um ponteiro que estava anteriormente em contato com a tela e se move verticalmente não está mais em contato com a tela e estava se movendo a uma velocidade específica quando parou de entrar em contato com a tela.
Arrasto horizontal
onHorizontalDragStart Um ponteiro entrou em contato com a tela e pode começar a se mover horizontalmente.
onHorizontalDragUpdate Um ponteiro que está em contato com a tela e se move horizontalmente moveu-se na direção horizontal.
onHorizontalDragEnd Um ponteiro que estava anteriormente em contato com a tela e se move horizontalmente não está mais em contato com a tela e estava se movendo a uma velocidade específica quando parou de entrar em contato com a tela.
Panela
onPanStart Um ponteiro entrou em contato com a tela e pode começar a se mover horizontalmente ou verticalmente. Esse retorno de chamada causa uma falha se onHorizontalDragStart ou onVerticalDragStart estiver definido.
onPanUpdateA ponteiro que está em contato com a tela e está se movendo na direção vertical ou horizontal. Esse retorno de chamada causa uma falha se onHorizontalDragUpdate ou onVerticalDragUpdate estiver definido.
onPanEnd Um ponteiro que anteriormente estava em contato com a tela não está mais em contato com a tela e está se movendo a uma velocidade específica quando parou de entrar em contato com a tela. Esse retorno de chamada causa uma falha se onHorizontalDragEnd ou onVerticalDragEnd estiver definido.
Para ouvir gestos da camada de widgets, use um GestureDetector.

Se você estiver usando Componentes de Material, muitos desses widgets já respondem a toques ou gestos. Por exemplo, IconButton e FlatButton respondem a pressionamentos (toques) e ListView responde a furtos para acionar a rolagem. Se você não estiver usando esses widgets, mas quiser o efeito “respingos de tinta” em um toque, poderá usar o InkWell.