Flutter Widgets
InkWell vs IconButton
Tudo em Flutter são Widgets. E sendo assim, um dos primeiros conceitos a serem abordados quando aprendemos desenvolvimento em Flutter são os Widgets, desde o que realmente são, como funcionam, como e quando implementar os mesmos, ou seja, o propósito de cada um.
Tenho em particular, notado que alguns widgets são ambíguos a primeira impressão e muitas vezes a implementação de um mesmo feature pode variar de desenvolvedor para desenvolvedor, por exemplo o uso de container no lugar de sizedBoxes, entre outros cenários.
Para este artigo vamos explorar um pouco de outros dois widgets que me parecem de certa forma ter algumas semelhanças, e com essa premissa em mente iremos ver como cada um funciona, quais são as aplicações recomendadas, e saber se de facto são ambíguos.
InkWell
É referenciado pela documentação como “uma área rectangular de um Widget que responde a toque”, ou seja, ele precisa ter um widget ancestral que será onde as reações do toque se farão sentir espalhando “tinta”.
Na imagem a seguir podemos ver a ilustração desta área após o toque.
- highlight — é a cor/efeito que tem ao passar o mouse pelo widget ancestral.
- splash — é a reação que o elemento sofre após o toque.
- child — o widget ao qual associamos ao InkWell.
O importante a notar aqui é que o InkWell é uma área, e não necessariamente um material — um pedaço de material, ao qual deve ser notada uma determinada elevação em contraste aos elementos que o rodeiam — , ou seja, excepto quando alguma ação ocorre ele não mostra nenhuma propriedade própria.
Por isso é importante notar que precisamos sempre ter um elemento ao qual podemos usar como meio de comunicação com o utilizador para que possa interagir e ter este feedback visual, lembrando da imagem que representa o InkWell temos lá o child para isso. No gif (jif, giph,jiph — como leste???rsrsrsr) anterior temos o Inkwell apenas a pintar sobre o canvas (AnimatedContainer), no caso o Material que ele depende.
Adicionando um child, ficaríamos com….
Mas lembrando que a pintura é sobre o parent widget (o Material ancestral).
IconButton
Mais uma vez, recorremos à documentação, que refere ao icon button como “uma imagem marcada em um Material widget que reage a toques por preenchê-la de cor(tinta)”.
Estes são geralmente usados em AppBars, como actions, mas podem ser usados em outros lugares.
O IconButton como vimos na definição e assim como o nome sugere, depende de uma imagem, um ícone, e pelos meus experimentos, aceita um texto, porém, não aconselho a usar. Pelo que, não é possível usar sem especificar o a propriedade icon (required this.icon) e também o onPressed, e podendo estar desabilitado se o retorno for nulo.
Conclusão
Como podemos notar ambos estão associados a interação com o utilizador e permitem realizar acções específicas com base em toque, porém, a forma como cada um irá reagir ao toque é diferente, o InkWell possui propriedades como onTap, onLongTap, onDoubleTap para acionar acções e por sua vez o IconButton possui apenas o onPressed . Podemos observar a partir deste diferencial que o InkWell tem a capacidade de permitir ao utilizador interagir com o aplicativo de várias formas, enquanto que o IconButton é mais específico, funcionando apenas como um botão caracterizado por uma imagem marcada aka ícone.
Podemos também notar que o principal ponto do InkWell não é a ação em si (o toque), mas sim a reactividade/interação visual do elemento com o utilizador, podemos ver isso no gif 01, enquanto que, o IconButton tem a premissa de permitir a interação com base no toque, sendo o ícone e ações necessárias.
Com estes pontos considerados, a sua aplicação e usabilidade em nossos aplicativos deve ser escolhido olhando para a necessidade do widget, por exemplo, se temos uma imagem a qual queremos dar algum protagonismo podemos recorrer ao InkWell, e podemos se calhar onDoubleTap mostrar uma mensagem, mas se o nosso intuito é simplesmente permitir ao utilizador clicar em um botão mais visual com aplicação de um ícone, o ideal seria recorrer ao IconButton.
Disclaimer: Este artigo não é um guia pragmático sobre a utilização destes widgets. A sua aplicação deve ser estudada de acordo com cada use-case. Esta é apenas uma comparação baseada em suas propriedades e apenas influenciar uma discussão acerca.
Espero que tenha aprendido com este artigo e que se tenha divertido enquanto lia.
Se tiver gostado, deixe ficar a sua reação 👏🏾. E fique a vontade para sugerir um tema que gostaria de ver.
Agradecia também que deixasse ficar o seu comentário, assim como sugestões para próximos tópicos a abordar, assim como sua curiosidade, podendo fazê-lo pela caixa de comentários 💬, ✉️ igorlsambo1999@gmail.com ou 🐦 @lsambo02.
Obrigado por acompanhar até ao fim e espero por você no próximo artigo!
