Yellow lines under Text Widgets in Flutter?
Solution 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 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.
Solution 2
Add Material
widget as root element.
@override
Widget build(BuildContext context) {
return Material(
type: MaterialType.transparency,
child: new Container(
Solution 3
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(),
),
);
Solution 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.
Solution 5
Also you can use decoration: TextDecoration.none to remove underline
Related videos on Youtube
dasfima
Updated on May 12, 2022Comments
-
dasfima about 2 years
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?
-
Shady Aziza over 6 yearsCan you add your code ?
-
Shady Aziza over 6 yearsI suspect the reason is because you do not have a Scaffold on this page.
-
dasfima over 6 years@aziza I think you're right. This page doesn't have a scaffold. I suspected that might be the issue, but didn't follow through with checking it. Any ideas as to why this happens when I have no scaffold? I did not realise it was required. Should I just use a Scaffold anyway, even though I'm only gonna use the_body_ parameter?
-
Shady Aziza over 6 yearsEach page needs a Scaffold, even if you are refactoring smaller widgets onto separate classes they should end up with a Scaffold parent somewhere. I am not sure if it is meant this way for the text to be underlined or it is an issue, regardless, you will end up needing to build any page within a Scaffold.
-
dasfima over 6 years@aziza very well. Thanks!
-
realpac about 6 yearsOr if you donot want
Scaffold
, you can just surround yourText
withMaterial
widget -
Andrey Gordeev about 5 yearsIs this documented somewhere? Since I'm new to Flutter I couldn't figure out why my texts get double underline by default
-
John Melody Me over 3 yearsset decoration to none.
-
-
MMK over 5 yearssurrounding the
text
orwidget
withMaterial
widget helped me. Adding Material as root element didn't help in my case -
5422m4n almost 5 yearsworks both with
type: MaterialType.transparency
or without any. -
tmele54 almost 5 yearsAlso keep in mind for a Hero, it is disconnected from the parent while 'in flight' so adding a
Material
(or any Theme) as the Hero's child (BOTH sides) fixes it in the transition. See github.com/flutter/flutter/issues/30647 -
kitta over 3 years@Rémi If you said Theme instance is missing in the parent, Why having Theme on top instead of Material or Scaffold doesn't help solve the problem? I just try it.
-
kitta over 3 yearsJust an update, It's the DefaultTextStyle, not Theme that's missing.
-
kitta over 3 yearsI just added another way to fix this in the answer below.
-
Srini2k6 about 3 yearsthis workaround helped me to fix the yellow lines in hero animation. Thanks.
-
Juukie14 almost 3 yearsThanks for pointing out
type: MaterialType.transparency,
. Needed it because my child had rounded borders so I was seeing a white background. -
Andrei Tudor Diaconu almost 3 yearsAdding a Theme parent does not solve the problem.
DefaultTextStyle
is the missing parent, as per documentation -
Happy Singh over 2 yearsScaffold adding as parent fixes the issue, Thanks!!
-
Scorb about 2 yearsThis is not an accurate answer. I have a Theme parent and the issue still exists.