Żółte linie pod widżetami tekstowymi we Flutter?

Pracuję nad moją pierwszą aplikacją Flutter. Główny ekran aplikacji nie ma tego problemu, wszystkie teksty są wyświetlane tak, jak powinny.

Jednak na tym nowym ekranie, który tworzę, cały widżet tekstowy ma pod spodem dziwną żółtą linię / podwójną linię.

Jakieś pomysły, dlaczego tak się dzieje?

Problem polega na tym, że nie masz Scaffoldlub nie. ScaffoldJest pomocnikiem dla Materialaplikacji ( AppBar, Drawer, tego typu rzeczy). Ale nie jesteś zmuszony do używania Material.

Brakuje Ci przykładu Themejako rodzica.

Dlaczego warto to wiedzieć? Ponieważ kiedy opracujesz Modal (używając showDialogna przykład), napotkasz ten sam problem. ALE Scaffold to nieprzezroczysty widżet pełnoekranowy! I oczywiście nie chcesz tego w swoim Modalu.

Istnieje wiele sposobów wprowadzenia instancji Theme. W aplikacji Material jest to zwykle osiągane przez utworzenie wystąpienia MaterialWidżetu. I zgadnij co? Scaffoldtworzy go dla Ciebie. Ale Dialogteż!

Dodaj Materialwidżet jako element główny.

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

Możesz użyć Scaffold(ogólnie lepiej) lub dowolnego innego komponentu, który zapewnia materiałowy motyw, taki jak prosty Materialwidget.

Oto przykład, użyj dowolnego z nich:

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

Aby obejść ten problem, możesz użyć:

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

Styl tekstu ma argument dekoracji, który może być ustawiony na brak

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

Ponadto, jak wspominali inni, jeśli widget Tekst znajduje się w drzewie widgetu Rusztowanie lub Materiał, nie będzie potrzebny styl tekstu dekoracji.

Możesz także użyć dekoracji: TextDecoration.none, aby usunąć podkreślenie

Po prostu dodam inny sposób, w jaki napotykam te odpowiedzi.

Owiń główny widget wokół widgetu DefaultTextStyle . Zmiana każdego widżetu Tekst nie jest tutaj koniecznością.

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

Mam nadzieję, że to komuś pomoże.

Powinieneś dodać widżety Materiał i Rusztowanie w pliku main.dart

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

Jest na to inne rozwiązanie, zwłaszcza jeśli używasz wielu stron opakowanych w pliku main.dart. Możesz zrobić coś takiego:

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

Spowoduje to usunięcie żółtych linii pod tekstem, który jest obecny na wszystkich stronach, do których istnieją odwołania / są używane w opakowaniu.

Wystarczy dodać widżet główny Material.

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

Dostępne są 2 sposoby:

użyj scaffuld w rodzicu ekranu

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

użyj materiału dla rodzica widgetu

Material(child: Text("My Text"))