Flutter: red text and yellow lines in Text widget

When using a text widget, there are some configurations where the text turns red and gets yellow lines. In my case, it looks like in the following image.

The reason for this is a lack of style parameters from the parent widget. The red text shows that there is no color information available. The yellow lines show that text decoration is missing.

In my case, I have a simple text widget in a Row:

Container(
  // ...
  child: Row(
    children: [
      // ...
      Text('External device'),
    ],
  ),
);

To solve the issue, there are different possibilities.

Provide a DefaultTextStyle

DefaultTextStyle(
  style: Theme.of(context).textTheme.bodyText1,
  child: Text('External device'),
),

Use Material

Material(
  color: Colors.transparent,
  child: Text('External device'),
),

Use style parameter of Text

Text(
  'External device',
  style: TextStyle(
    decoration: TextDecoration.none,
    color: Colors.black,
  ),
),

In this case, decoration will remove the yellow lines and color will remove the red text color.

Use Scaffold

A solution discussed in different threads might also be using a Scaffold for the parent widget. But this did not work in case.

Scaffold(
  body: Container(
    // ...
    child: ...
);

Leave a Reply

Your email address will not be published.