Cómo subrayar texto en Flutter


106

¿Cómo subrayar el texto en Flutter dentro del Textwidget?

Parece que no puedo encontrar el subrayado dentro de la fontStylepropiedad deTextStyle

Respuestas:


235

Al subrayar todo, puede establecer un TextStyle en el widget de texto.

ingrese la descripción de la imagen aquí

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

Si solo desea subrayar parte del texto, entonces debe usar Text.rich()(o un widget RichText) y dividir la cadena en TextSpans a los que puede agregar un estilo.

ingrese la descripción de la imagen aquí

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 es un poco extraño. El textparámetro es el estilo predeterminado, pero la childrenlista contiene el texto con estilo (y posiblemente sin estilo) que lo sigue. Puede usar una cadena vacía textsi desea comenzar con texto con estilo.

También puede agregar un TextDecorationStyle para cambiar el aspecto de la decoración. Aquí está punteado:

ingrese la descripción de la imagen aquí

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

y TextDecorationStyle.dotted:

ingrese la descripción de la imagen aquí

y TextDecorationStyle.double:

ingrese la descripción de la imagen aquí

y TextDecorationStyle.wavy:

ingrese la descripción de la imagen aquí


9
¿Es posible agregar espacio entre las palabras y el subrayado?
felangga

@felangga, esa es una buena pregunta. Probablemente estaría relacionado con la línea de base. Eso es algo que quiero explorar más, pero aún no sé cómo hacerlo. Explore el código fuente y avíseme si lo averigua.
Suragch

32

Lo haces aplicando decoration: TextDecoration.underlinea TextStylede a Text.

Con ejemplo de tema:

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

Ejemplo básico:

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

3

Puede utilizar TextDecoration con estilo para subrayar un texto determinado.

Por ejemplo

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

2

por ejemplo

Text(
  "Terms and Condition",
  style: TextStyle(
    decoration:
        TextDecoration.underline,
    height: 1.5,
    fontSize: 15,
    fontWeight: FontWeight.bold,
    fontFamily: 'Roboto-Regular',
  ),
),
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.