¿Líneas amarillas debajo de los widgets de texto en Flutter?


125

Trabajando en mi primera aplicación de flutter. La pantalla principal de la aplicación no tiene este problema, todos los textos aparecen como deberían.

Sin embargo, en esta nueva pantalla que estoy desarrollando, todo el widget de texto tiene una extraña línea amarilla / doble línea debajo.

¿Alguna idea de por qué esto esta pasando?

Lineasamarillas


¿Puedes agregar tu código?
aziza

14
Sospecho que la razón es porque no tiene un Scaffold en esta página.
aziza

@aziza creo que tienes razón. Esta página no tiene andamio. Sospeché que ese podría ser el problema, pero no seguí con la verificación. ¿Alguna idea de por qué sucede esto cuando no tengo un andamio? No me di cuenta de que era necesario. ¿Debería usar un Scaffold de todos modos, aunque solo voy a usar el parámetro_body_?
dasfima

2
Cada página necesita un Scaffold, incluso si está refactorizando widgets más pequeños en clases separadas, deberían terminar con un padre Scaffold en alguna parte. No estoy seguro de si está pensado de esta manera para que el texto esté subrayado o si es un problema, independientemente, terminará necesitando construir cualquier página dentro de un Scaffold.
aziza

3
O si no lo desea Scaffold, puede rodearlo Textcon un Materialwidget
realpac

Respuestas:


154

El problema es no tener Scaffoldo no. Scaffoldes un ayudante para MaterialaplicacionesAppBar , Drawery ese tipo de cosas). Pero no estás obligado a usarlo Material.

Lo que te falta es una instancia de Themecomo padre.

¿Por qué es tan importante saberlo? Porque cuando desarrolle un Modal (usando showDialogpor ejemplo), enfrentará el mismo problema. ¡PERO Scaffold es un widget de pantalla completa opaco! Y obviamente no quieres eso en tu modal.

Hay muchas formas de introducir una instancia de Theme. En Material App, esto generalmente se logra creando una instancia de un Materialwidget. ¿Y adivina qué? Scaffoldcrea uno para ti. ¡Pero Dialogtambién!


3
También tenga en cuenta que para un héroe, se desconecta del padre mientras está 'en vuelo', por lo que agregar un Material(o cualquier tema) como hijo del héroe (AMBOS lados) lo arregla en la transición. Ver github.com/flutter/flutter/issues/30647
aaronvargas

79

Agregue un Materialwidget como elemento raíz.

@override
  Widget build(BuildContext context) {
    return Material(
        type: MaterialType.transparency,
        child: new Container(

1
rodear el texto widgetcon el Materialwidget me ayudó. Agregar material como elemento raíz no ayudó en mi caso
MMK

1
funciona con type: MaterialType.transparencyo sin ninguno.
sassman

28

Puede usar Scaffold(generalmente mejor) o cualquier otro componente que proporcione un tema material como un simple Materialwidget.

Aquí está el ejemplo, use cualquiera de ellos:

var text = Scaffold(body: Text("Hi"),);
var text2 = Material(child: Text("Hi"),);

Como solución alternativa, puede utilizar:

Text(
  'Your text',
  style: TextStyle(decoration: TextDecoration.none), // removes yellow line
)

16

El estilo de texto tiene un argumento de decoración que se puede establecer en ninguno

Text("My Text",
  style: TextStyle(
    decoration: TextDecoration.none,
  )
);

Además, como han mencionado otros, si su widget de texto está en el árbol de un widget de material o andamio, no necesitará el estilo de texto de decoración.



6

Solo agrego otra forma que encuentro a estas respuestas.

Envuelva el widget raíz alrededor de un widget DefaultTextStyle . Modificar cada widget de texto no es una necesidad aquí.

DefaultTextStyle(
    style: TextStyle(decoration: TextDecoration.none), 
    child : Your_RootWidget
)

Espero que ayude a alguien.


2

Debe agregar widgets Material y Scaffold en el archivo main.dart

 MaterialApp(
  home: Scaffold(
    body: Text('Hello world'),
  ),
);

2

Hay otra solución para esto, especialmente si está utilizando varias páginas envueltas en el archivo main.dart.Puede hacer algo como esto:

  child: MaterialApp(
    home: Material(child: Wrapper()),
  ),

Esto eliminará las líneas amarillas debajo del texto que está presente en cualquier página a la que se hace referencia / se usa en el contenedor.


1

Solo necesita agregar el widget de raíz de material.

      @override
       Widget build(BuildContext context) {
      return Material(
         child: new Container(),
        );
       }

0

2 formas están disponibles:

use scaffuld en el padre de la pantalla

Scaffold(body: Container(child:Text("My Text")))

usar material para el padre del widget

Material(child: Text("My Text"))
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.