Cómo subrayar texto en flutter

¿ Cómo subrayar texto en aleteo dentro Textdel widget?

Parece que no puedo encontrar el subrayado dentro fontStylede la propiedad deTextStyle

May 31 '18 06:05 Tree

Al subrayar todo, puede configurar 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 necesita 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 le sigue. Puede utilizar una cadena vacía textsi desea comenzar con texto con estilo.

También puedes 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í

Jan 18 '2019 01:01 Suragch

Solución interesante
Si desea tener control sobre la distancia entre el texto y el subrayado, puede utilizar este truco. En resumen, oculta el texto real usando Colors.transparent y luego muestra una sombra desplazada que se sitúa sobre el subrayado del texto.

        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,
            ),
          )

ingrese la descripción de la imagen aquí

Como verá a continuación, si utiliza el subrayado de texto listo para usar, se adhiere a la parte inferior del texto y puede verse un poco feo.

Soluciones aburridas

Usando solo el widget de Texto , puedes agregar el subrayado con un estilo y color personalizados:

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

El único problema que tengo con este enfoque es que no tienes control sobre qué tan cerca está el subrayado del final del texto.

ingrese la descripción de la imagen aquí

Si desea aumentar el espacio, tendrá que utilizar un enfoque poco convencional que utilice Container y su propiedad de relleno.

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,
        ),
       ),
      )

ingrese la descripción de la imagen aquí

Esté atento a este problema de GitHub para encontrar una solución más sencilla.

Nov 14 '2020 21:11 Code on the Rocks

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),
          )

May 30 '2018 23:05 Tree

A continuación se muestra un código simple.

Text(
  'Welcome to Flutter',
  style: TextStyle(decoration:TextDecoration.underline,),
),

ingrese la descripción de la imagen aquí

Puedes usarlo decorationStylepara personalizarlo.

Text(
  'Welcome to Flutter',
  style: TextStyle(
  fontSize: 24,
  decoration: TextDecoration.underline,
  decorationStyle: TextDecorationStyle.double,
  ),
),

Aquí hay otros TextDecorationStylevalores:

TextDecorationStyle.discontinuo
TextDecorationStyle.punteado
TextDecorationStyle.doble
TextDecorationStyle.ondulado

Apr 14 '2022 06:04 Fakhriddin Abdullaev