Gelbe Linien unter Text Widgets in Flutter?

122

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?

flutter

— dasfima
quelle

Können Sie Ihren Code hinzufügen?

— Aziza

14

Ich vermute, der Grund dafür ist, dass Sie auf dieser Seite kein Gerüst haben.

— Aziza

@aziza Ich denke du hast recht. Diese Seite hat kein Gerüst. Ich vermutete, dass dies das Problem sein könnte, überprüfte es jedoch nicht. Irgendwelche Ideen, warum dies passiert, wenn ich kein Gerüst habe? Ich wusste nicht, dass es erforderlich war. Sollte ich trotzdem nur ein Gerüst verwenden, obwohl ich nur den Parameter_body_ verwenden werde?

— Dasfima

2

Jede Seite benötigt ein Gerüst, auch wenn Sie kleinere Widgets in separate Klassen umgestalten, sollten sie irgendwo ein übergeordnetes Gerüst haben. Ich bin mir nicht sicher, ob der Text auf diese Weise unterstrichen werden soll oder ob es sich um ein Problem handelt, unabhängig davon, ob Sie am Ende eine Seite innerhalb eines Gerüsts erstellen müssen.

— Aziza

3

Oder wenn Sie nicht möchten Scaffold, können Sie Ihre einfach Textmit MaterialWidget

— Realpac umgeben

153

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!

— Rémi Rousselet
quelle

3

Denken Sie auch daran, dass ein Held während des Flugs nicht mit dem Elternteil verbunden ist. Wenn Sie also ein Material(oder ein beliebiges) Thema hinzufügen, während das Kind des Helden (BEIDE Seiten) es im Übergang behebt. Siehe github.com/flutter/flutter/issues/30647

— aaronvargas

79

In MaterialWidget als Root - Element.

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

— Dyvoker
quelle

1

Das Umgeben des textoder widgetmit dem MaterialWidget hat mir geholfen. Das Hinzufügen von Material als Stammelement hat in meinem Fall nicht geholfen

— MMK

1

funktioniert sowohl mit type: MaterialType.transparencyals auch ohne.

— Sassman

28

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
)

— CopsOnRoad
quelle

16

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.

— Aaron Halvorsen
quelle

10

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

— Anirudh Sharma
quelle

5

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.

— Nikhileshwar
quelle

2

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

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

— Kokemomuke
quelle

2

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.

— Abdulmanan
quelle

1

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

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

— Paras Sharma
quelle

0

2 Möglichkeiten sind verfügbar:

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

— milad jalali
quelle