Yellow lines under Text Widgets in Flutter?

Question

Working on my first flutter app. The main app screen doesn't have this issue, all the texts show up as they should.

However in this new screen I'm developing, all the text widget have some weird yellow line / double-line underneath.

Any ideas on why this is happening?

Answer 1

The problem is having a Scaffold or not. Scaffold is a helper for Material apps (AppBar, Drawer, that sort of stuff). But you're not forced to use Material.

What you're missing is an instance of Theme as a parent.

Why is that important to know? Because when you'll develop a Modal (using showDialog for example), you'll face the same problem. BUT Scaffold is an opaque fullscreen widget! And you obviously don't want that in your Modal.

There are many ways to introduce a Theme instance. In Material App, this is usually achieved by instantiating a Material Widget. And guess what? Scaffold creates one for you. But Dialog too!

Answer 2

Add Material widget as root element.

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

Answer 3

You can either use Scaffold (generally better) or any other component that provides material theme like a simple Material widget.

Here is the example, use any of them:

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

---

As a workaround you can use:

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

Answer 4

Text style has a decoration argument that can be set to none

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

Also, as others have mentioned, if your Text widget is in the tree of a Scaffold or Material widget you won't need the decoration text style.

Answer 5

Also you can use decoration: TextDecoration.none to remove underline

Answer 6

Just adding another way I encounter to these answers.

Wrap the root Widget around a DefaultTextStyle widget. Altering each Text widget is not a necessity here.

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

Hope it helps someone.

Answer 7

Inside your Text Widget, use the style property and set decoration to null like shown:

Text( 
   "hello world",
   style: TextStyle(
       decoration: TextDecoration.none
   ),
)

This will remove the yellow lines under the text.

Answer 8

You should add Material and Scaffold widgets in main.dart file

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

Answer 9

2 ways is avalible:

use scaffuld in parent of screen

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

use material for parent of widget

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

Answer 10

There is an other solution for this , especially if you are using multiple pages wrapped under main.dart file You can do something like this:

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

This will remove the yellow lines under text that is present in any pages referenced/used under wrapper.

Answer 11

You just need to add Material root widget.

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

Answer 12

Add DefaultTextStyle under builder of our MaterialApp like so:

child: MaterialApp(      
  ...
  ...
  theme: yourThemeData,
  builder: (context, child) => DefaultTextStyle(
    style: yourThemeData.textTheme.bodyText1,
    child: child,
  ),
),

By doing so we don't need to specify a style or having DefaultTextTheme every time we want to use showDialog or Overlay.

Answer 13

problem: your widget doesn't have default text style,

solution: wrap it in one!

DefaultTextStyle(
    style: TextStyle(),
    child: yourWidget,
  );

remember if you dont set any color, default text color is white!

Answer 14

The yellow lines come from _errorTextStyle. The documentation states that you should define a DefaultTextStyle parent (or use Material, which does this for you):

MaterialApp uses this TextStyle as its DefaultTextStyle to encourage developers to be intentional about their DefaultTextStyle.

In Material Design, most Text widgets are contained in Material widgets, which sets a specific DefaultTextStyle. If you're seeing text that uses this text style, consider putting your text in a Material widget (or another widget that sets a DefaultTextStyle).

Developing Flutter apps without material is not something most people do, but if that's your use case, you should use DefaultTextStyle.

Contrary to the accepted answer, Theme does not set a DefaultTextStyle, so it does not solve your problem. Scaffold does solve the problem, as it contains Material, which in turn defines DefaultTextStyle, but Scaffold is a bit more than you need for a Dialog, Hero, etc.

To permanently solve this for your whole app, depending on your root widget:

• MaterialApp: Set the DefaultTextStyle in your MaterialApp builder. This solves the issue for all the components of your app, not just the current screen you're working on.
• WidgetsApp takes a textStyle parameter directly
• CupertinoApp looks for a CupertinoTheme parent, so you need to define that above CupertinoApp and define textTheme.