Comment souligner du texte en flutter

Question

Comment souligner du texte dans flutter à l'intérieur du widget Text ?

Je ne semble pas trouver de 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 Text.

Text(
  'Bonjour le monde',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

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

Text.rich(
  TextSpan(
    text: 'Bonjour ',
    style: TextStyle(fontSize: 50),
    children: [
      TextSpan(
          text: 'le monde',
          style: TextStyle(
            decoration: TextDecoration.underline,
          )),
      // vous pouvez ajouter plus de TextSpans ici...
    ],
  ),
)

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 voulez commencer avec du texte stylé.

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

Text(
  'Bonjour le monde',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

et TextDecorationStyle.dotted:

et TextDecorationStyle.double:

et TextDecorationStyle.wavy:

Answer 2

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

Avec l'exemple de Thème :

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

Exemple basique :

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

Answer 3

Solution excitante
Si vous souhaitez avoir le contrôle sur la distance entre le texte et le soulignement, vous pouvez utiliser cette astuce. En bref, vous masquez le texte réel en utilisant Colors.transparent puis affichez une ombre décalée qui plane au-dessus du soulignement du texte.

        Text(
            "Mot de passe oublié?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.black,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

Comme vous le verrez ci-dessous, si vous utilisez le soulignement de texte standard, il reste collé au bas du texte et peut sembler un peu laid,

Solutions ennuyeuses

En utilisant simplement le widget Text, vous pouvez ajouter le soulignement avec un style et une couleur personnalisés :

Text(
  "Mot de passe oublié?",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationThickness: 4,
    decorationStyle: TextDecorationStyle.dashed,
   ),
)

Le seul problème que je vois avec cette approche est que vous n'avez aucun contrôle sur la proximité du soulignement par rapport au bas du texte.

Si vous souhaitez augmenter l'espacement, vous devrez utiliser une approche non conventionnelle qui utilise Container et sa propriété de remplissage.

Container(
     padding: EdgeInsets.only(
       bottom: 5, // Espace entre le soulignement et le texte
     ),
     decoration: BoxDecoration(
         border: Border(bottom: BorderSide(
         color: Colors.amber, 
         width: 1.0, // Épaisseur du soulignement
        ))
      ),
     child: Text(
        "Mot de passe oublié?",
        style: TextStyle(
        color: Colors.black,
        ),
       ),
      )

Gardez un œil sur ce problème GitHub pour une solution plus simple.

Answer 4

Vous pouvez utiliser TextDecoration dans le style pour souligner un texte donné.

Par exemple

Text(
    "Votre texte ici",
    style: TextStyle(
        decoration: TextDecoration.underline),
    )
)

Answer 5

Par exemple

Texte(
  "Termes et Conditions",
  style: TextStyle(
    decoration:
        TextDecoration.underline,
    height: 1.5,
    fontSize: 15,
    fontWeight: FontWeight.bold,
    fontFamily: 'Roboto-Regular',
  ),
),