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: ...
);