Quando percebi que o Flutter me dava o controle total de todos os itens na tela (até o último pixel), minha vontade imediata foi ultrapassar os limites do universo rígido e previsível da maioria das IUs de aplicativos. Os widgets totalmente personalizados, que podiam ser desenhados com o CustomPaint, imploravam para sair do ScrollView ou Container usados normalmente. Eu queria experimentar coisas novas, ampliar as perspectivas e navegar pelo mundo que é possível criar com o Flutter. O widget Transform serviu de veículo para eu navegar neste mundo, e o GestureDetector me forneceu os controles.
Com o GestureDetector, você tem acesso fácil à maioria dos gestos. Já o Transform oferece outra visão em relação a um widget filho. Esses widgets são simples, independentes e seguem o padrão de composição do Flutter. Quando combinamos os dois, é possível explorar cada gesto.
Apesar de ser uma ferramenta eficiente, o que o Transform realmente faz é aplicar uma matriz de transformação ao widget filho. Assim, é possível movimentar, escalonar, girar e até mesmo inclinar o widget filho em relação ao pai, tudo especificado por um objeto Matrix4 simples.
Por serem compostas, as matrizes são um ótimo recurso para fazer transformações. Armazenar parâmetros de movimento, escala, rotação e distorção separados parece intuitivo, mas é comum encontrar ambiguidades em relação à ordem, por exemplo.
Imagine que o usuário executa uma série de gestos consecutivos. Se os gestos forem só uma série de arrastos, podemos facilmente armazenar a transformação final como a localização resultante “Offset”. No entanto, se o usuário arrastar o dedo, depois girá-lo no novo local e repetir essa ação várias vezes, como podemos acompanhar o estado final? Uma classe offset e dois radianos não são suficientes, nem mesmo se incluirmos um ponto focal. Teríamos que acompanhar uma lista cada vez maior de operações realizadas pelo usuário e repetir todas as ações para chegar ao estado final.
Você pode combinar uma matriz de transformação com diversas outras matrizes do mesmo tipo indefinidamente, e o resultado será sempre uma matriz única do mesmo tamanho. A GPU faz esse tipo de matemática com muita rapidez, mesmo massivamente e em paralelo, para todos os pixels da tela. Isso é um ótimo recurso para armazenar o estado de um widget como o Transform, e o resultado é um widget simplificado para os desenvolvedores do Flutter.
Se vincularmos alguns gestos do usuário à atualização da matriz de transformação usando um GestureDetector, o usuário poderá navegar livremente na cena que exibimos a ele. O GestureDetector oferece acesso fácil a ações como a de arrastar os dedos, que podem ser usadas para movimentar, fazer gesto de pinça, aumentar e reduzir o zoom e até mesmo fazer uma rotação de dois dedos.
Com o GestureDetector, você pode usar callbacks diferentes para vários gestos e os estados de início, atualização e final deles. No entanto, se você estiver implementando algo como uma demonstração ilustrada com várias combinações de callbacks, os de escala são exatamente o que você precisa. O callback onScaleUpdate fornece um focalPoint com escalas horizontal, vertical e rotação, tudo em um só recurso. Isso permite que você responda a vários gestos ao mesmo tempo, como se o usuário fizesse uma rotação e um dimensionando com uma só ação. Veja ScaleUpdateDetails para saber tudo o que é fornecido no callback onScaleUpdate.
A inércia é outro aspecto frequentemente implementado em transformações físicas como essas. Ao concluir a execução de um gesto, o usuário talvez tenha que esperar a transformação seguir por algum tempo até que ela seja interrompida lentamente. O Flutter fornece um parâmetro de velocidade nos callbacks finais de todos esses gestos, incluindo os de escala. Como você pode imaginar em um movimento baseado em física, esse valor será maior se o usuário mover o dedo rapidamente e menor se ele fizer um gesto lento.
Você pode criar esse efeito de inércia com outro ótimo recurso de infraestrutura do Flutter, a animação Tween. Usando as informações de velocidade e posição após a conclusão de um gesto, além de um conhecimento básico de física, você pode fornecer uma posição final e a duração da ação ao Tween. Depois, é só deixar que a ferramenta faça o resto. O Flutter inclui até mesmo uma classe de simulação de atrito para lidar com alguns desses cálculos e fazer tudo parecer muito mais real.
Combinar o uso do Transform e do GestureDetector é uma ferramenta incrivelmente poderosa. Você pode fazer de tudo: de movimentos em um tabuleiro de jogo (como mostrado nas capturas de tela) até navegar em um mapa, exibir um visualizador interativo de imagens e muito mais.
O aplicativo exibido aqui está disponível como uma demonstração no Flutter Gallery. Todo o código faz parte do principal repositório de código aberto do Flutter e pode ser encontrado na fonte de demonstração da transformação. Você pode encontrar a maior parte da lógica de transformação na classe GestureTransformable, incluindo a animação de inércia.
You can look here https://paperovernight.com/blog/reaction-paper for the best case scenario!
Postar um comentário
Um comentário :
You can look here https://paperovernight.com/blog/reaction-paper for the best case scenario!
Postar um comentário