Des lignes jaunes sous les widgets de texte dans Flutter?

125

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?

flutter

— Dasfima
source

Pouvez-vous ajouter votre code?

— aziza

15

Je soupçonne que la raison est que vous n'avez pas d'échafaudage sur cette page.

— aziza

@aziza Je pense que vous avez raison. Cette page n'a pas d'échafaudage. Je soupçonnais que c'était peut-être le problème, mais je n'ai pas suivi la vérification. Des idées sur les raisons pour lesquelles cela se produit lorsque je n'ai pas d'échafaudage? Je ne savais pas que c'était nécessaire. Dois-je quand même utiliser un Scaffold, même si je n'utiliserai que le paramètre_body_?

— dasfima

2

Chaque page a besoin d'un Scaffold, même si vous refactorisez des widgets plus petits sur des classes séparées, ils devraient se retrouver avec un parent Scaffold quelque part. Je ne suis pas sûr que le texte soit souligné de cette façon ou si c'est un problème, peu importe, vous finirez par avoir besoin de créer une page dans un échafaudage.

— aziza

3

Ou si vous voulez DONOT Scaffold, vous pouvez juste votre entourage Textavec un Materialwidget

— REALpac

156

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!

— Rémi Rousselet
source

3

Gardez également à l'esprit que pour un héros, il est déconnecté du parent lorsqu'il est `` en vol '', donc l'ajout d'un Material(ou d'un thème) en tant qu'enfant du héros (LES DEUX côtés) le corrige dans la transition. Voir github.com/flutter/flutter/issues/30647

— aaronvargas

79

Ajoutez un Materialwidget comme élément racine.

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

— Dyvoker
source

1

entourer le widget textou widgetavec Materialm'a aidé. L'ajout de matériel en tant qu'élément racine n'a pas aidé dans mon cas

— MMK

1

fonctionne à la fois avec type: MaterialType.transparencyou sans aucun.

— sassman

28

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
)

— CopsOnRoad
source

16

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.

— Aaron Halvorsen
source

10

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

— Anirudh Sharma
source

6

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.

— Nikhileshwar
source

2

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

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

— kokemomuke
source

2

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.

— Abdulmanan
source

1

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

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

— Paras Sharma
source

0

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"))

— milad jalali
source