ClipPath

Hoje vamos falar um pouco sobre Flutter e um de seus widgets super incríveis, que é o ClipPath. Se você deseja fazer designs incríveis para seus apps, esse widget irá facilitar muito sua vida.

Primeiro, o que é o ClipPath, ele é um Clipper, que é utilizado para criar formas, e você pode obter esse resultado através de ClipOval, ClipRect, ClipRRect e o ClipPath, que é o que trataremos nesse assunto, e que você poderá criar formas como essas:

Vamos ao código então, primeiro vamos criar nosso projeto: flutter create flutter_custom_path

No caso vou instalar o getx como gerenciador de estados, mas sinta-se livre para utilizar o gerenciador que melhor te agrade.

Apesar do artigo ser focado no ClipPath, não tem como não deixar de falar sobre o CustomPainter, já que os dois tem características bem parecidas, e desempenham basicamente a mesma função, que é a de criar formas para nossos widgets. Nesse caso tem um package para criar uma bottomNavigation mais personalizada, que é o curved_navigation_bar, que você pode encontrar no pubdev, https://pub.dev/packages/curved_navigation_bar, esse package usa o CustomPainter e animações, então se quiser instalar ele ou usar a documentação para estudos, fique a vontade. E se quiser conhecer um pouco mais a fundo as diferenças entre esses 2 widgets, indico esse link https://stackoverflow.com/questions/55704331/what-is-the-difference-between-custompainter-and-customclipper.

Bom, após criar nosso app, vamos mudar nosso arquivo main.dart para iniciar nossa aplicação, como estamos utilizando o getx, ficará dessa forma:

Criaremos as seguintes telas também: NavigationPage(que conterá nossa bottomBar utilizando o package curved_navigation_bar, ou se preferir extrair o código do github para um melhor estudo. No controller da nossa Navigation criaremos nosso index, e nosso buildPages para a navegação entre telas, que serão a FirstPage, SecondPage e ThirdPage.

Pronto, nossa configuração inicial acabou, vamos agora para a parte de realmente criar as formas no Flutter.

Pra cada uma das telas vamos criar uma subpasta que se chamará widgets, e vamos criar um arquivo com o nome da pasta seguido de custom clip, você pode usar um arquivo apenas pra criar várias classes nele, ou fazer cada classe em arquivos separados, no meu caso, vou utilizar um único arquivos, faça isso para as outras telas, apenas alterando o nome das telas.

E vamos criar nosso primeiro ClipPath, nesse arquivo criado, crie uma classe, e extenda ela com extends CustomClipper<Path>, vocẽ irá notar que acusará um erro, pois ele precisa de 2 metódos, que é o getClip e o shouldReclip, apenas clique na classe para criar esses 2 métodos.

Bom, vamos ver a utilização de cada um. Primeiro extendemos o CustomClipper, que é uma interface para fornecer clipes personalizados.

Essa classe é usada por vários widgets de clipe (por exemplo, [ClipRect] e [ClipPath]).

O método [getClip] é chamado sempre que o clipe personalizado precisa ser atualizado.

O método [shouldReclip] é chamado quando uma nova instância da classe é fornecida, para verificar se a nova instância realmente representa informações diferentes.

Já a classe Path é um subconjunto complexo e unidimensional de um plano.

Um path consiste em vários subcaminhos e um ponto atual.

Os subcaminhos consistem em segmentos de vários tipos, como linhas, arcos ou beziers. Os subcaminhos podem ser abertos ou fechados e podem se auto-intersectar.

Ou seja, o CustomClip é que será utilizado para dar forma aos clipes desejados, e o Path, é que irá dizer como esses pontos são conectados a fim de desenhar.

Vamos criar então nossos primeiros desenhos, que será um triangulo e estrelas.

Nosso primeiro clippath é o triangulo, então vamos criar a classe TrianguloCustomClipPath, ela ficará dessa forma:

Criamos 2 variaveis pra controlar os pontos do quadraticBezierTo.

Se reparar bem em cada um dos paths, normalmente eles esperam 2 valores, como o moveTo, lineTo, porém o quadraticBezierTo espera 4 valores. Os códigos que estão comentados, cada um deles criam formas diferentes, estão como exemplos.

Por fim para nossa FirstPage, chamamos o widget BodyFirstPage, que é um stateless, que recebe um column e como filhos, primeiro chamamos o ClipPath, que recebe um clipper, que é nele que chamaremos nosso CustomCLipPath que criaremos, e para que ele possa aparecer, ele precisa de um filho, que será um container com height, width e color, lembrando que o height e width influenciam no formato do clip.

Para mais detalhes de como desenhar várias formas recomendo esse artigo, que mostra de forma detalhada, como os eixos das formas funcionamhttps://tech-pt.netlify.app/articles/pt509384/index.html

Vamos agora fazer as estrelas, para isso no meu arquivo first_page_custom_clip_path.dart, onde criei a classe para o triangulo,vou criar uma nova classe que será das estrelas, mas faremos um pouco diferente, criaremos um parametro pra receber o numero de pontas das estrelas,se quiser ler o artigo original é https://www.kindacode.com/article/flutter-drawing-an-n-pointed-star-with-customclipper/

Bom, agora que tivemos uma introdução, do que é o ClipPath, vamos criar novas formas agora

Na segunda tela vamos fazer uma AppBar personalizada e fazer o chapéu de palha, característica da Strawti.

Para o chapéu, vamos utilizar o site flutter shape maker https://fluttershapemaker.com/, no meu caso, como utilizo o linux, vou usar a opção web https://shapemaker.web.app/#/, ou você pode baixar para o Windows e Mac

O legal dessa ferramenta, é que você não precisa ficar testando o código no flutter, pra ver como está ficando CustomClipPath, você pode desenhar o formato que você deseja, e ele gera o código com os Paths, para você utilizar.

O código que precisamos é o que está no Custom Painter Code. Exemplo:

path0.cubicTo(size.width*0.7837500,size.height*0.3589286,size.width*0.8362500,size.height*0.8010714,size.width*0.5225000,size.height*0.8142857);

path0.quadraticBezierTo(size.width*0.1614583,size.height*0.8032143,size.width*0.0616667,size.height*0.2100000);

path0.close();

Bom, então vamos lá, com o FlutterShapeMaker, eu desenhei o chapéu, que queria, e gerei o código, vou criar agora a classe para o CustomClip e colar esse código lá dentro, ficará dessa forma:

E resultado é esse

E para nossa ultima tela, vou apresentar 2 sites bem legais também para a criação formas complexas, que é o https://app.haikei.app/, ele tem já algumas formas prontas, que você pode customizar, e você faz o download em svg, com ele, você apenas abre o arquivo no navegador e clique para inspecionar a página, é mostrado o código com os paths, apenas copie esse código e cole nesse outro site https://itchylabs.com/tools/path-to-bezier/que ele faz a conversão para você utilizar no seu código, da mesma forma que flutter shape maker gera.

E por ultimo, como somos todos fãs de One Piece, nada melhor do que desenharmos nosso personagem mais barulhento do anime, para isso usei o site do flutter shape maker, Stack e Positioned.

Para ele, vou deixar o link do github.

https://github.com/thaysg/flutter_custom_path

Espero que tenha gostado!