Flutter — Desenhando com LineTo e QuadraticBezierTo
Levei uma semana para consegui entender esse método. Como não achava conteúdo em português, então decidi fazer um tentando explicar da forma mais fácil e simples, usando gráfico para fixar melhor o entendimento, consigo entender melhor assim.
Foco do post é no método QuadraticBezierTo mas também falo sobre o lineTo, irei explicar cada passo para chegar ao resultado esperado, vou ser um pouco detalhista.
O objetivo do método QuadraticBezierTo é simplesmente fazer um curva com as posições declarada de X1 e Y1, X2 e Y2, vamos chamar de endPoint (Ponto final) os pontos da reta e controlPoint (Ponto de controle) que faz a reta se curvar. Irei explicar mais a frente cada posição. Para entender melhor essas posições vou começar primeiro com o método lineTo.
No método lineTo é usado dois parâmetro X e Y para traçar uma reta, ligando os pontos de X até Y, e assim formando um um desenho com as retas.
De onde começa a posição X, Y e como sei o valor final?
A posição X começa da esquerda para direita, então na esquerda o valor é igual a 0, na classe Paint tem um método chamado getClip que pega os valores do tamanho da tela do dispositivo, declaramos dentro dele a classe Size e a variável que irá receber esse valor, normalmente é declarado size mas você pode declarar outro nome para pegar o tamanho da tela do dispositivo. Usamos o nome declarado que receber o valor, mais o ponto e a posição que queremos, na implementação fica size.widgth (Largura) que é o valor máximo de X.
Na posição de Y é a mesma forma, mas o valor máximo é chamado de heigth (Altura), na implementação fica size.widgth (Largura). No gráfico abaixo mostra o inicio de X e Y, para um melhor entendimento.
O gráfico abaixo mostra como flutter irá desenhar no widget container, com os valores de X e Y declarados em duas retas (Vermelhas). A reta (Preta) de X até Y é traçada pelo flutter, quando realizado os calculados das posições dos pontos declarados.
Para formar uma gráfico assim com lineTo, tem que declarar as retas, como podem ver existe duas retas vermelhas no gráfico, essas retas que são declaradas no método. A primeira reta será da posição 0 de Y até a posição máxima de X (X = size.widgth, Y = 0), e a segunda será da posição 0 de X até a posição máxima de Y (X = 0, Y = size.heigth).
Estou supondo que você já saiba o que é widget e saiba implementá-los, abaixo está o código para implementar.
Criei um arquivo main.dart
importei a classe BezierWidget() do arquivo widget_bezier.dart onde criei o widget container
Criei o arquivo widget_bezier.dart e a classe BezierWidget e os widget e defini o tamanho (size.height/2.7) do conteiner que faço a alteração com o CustomClipper. Coloquei o conteiner como child (filho) do ClipPath e chamei a classe ClipHome que criei no clipper. Com essas retas declaradas vamos usar o método QuadraticBezierTo a partir desse desenho e vamos fazer uma curva nele.
Primeiro vamos entender como funciona o método QuadraticBezierTo.
O método recebe quatro parâmetros, os dois primeiros X1 e Y1 são a posição do ponto de controle, esse ponto de controle é como se fosse um “imã” que puxa a reta para posição dele curvando-a. Os dois último X2 e Y2, como deve imaginar é a posição dos pontos da reta. No exemplo abaixo está o ponto de controle entre X e Y.
E com esse ponto de controle declarado fiz um calculo até chegar ao resultado desejado no final o valor foi esse X = ((size.width/2)/2) e Y = ((size.heigth/2)/2). Já nos valores da reta declarei o valor de X= size.width e Y = 0.
Segue abaixo o código da implementação.
Observação importante os primeiros endPoint (X =0, Y = size.height) já foram declarados com o método lineTo.
Usei a classe Offset para armazenar os valores das posições na variável, separando os endPoints e controlPoints, dando melhor visibilidade de cada ponto.
Beleza Fernando mas posso declarar mais de um ponto de controle? Claro que pode, vou fazer mais um exemplo com dois pontos de controle, lembre-se nem sempre vai ser de primeira o resultado esperado e as vezes vai precisar de vários pontos de controle pra chegar a um bom resultado. Normalmente declaro os valores que serão mais próximo e com isso faço ajuste nos cálculos pra ficar exatamente com à forma de referência que quero. Abaixo segue o exemplo do gráfico do desenho.
O primeiro passo foi descobrir onde coloco os pontos de controle, então olhei as curvas da reta, e vi que na metade da posição X e Y é curvada pra baixo e da outra metade é curvada pra cima. Então coloquei o ponto final (endPoint) na metade de X (X = size.width/2) e Y ( Y= size.heigth/2), lembrando que os pontos da reta já foram declarados com lineTo só estou colocando pontos em cima dela. Já o primeiro ponto de controle dividi X por 4 (X = size.width/4) para um resultado satisfatório, e Y por 2 ( Y= size.heigth/2).
Já o segundo ponto final (endPoint) da na reta coloquei no final de X e Y na posição 0 (X = size.width, Y = 0) para manter a reta dividida no meio da tela e só curvando com o ponto de controle. O segundo ponto de controle coloquei na posição final de X e Y dividi por 2 (X = size.width, Y=size.heigth/2)
No exemplo abaixo mostra os pontos de controles (imã) de preto e os pontos finais de vermelho.
Código da implementação abaixo.
Caso queria fazer um desenho mais complexo vai ter que usar vários pontos pra conseguir um bom resultado.
Bom é isso por hoje espero ter ajudado, compartilhe se achou útil.
Algumas da minhas rede sociais abaixo.
Telegram: @Fernandolook1
