Medindo o tamanho do texto no Flutter
Se você é um desenvolvedor flutter, deve ter precisado calcular o tamanho do widget Texto antes de ser renderizado.
Se não tiver, tudo bem! Mas presumo cuidadosamente que você o tinha, mas não reconheceu que o problema pode ser resolvido medindo o tamanho do texto.
Vamos começar!
Tudo o que você precisa saber para medir o tamanho do widget Text são TextSpan e a classe TextPainter.
Primeiro, crie uma instância de TextSpan:
final textSpan = TextSpan(text: 'Quero saber o meu tamanho');
Em seguida, crie um TextPainter e passe um TextSpan recém-criado como argumento.
Nota: Você deve passar o textDirection e maxLines. Caso contrário, você encontrará erro após camada que fará alguns depois.
final textPainter = TextPainter( text: textSpan, textDirection: TextDirection.ltr, maxLines: 1, )
A preparação está feita! A última etapa é o layout e obter o tamanho dele.
TextPainter.layout(); final size = textPainter.size;
Fácil certo? Você obterá o seguinte resultado se me seguir corretamente.
Text Size: Size(83.0, 16.0)
Manipulação de erros
E se eu obtiver o tamanho sem executar o layout()?
Esse é um erro muito comum que você encontrará ao fazer isso.
Se você esquecer de chamar layout() , encontrará a seguinte mensagem de erro:
Text layout not available The TextPainter has never been laid out.
Mas não se preocupe! você nunca conseguirá isso se seguir minhas instruções completamente.
E se eu esquecer de passar o textDirection
para o TextPainter
?
- O framework irá reclamar sobre isso:
TextPainter.textDirection deve ser definido como um valor não nulo antes de usar o TextPainter.
Que tal maxLines?
- Esta é a parte mais complicada quando você é iniciante. Ele não será capturado pela estrutura, mas você poderá encontrar o tamanho errado, especialmente quando tiver texto de várias linhas.
Se você seguiu corretamente, você tem a seguinte:
final span = TextSpan( text: text, ); final textPainter = TextPainter( text: span, maxLines: 1, textDirection: TextDirection.ltr, ); textPainter.layout(); final size = textPainter.size;
Mas isso só poderia medir o texto de uma linha. Mas presumo fortemente que você não está lendo isso por causa desse tipo de caso simples.
Existem alguns fatores que variam o tamanho do widget Texto.
- TextStyle
- Contagem de linhas
- Intervalo da largura em que o texto será disposto
Com base nesses fatores, podemos atualizar o código para:
final style = TextStyle( fontSize: 22, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold, fontFeatures: const [FontFeature.tabularFigures()], height: 1.2, ); const maxLine = 4; const maxWidth = 100.0; final span = TextSpan( text: text, style: style, ); final textPainter = TextPainter( text: span, maxLines: maxLines, textDirection: TextDirection.ltr, ); textPainter.layout(maxWidth: maxWidth); final size = textPainter.size; Text( text, style: style, maxLines: maxLines, );
Por favor, lembre-se que você tem que
- Sincronizar o
TextStyle
com o TextSpan e o Text. - Sincronize os
maxLines
com o TextPainter e o Text.
Caso contrário, o tamanho é diferente do real.
Feito! se você seguiu corretamente, você pode obter a seguinte tela:
BTW, você sabia que o widget Text é o widget sem estado personalizado (composto)?
O snippet a seguir é a parte principal do widget Texto:
RichText( ... text: TextSpan( text: data, ... ), );
Portanto, não há problema em alterar o código que fizemos para:
Text.rich( span, style: style, maxLines: maxLines, );
Eventualmente, isso resultará no mesmo resultado e, além disso, pode evitar o erro se você passar o argumento de text
diferente para o widget Text
e o TextSpan
.
É isso!
Acabamos de medir o tamanho do widget Texto antes de ser renderizado.