DEV Community

Alexandre Freire
Alexandre Freire

Posted on

Como tratar textos sublinhados no Flutter

Aprenda como tratar textos sublinhados no Flutter. Ao sublinhar tudo, você pode definir um TextStyle no widget Text.
Alt Text

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)
Enter fullscreen mode Exit fullscreen mode

Se você quiser apenas sublinhar parte do texto, precisará usar Text.rich()(ou um widget RichText) e dividir a cadeia em TextSpans para os quais você pode adicionar um estilo.
Alt Text

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 50),
    children: <TextSpan>[
      TextSpan(
          text: 'world',
          style: TextStyle(
            decoration: TextDecoration.underline,
          )),
      // can add more TextSpans here...
    ],
  ),
)
Enter fullscreen mode Exit fullscreen mode

TextSpan é um pouco estranho. O text parâmetro é o estilo padrão, mas a children lista contém o texto estilizado (e possivelmente não estilizado) que o segue. Você pode usar uma string vazia textse quiser começar com um texto estilizado.

Você também pode adicionar um TextDecorationStyle para alterar a aparência da decoração. Aqui está tracejado:
Alt Text

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)
Enter fullscreen mode Exit fullscreen mode

e TextDecorationStyle.dotted:
Alt Text
e TextDecorationStyle.double:
Alt Text
e TextDecorationStyle.wavy:
Alt Text

Fonte: https://stackoverflow.com

Top comments (0)