Comment souligner du texte en flutter

Question

Comment souligner du texte flottant dans le widget Text?

Je n'arrive pas à trouver le soulignement à l'intérieur de la propriété fontStyle de TextStyle

Answer 1

Lorsque vous soulignez tout, vous pouvez définir un TextStyle sur le widget Texte.

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

Si vous souhaitez uniquement souligner une partie du texte, vous devez utiliser Text.rich() (ou un widget RichText) et scinder la chaîne en TextSpans auquel vous pouvez ajouter un style.

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

TextSpan est un peu étrange. Le paramètre text est le style par défaut, mais la liste children contient le texte stylé (et éventuellement non stylé) qui le suit. Vous pouvez utiliser une chaîne vide pour text si vous souhaitez commencer par du texte stylé.

Vous pouvez également ajouter un TextDecorationStyle pour modifier l'apparence de la décoration. Ici est en pointillé:

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

et TextDecorationStyle.dotted:

et TextDecorationStyle.double:

et TextDecorationStyle.wavy:

Answer 2

Vous le faites en appliquant decoration: TextDecoration.underline à TextStyle d'un Text.

Avec exemple de thème:

          Text(
            "text",
            style: Theme
                .of(context)
                .accentTextTheme
                .subhead
                .copyWith(decoration: TextDecoration.underline),
          )

Exemple de base:

          Text(
            "text",
            style: TextStyle(decoration: TextDecoration.underline),
          )