Comment souligner du texte dans Flutter ?

Souligner tout un texte dans Flutter

Pour souligner du texte dans Flutter, vous aurez besoin d’attribuer la méthode TextStyle() à la propriété style de votre widget texte. Celle-ci vous permettra d’accéder à la propriété decoration à laquelle vous pourrez donner une valeur de TextDecoration.underline.

Text(
  "Texte d'exemple",
  style: TextStyle(
  decoration: TextDecoration.underline,
              )
            ),

Souligner une partie d’un texte dans Flutter

Si vous ne souhaitez pas souligner tout votre texte, mais seulement une partie, vous allez devoir utiliser le widget Text.rich(). Grâce à celui-ci vous allez pouvoir séparer votre texte en plusieurs parties grâce au widget TextSpan() et ainsi pouvoir souligner uniquement la partie qui vous intéresse avec la propriété decoration.

Text.rich(
 TextSpan(
  text: 'Texte ',
  style: TextStyle(fontSize: 30),
  children: <TextSpan>[
   TextSpan(
     text: "d'exemple",
     style: TextStyle(
      decoration: TextDecoration.underline,
                      )),
                ],
              ),
            )

Personnaliser le style du soulignement

Avec Flutter, vous pouvez rendre votre texte souligné plus original grâce à la propriété decorationStyle et decorationColor. Voici les options disponibles :

Ligne pointillée (TextDecorationStyle.dotted ) :

Text(
   "Texte d'exemple",
   style: TextStyle(
     decoration:
TextDecoration.underline,
     decorationStyle : TextDecorationStyle.dotted,
              )
            ),

Double ligne (TextDecorationStyle.double):

Text(
   "Texte d'exemple",
   style: TextStyle(
     decoration:
TextDecoration.underline,
     decorationStyle : TextDecorationStyle.double,
              )
            ),

Ligne ondulée (TextDecorationStyle.wavy) :

Text(
   "Texte d'exemple",
   style: TextStyle(
     decoration:
TextDecoration.underline,
     decorationStyle : TextDecorationStyle.wavy,
              )
            ),

Pensez aussi à utiliset la propriété decorationThickness pour ajuster l’épaisseur de la ligne, par exemple decorationThickness: 2.0.

Les bonnes pratiques pour souligner

Pour que votre code reste performant et lisible, voici quelques règles à suivre quand vous décorez vos textes :

Essayez de conserver un style simple : Si tout le texte est souligné de la même manière, utilisez Text plutôt que Text.rich pour de meilleures performances.
Réutilisez les styles : Définissez un TextStyle commun pour éviter de répéter le même code.
Testez sur plusieurs plateformes : Vérifiez l’apparence de votre soulignement sur Android et iOS pour garantir un rendu cohérent.
Ajoutez du contexte : Utilisez le soulignement pour mettre en avant des liens ou des mots-clés, mais évitez d’en abuser pour ne pas surcharger l’interface.

Plus de guides Flutter

À la recherche de plus de guides pour coder rapidement une application Flutter dynamique ? Pourquoi ne pas consulter la liste complète ?

Liste de guides Flutter