Arrastar e soltar existe desde que a maioria de nós começou a usar computadores. Usamos o recurso arrastar e soltar no aplicativo do Gmail para mover endereços entre os campos Para e CC. A maioria dos serviços de hospedagem de imagens fornece um recurso semelhante para fazer upload de imagens. Alguns aplicativos de entrega de refeições permitem que você personalize seu pedido usando o recurso arrastar e soltar. E assim por diante.
Em termos simples, uma interação de arrastar e soltar ocorre quando o usuário seleciona um item, arrasta-o para outro ponto da tela e, em seguida, o libera. Ele foi projetado para imitar a maneira como pegamos e movemos coisas no mundo real.
Neste tutorial, vamos demonstrar como construir interações de arrastar e soltar em um aplicativo Flutter usando Draggable, DragTarget, e LongPressDraggable. Também veremos alguns exemplos práticos para mostrar como esses widgets funcionam juntos para produzir experiências atraentes de arrastar e soltar para seus usuários.
Cobriremos o seguinte em detalhes:
Usando o widget Draggable Soltando um item no DragTarget widget Tornando os elementos da IU arrastáveis ao pressionar longamente com LongPressDraggable Exemplo de flutter drag-and-drop: Construindo um quebra-cabeça
Se você é um aprendiz visual, veja isto rápido tutorial em vídeo:
Usando o widget arrastável
Draggable é um widget Flutter que você pode arrastar ou mover. Assim que o usuário clicar e começar a arrastar o widget arrastável, um novo widget de feedback aparecerá e seguirá o dedo do usuário ou o ponteiro do mouse. Quando o usuário levanta o dedo ou o ponteiro do mouse, o widget de feedback desaparece.
Vamos ver como criar um widget arrastável. O produto final ficará assim:
Fonte da imagem: https://www.vecteezy.com/
Aqui está o código para fazê-lo funcionar:
Scaffold (body: Container (child: Center (child: Column (mainAxisAlignment: MainAxisAlignment.center, children: [Draggable
Vamos mergulhar de cabeça aprofundar no código.
filho: Envolva seu widget dentro do widget Draggable e coloque-o no parâmetro filho. Aqui temos o Container com os dados da imagem do tomate: Cada Draggable deve conter alguns dados. Esses dados serão usados pelo DragTarget (como veremos mais tarde). No código acima, estamos fornecendo os dados da string como feedback em vermelho: você pode escrever qualquer widget aqui que gostaria que aparecesse abaixo do dedo ou do ponteiro do mouse do usuário Para uma melhor experiência do usuário, você deve manter o mesmo widget de uma criança. Isso dá ao usuário a sensação de realmente arrastar o item. Você pode alterar o tamanho ou a forma deste widget um pouco para aprimorar a experiência de arrastar, como este:
Veja como o código é traduzido no design:
Substituindo a imagem ao arrastar
Neste ponto, podemos arrastar a imagem. Mas se você notar, verá que quando a imagem está sendo arrastada, a imagem real permanece como está. Os usuários podem ficar confusos se não mudarmos ou removermos.
Vamos mudar a imagem:
Draggable
Adicionar um widget à propriedade childWhenDragging resolverá o problema. No código acima, estamos mostrando a imagem do tomate com um fundo cinza. Tem a seguinte aparência:
Você também pode remover completamente a imagem escrevendo o contêiner vazio, que se parece com isto:
childWhenDragging: Container (),
Arrastando em um direção única
Você pode querer arrastar o item em uma direção fixa, vertical ou horizontalmente. Definir o parâmetro do eixo permitirá que o item seja arrastado no eixo de sua escolha.
eixo: Axis.vertical
O código acima resultará na seguinte saída:
Ouvindo para arrastar eventos
O widget Draggable permite que você ouça eventos de arrastar. Você pode usar esses eventos para acionar alguma ação, como remover o próprio item ou notificar o usuário.
Abaixo estão os eventos que você pode ouvir.
onDragStarted: Você receberá um retorno de chamada assim que quando o usuário começa a mover o item onDragEnd: Isso é chamado imediatamente quando o item é solto em qualquer lugar da tela. Ele fornece os detalhes adicionais para o item se ele foi solto com sucesso na área de soltar ou não. onDraggableCanceled: é chamado quando o item não é solto com sucesso ou o usuário levanta o dedo ou o ponteiro do mouse onDragCompleted: você receberá um retorno de chamada quando o item for solto com sucesso na região de soltar
Veja como adicionar onDragStarted:
onDragStarted: () {showSnackBarGlobal (contexto,’Arrastar iniciado’); },
Soltar um item no widget DragTarget
Arrastar um item é legal, mas não adianta se não pudermos soltá-lo em algum lugar. Vamos tentar soltar nosso item no widget DragTarget .
DragTarget recebe o widget Draggable; mais especificamente, ele pega os dados que são transportados pelo widget Draggable. DragTarget tem métodos para decidir se aceita o widget Draggable com base nos dados.
Vamos projetar um widget Draggable que se pareça com este:
Fonte da imagem: https://www.vecteezy.com/
Veja como fazer:
Scaffold (body: Container (child: Center (child: Column (mainAxisAlignment: MainAxisAlignment). center, children: [Draggable
Simplesmente envolva seu widget dentro do DragTarget. Aqui, estamos mostrando uma imagem de tigela como o destino de arrasto para a imagem do tomate.
Soltando um item
Neste ponto, ainda não podemos soltar o item no DragTarget. Então, vamos ver como podemos permitir que o item seja solto:
DragTarget
Adicione dois métodos chamados onWillAccept e onAccept.
onWillAccept é chamado sempre que o item é solto sobre DragTarget. Podemos usar este método para recuperar os dados transportados pelo widget Draggable e decidir se aceitamos o item ou não. No código acima, aceitamos a imagem do tomate se ela carrega essa string como vermelho onAccept é um retorno de chamada que devemos receber assim que o item for aceito pelo DragTarget. Estamos mostrando a mensagem de sucesso e atualizando a variável _isDropped. _isDropped é usado para mudar a imagem da tigela para mostrar o tomate dentro da imagem da tigela
Veja como fica agora:
Se você deseja notificar o usuário quando o item é deixado sem cair em uma área para soltar, basta adicionar mais um método chamado onLeave:
onLeave: (data) {showSnackBarGlobal (context,’Missed’); },
Tornando os elementos da IU arrastáveis ao pressionar longamente com LongPressDraggable
LongPressDraggable é outro widget arrastável. A única diferença entre LongPressDraggable e Draggable é que LongPressDraggable permite que você arraste o item ao pressionar longamente sobre ele enquanto Draggable pode ser arrastado instantaneamente.
LongPressDraggable é útil quando o item que você deseja arrastar está dentro de um Lista. Por exemplo, você deve usar LongPressDraggable em vez de Draggable quando quiser mover uma foto da galeria para outro lugar, como:
Fonte da imagem: https://www.vecteezy.com/
Como você pode ver no GIF acima, o item em forma de quadrado vermelho está pronto para ser arrastado, mas apenas se o usuário pressionar longamente sobre ele.
Aqui está o código:
Scaffold (body: Container (child: Center (child: Column (mainAxisAlignment: MainAxisAlignment.center, children: [LongPressDraggable
A maior parte do código é o mesmo que discutimos anteriormente; basta substituir o widget Draggable por LongPressDraggable.
Exemplo de arrastar e soltar Flutter: Construindo um quebra-cabeça
Agora que você sabe como implementar uma interação de arrastar e soltar no Flutter , você deve ser capaz de construir qualquer coisa por conta própria. Para testar nossas habilidades, vamos tentar construir um quebra-cabeça muito básico.
Aqui está o que construiremos:
Fonte da imagem: https://www.vecteezy.com/
Primeiro, force o aplicativo a abrir apenas no modo paisagem:
void main () {WidgetsFlutterBinding.ensureInitialized (); SystemChrome.setPreferredOrientations ([DeviceOrientation.landscapeRight, DeviceOrientation.landscapeLeft]). Then ((_)=> runApp (MyApp ()),); }
A seguir, defina a variável que mantém o status das peças do quebra-cabeça (se foram colocadas com sucesso ou não):
bool _isBlueDropped=false; bool _isRedDropped=false; bool _isYelloDropped=false; bool _isGreenDropped=false; String _blue=’azul’; String _red=’vermelho’; String _yellow=’amarelo’; String _green=’verde’;
Crie a pilha de quatro widgets DragTarget. Organize-o com a ajuda do widget Posição de modo que pareça um quebra-cabeça 2 × 2:
Stack (children: [Positioned (top: 0, left: 0, child: DragTarget
Agora crie uma lista de peças do quebra-cabeça. Cada peça do quebra-cabeça é um widget Draggable.
SingleChildScrollView (child: Column (children: [Visibility (visible:! _IsRedDropped, child: Draggable
A peça do quebra-cabeça na lista é ocultada assim que é colocada corretamente. A visibilidade é gerenciada usando as variáveis que definimos anteriormente.
É isso! O código-fonte completo está disponível em GitHub .
Conclusão
Neste tutorial, aprendemos como construir uma interação de arrastar e soltar no Flutter. Aprendemos como usar vários widgets como Draggable, DragTarget e LongPressDraggable com exemplos práticos. Finalmente, demonstramos como desenvolver um quebra-cabeça simples usando os widgets e as habilidades descritas neste tutorial.
