Gelbe Linien unter Text Widgets in Flutter?

Ich arbeite an meiner ersten Flatter-App. Der Hauptbildschirm der App weist dieses Problem nicht auf. Alle Texte werden so angezeigt, wie sie sollten.

In diesem neuen Bildschirm, den ich entwickle, haben alle Text-Widgets eine seltsame gelbe Linie / doppelte Linie darunter.

Irgendwelche Ideen, warum dies geschieht?

Das Problem ist nicht a Scaffold oder nicht. Scaffoldfür einen Helfer - MaterialAnwendungen ( AppBar, Drawer, dass solche Sachen). Aber du bist nicht gezwungen zu benutzen Material.

Was Sie vermissen, ist eine Instanz Themeals Elternteil.

Warum ist das wichtig zu wissen? Denn wenn Sie ein Modal entwickeln ( showDialogzum Beispiel mit), werden Sie das gleiche Problem haben. ABER Scaffold ist ein undurchsichtiges Vollbild-Widget! Und das willst du natürlich nicht in deinem Modal.

Es gibt viele Möglichkeiten, eine Theme-Instanz einzuführen. In der Material-App wird dies normalerweise durch Instanziieren eines MaterialWidgets erreicht. Und rate was? Scaffolderstellt eine für Sie. Aber Dialogauch!

In MaterialWidget als Root - Element.

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

Sie können entweder Scaffold(im Allgemeinen besser) oder eine andere Komponente verwenden, die ein Materialthema wie ein einfaches bereitstelltMaterial Widget .

Hier ist das Beispiel, verwenden Sie eines von ihnen:

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

Als Problemumgehung können Sie Folgendes verwenden:

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

Der Textstil verfügt über ein Dekorationsargument, das auf "Keine" gesetzt werden kann

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

Wie bereits erwähnt, benötigen Sie den Textstil für die Dekoration nicht, wenn sich Ihr Text-Widget im Baum eines Gerüst- oder Material-Widgets befindet.

Sie können auch Dekoration verwenden: TextDecoration.none, um Unterstreichungen zu entfernen

Ich füge diesen Antworten nur einen anderen Weg hinzu.

Wickeln Sie das Root-Widget um ein DefaultTextStyle- Widget. Das Ändern jedes Text-Widgets ist hier nicht erforderlich.

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

Hoffe es hilft jemandem.

Sie sollten Material- und Gerüst-Widgets in der Datei main.dart hinzufügen

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

Hierfür gibt es eine andere Lösung, insbesondere wenn Sie mehrere Seiten verwenden, die unter der Datei main.dart verpackt sind. Sie können Folgendes tun:

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

Dadurch werden die gelben Linien unter dem Text entfernt, die auf allen Seiten vorhanden sind, auf die unter dem Wrapper verwiesen wird.

Sie müssen nur das Materialstamm-Widget hinzufügen.

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

2 Möglichkeiten sind verfügbar:

Verwenden Sie Scaffuld im übergeordneten Bildschirm. Verwenden Sie Material für das übergeordnete Element des Widgets