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

Answer 1

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 2

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 3

You just need to add Material root widget.

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

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

Add Material widget as root element.

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

Answer 6

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
)