No ultimo artigo vimos os conceitos básicos do CustomPaint e como ele pode nos habilitar a desenhar qualquer forma geométrica no Flutter, agora vamos juntar essas formas geométricas para que possamos fazer desenhos mais complexos.
Por exemplo, se juntarmos arco com linhas podemos desenhar um relógio
Primeiramente vamos desenhar o arco do relógio
O arco vai de 0 à 2pi para formar uma circunferência completa
Agora precisamos gerar 12 linhas que irá representar as 12 horas do nosso relógio e precisamos posiciona-los no ângulo exato de cada hora, para isso pegamos o valor de 2pi e dividimos por 12 e depois multiplicamos pela hora.
Agora iremos desenhar os ponteiros do nosso relógio, para isso precisamos saber como converter horas e minutos em ângulos para isso utilizarei o https://gemini.google.com/ para me ajudar a desenvolver meu método.
E cheguei nessa função
Com a função de converssao de horas em angulo basta desenharmos duas linhas passando o sem e cos do ângulo
E para finalizar vamos colocar um circulo no centro para representar a junção dos ponteiros
E o resultado será este:
E de bônus vamos aprender a fazer aquelas mascara na câmara quando queremos enquadrada algo (como o rosto)
Primeiramente vamos instalar algum package de câmera, estou utilizando o câmera
E vamos inicializa-la em nosso widget
A construção do nosso widget será a seguinte, uma Stack onde o primeiro item de nossa Stack será a câmera e o segundo item será nosso custom paint que ficará acima da câmera.
E com isso iremos criar um Retangulo que irá cobrir nossa camera.
Agora vamos desenhar um circulo oval que será o local que iremos centralizar o rosto na câmera
O resultado será um circulo preto no meio da tela
Com o path é possível fazer algumas operações como retirar a diferença entre dois paths, com isso podemos fazer um recorte em nosso CustomPaint criando um buraco na tela.
Com o path é possível fazer algumas operações como retirar a diferença entre dois paths, com isso podemos fazer um recorte em nosso CustomPaint criando um buraco na tela.
E voilá temos, temos nossa mascara para o rosto.
Você pode acessar esses dois exemplo em meu github
https://github.com/toshiossada/clippath
Legal né? Lembrando que poderíamos ter usado este recurso com um Socket, como o Firebase para que a ativação e desativação seja de forma instantânea, caso seu negócio necessite
Confira o exemplo completo em
https://github.com/toshiossada/togglefeature
Entre em nosso discord para interagir com a comunidade: https://discord.com/invite/flutterbrasil
https://linktr.ee/flutterbrasil
Top comments (0)