Medindo o tamanho do texto no Flutter

Publicado em 27/04/2023 por cacpnrj

Tempo de leitura: 3 minutes

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.

Twittar

0 Compart.