DEV Community

Wesley Oliveira
Wesley Oliveira

Posted on

Flutter - Builder Pattern - Gerando textos estilizados

Recentemente comecei a estudar um pouco de Swift/IOS para poder "sair do 0", saber como funciona as coisas nesse mundo até então desconhecido para mim.

Resolvi fazer um curso básico no site, Raywenderlich , que por sinal um excelente curso.

Logo no começo do curso achei diferente a forma como são gerados os componentes visuais, diferente das widgets do flutter lá tudo são views.

A forma como são geradas essas views lembram bastante o design pattern builder ¹, como pode ser visto abaixo.

IOS Text View

¹ Caso não tenha conhecimento sobre esse padrão sugiro assistir esse vídeo Builder Pattern.

Transformando a view acima para flutter teriamos algo semelhante a isto:

Flutter Text Widget

Como pode ser visto tem uma grande diferença na forma como são criados.

A partir desse ponto, irei focar apenas no flutter.

O Problema

Imagine uma situação onde em uma mesma linha deva ter diversos estilos textuais aplicados, por exemplo.

Texto em negrito, texto em italico, texto normal.

Flutter tem o poder de transformar isso em tarefa bem simples, aplicando apenas uma Text com alguns TextSpan isso se torna uma tarefa fácil como está na imagem abaixo.

Flutter text widget 2

E se forem mais estilos, 10, 20, claro que isso é um cenário difícil de acontecer, mas caso aconteça, o quanto esse widget iria crescer?

Solução proposta

Pensando nesse improvável panorama, lembrei da implementação do IOS e com o pattern Builder, pensei em tentar adaptar para o flutter.

Depois de algum tempo estudando, cheguei a esse pequeno esboço.

Flutter Gerador Textos Estilizados

A implementação foi feita seguindo o Builder pattern, e para utiliza-lo ficou bastante simples.

Gerador Textos Widget

Como tudo no mundo da programação, não existe uma bala de prata! Existem N cenários e cada um deve ser avaliado a melhor opção, além de que isso é apenas uma ideia de algo pode ou não ser útil para alguém, mas afim de compartilhar um aprendizado resolvi escrever esse post.

Top comments (1)

Collapse
 
aquilarafa profile image
Rafael Áquila

Massa Wesley! Ficou interessante e fácil de usar. # Cheiro de package aí viu kk Abraços.