Yellow lines under Text Widgets in Flutter?

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.


Add Material widget as root element.

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

All you need to do is provide a Material widget, or a Scaffold which internally covers this widget. You can do that in the following ways:

  • Use Material (simple and better):

    Material(
      color: Colors.transparent, // <-- Add this, if needed
      child: Text('Hello'),
    )
    
  • Set Text.style property:

    Text(
      'Hello',
      style: TextStyle(decoration: TextDecoration.none), // Set this
    )
    
  • Provide Scaffold:

    Scaffold(body: Text('Hello'))
    

Fixing yellow text issues when using Hero :

As aaronvargas mentioned, you can wrap your child in Material when using Hero on both sides. For example:

Hero(
  tag: 'fooTag',
  child: Material( // <--- Provide Material
    type: MaterialType.transparency,
    child: YourWidget(),
  ),
);

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 DefaultTextStyle as a parent:

DefaultTextStyle(
  style: TextStyle(...),
  child: Text('Hello world'),
)

Various widgets add one to change the default text theme, such as Scaffold, Dialog, AppBar, ListTile, ...

It's DefaultTextStyle that allows your app-bar title to be bold by default for example.

Tags:

Flutter