Linhas amarelas em Widgets de texto em flutuação?

124

Estou trabalhando no meu primeiro aplicativo de vibração. A tela principal do aplicativo não apresenta esse problema, todos os textos aparecem como deveriam.

No entanto, nesta nova tela que estou desenvolvendo, todo o widget de texto tem uma linha amarela estranha / linha dupla embaixo.

Alguma ideia de por que isso está acontecendo?

flutter

— dasfima
fonte

Você pode adicionar seu código?

— aziza

14

Suspeito que o motivo seja porque você não tem um Scaffold nesta página.

— aziza

@aziza Acho que você está certo. Esta página não tem scaffold. Suspeitei que esse pudesse ser o problema, mas não prossegui com a verificação. Alguma ideia de por que isso acontece quando não tenho andaime? Eu não sabia que era necessário. Devo apenas usar um Scaffold de qualquer maneira, mesmo que eu só vá usar o parâmetro_body_?

— dasfima

2

Cada página precisa de um Scaffold, mesmo se você estiver refatorando widgets menores em classes separadas, eles devem acabar com um pai Scaffold em algum lugar. Não tenho certeza se isso significa que o texto deve ser sublinhado ou é um problema, independentemente, você vai acabar precisando construir qualquer página dentro de um Scaffold.

— aziza

3

Ou, se você não quiser Scaffold, pode apenas cercar seu Textcom Materialwidget

— realpac

154

O problema é não ter Scaffoldou não. Scaffoldé um auxiliar para Materialaplicativos ( AppBar, Drawer, esse tipo de coisa). Mas você não é forçado a usar Material.

O que você está perdendo é uma instância de Themepai.

Por que isso é importante saber? Porque ao desenvolver um Modal (usando showDialogpor exemplo), você enfrentará o mesmo problema. MAS Scaffold é um widget de tela cheia opaco! E você obviamente não quer isso no seu Modal.

Existem muitas maneiras de introduzir uma instância de Theme. No aplicativo de materiais, isso geralmente é obtido instanciando um Materialwidget. E adivinha? Scaffoldcria um para você. Mas Dialogtambém!

— Rémi Rousselet
fonte

3

Também tenha em mente que, para um Herói, ele é desconectado do pai durante o 'vôo', então adicionar um Material(ou qualquer Tema) como filho do Herói (AMBOS os lados) corrige na transição. Veja github.com/flutter/flutter/issues/30647

— aaronvargas

79

Adicione Materialwidget como elemento raiz.

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

— Dyvoker
fonte

1

cercar o textou widgetcom Materialwidget me ajudou. Adicionar Material como elemento raiz não ajudou no meu caso

— MMK

1

funciona com type: MaterialType.transparencyou sem nenhum.

— sassman

28

Você pode usar Scaffold(geralmente melhor) ou qualquer outro componente que forneça o tema material como um Materialwidget simples .

Aqui está o exemplo, use qualquer um deles:

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

Como alternativa, você pode usar:

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

— CopsOnRoad
fonte

16

O estilo do texto tem um argumento de decoração que pode ser definido como nenhum

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

Além disso, como outros mencionaram, se seu widget de Texto estiver na árvore de um widget de andaime ou material, você não precisará do estilo de texto de decoração.

— Aaron Halvorsen
fonte

10

Você também pode usar decoração: TextDecoration.none para remover o sublinhado

— Anirudh Sharma
fonte

6

Apenas adicionando outra maneira que encontro a essas respostas.

Envolva o widget raiz em um widget DefaultTextStyle . Alterar cada widget de texto não é uma necessidade aqui.

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

Espero que ajude alguém.

— Nikhileshwar
fonte

2

Você deve adicionar os widgets Material e Scaffold no arquivo main.dart

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

— kokemomuke
fonte

2

Há uma outra solução para isso, especialmente se você estiver usando várias páginas agrupadas no arquivo main.dart . Você pode fazer algo assim:

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

Isso removerá as linhas amarelas sob o texto que está presente em qualquer página referenciada / usada sob o invólucro.

— Abdulmanan
fonte

1

Você só precisa adicionar o widget raiz do Material.

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

— Paras Sharma
fonte

0

Duas maneiras estão disponíveis:

usar scaffuld no pai da tela

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

use o material para o pai do widget

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

— Milad Jalali
fonte