Des lignes jaunes sous les widgets de texte dans Flutter?

Je travaille sur ma première application Flutter. L'écran principal de l'application n'a pas ce problème, tous les textes s'affichent comme ils le devraient.

Cependant, dans ce nouvel écran que je développe, tous les widgets de texte ont une étrange ligne jaune / double ligne en dessous.

Des idées sur pourquoi cela se produit?

Le problème est de ne pas en avoir Scaffoldou non. Scaffoldest une aide pour les Materialapplications ( AppBar, Drawer, ce genre de choses). Mais vous n'êtes pas obligé de l'utiliser Material.

Ce qui vous manque, c'est une instance de Themeparent.

Pourquoi est-ce important de savoir? Parce que lorsque vous développerez un Modal (en utilisant showDialogpar exemple), vous serez confronté au même problème. MAIS Scaffold est un widget plein écran opaque! Et vous ne voulez évidemment pas cela dans votre Modal.

Il existe de nombreuses façons d'introduire une instance de thème. Dans Material App, cela est généralement réalisé en instanciant un Materialwidget. Et devine quoi? Scaffoldcrée un pour vous. Mais Dialogaussi!

Ajoutez un Materialwidget comme élément racine.

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

Vous pouvez utiliser Scaffold(généralement mieux) ou tout autre composant qui fournit un thème matériel comme un simple Materialwidget.

Voici l'exemple, utilisez l'un d'entre eux:

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

Pour contourner ce problème, vous pouvez utiliser:

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

Le style de texte a un argument de décoration qui peut être défini sur aucun

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

De plus, comme d'autres l'ont mentionné, si votre widget Texte est dans l'arborescence d'un widget Scaffold ou Material, vous n'aurez pas besoin du style de texte de décoration.

Vous pouvez également utiliser la décoration: TextDecoration.none pour supprimer le soulignement

Juste en ajoutant une autre façon que je rencontre à ces réponses.

Enveloppez le widget racine autour d'un widget DefaultTextStyle . Modifier chaque widget Texte n'est pas une nécessité ici.

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

J'espère que ça aide quelqu'un.

Vous devez ajouter des widgets Matériel et Scaffold dans le fichier main.dart

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

Il existe une autre solution pour cela, surtout si vous utilisez plusieurs pages enveloppées dans le fichier main.dart.Vous pouvez faire quelque chose comme ceci:

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

Cela supprimera les lignes jaunes sous le texte présent dans toutes les pages référencées / utilisées sous wrapper.

Il vous suffit d'ajouter le widget racine du matériau.

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

2 façons sont disponibles:

utiliser scaffuld dans le parent de l'écran

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

utiliser du matériel pour le parent du widget

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