163 votes

Comment souligner du texte dans flutter

Comment souligner du texte dans flutter inside Text widget ?

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

374voto

Suragch Points 197

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

enter image description here

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

Si vous ne voulez souligner qu'une partie du texte, vous devez utiliser la fonction Text.rich() (ou un widget RichText) et décompose la chaîne en espaces de texte auxquels vous pouvez ajouter un style.

enter image description here

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 site text est le style par défaut mais le paramètre 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. Ici, c'est en pointillés :

enter image description here

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

et TextDecorationStyle.dotted :

enter image description here

et TextDecorationStyle.double :

enter image description here

et TextDecorationStyle.wavy :

enter image description here

19 votes

Est-il possible d'ajouter un espace entre les mots et la ligne soulignée ?

0 votes

@felangga, C'est une bonne question. Ce serait probablement lié à la ligne de base. C'est quelque chose que je veux explorer davantage, mais je ne sais pas encore comment le faire. Explorez le code source et faites-moi savoir si vous trouvez la solution.

0 votes

Il y a une question en suspens pour ajouter un espace entre le texte et le soulignement. github.com/flutter/flutter/issues/30541

36voto

Tree Points 5388

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

Avec l'exemple du thème :

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

Exemple de base :

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

19voto

Joe Muller Points 2242

Une solution passionnante
Si vous voulez contrôler la distance entre le texte et le soulignement, vous pouvez utiliser cette astuce. En bref, vous masquez le texte réel à l'aide de Colors.transparent, puis vous affichez une ombre décalée qui survole le soulignement du texte.

        Text(
            "Forgot Password?",
            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,
            ),
          )

enter image description here

Comme vous le verrez ci-dessous, si vous utilisez le soulignement de texte prêt à l'emploi, il se colle au bas du texte et peut être un peu laid,

Solutions d'alésage

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

Text(
  "Forgot Password?",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationThickness: 4,
    decorationStyle: TextDecorationStyle.dashed,
   ),
)

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

enter image description here

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

Container(
     padding: EdgeInsets.only(
       bottom: 5, // Space between underline and text
     ),
     decoration: BoxDecoration(
         border: Border(bottom: BorderSide(
         color: Colors.amber, 
         width: 1.0, // Underline thickness
        ))
      ),
     child: Text(
        "Forgot Password?",
        style: TextStyle(
        color: Colors.black,
        ),
       ),
      )

enter image description here

Gardez un œil sur cette Numéro de GitHub pour une solution plus simple.

5voto

Anjali Kunder Points 11

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

Par exemple

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

3voto

Par exemple

Text(
  "Terms and Condition",
  style: TextStyle(
    decoration:
        TextDecoration.underline,
    height: 1.5,
    fontSize: 15,
    fontWeight: FontWeight.bold,
    fontFamily: 'Roboto-Regular',
  ),
),

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X