Yellow lines under Text Widgets in Flutter?

Question

The main app screen doesn't have this issue, all the texts show up as they should.

However, in the new screen, all the text widget have some weird yellow line / double-line underneath.

Any ideas on why this is happening?

Doan

Can you add your code ? – Wasteful

I suspect the reason is because you do not have a Scaffold on this page. – Wasteful

@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? – Doan

Each 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. – Wasteful

Or if you donot want Scaffold, you can just surround your Text with Material widget – Oyler

Is this documented somewhere? Since I'm new to Flutter I couldn't figure out why my texts get double underline by default – Christos

Answer 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.

Photoflood

Also 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 – Newcomen

@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. – Longicorn

Just an update, It's the DefaultTextStyle, not Theme that's missing. – Longicorn

I just added another way to fix this in the answer below. – Longicorn

Adding a Theme parent does not solve the problem. DefaultTextStyle is the missing parent, as per documentation – Sarge

Scaffold adding as parent fixes the issue, Thanks!! – Robet

This is not an accurate answer. I have a Theme parent and the issue still exists. – Cosetta

Wrapping main widget within 'Scaffold' worked for me. – Daleth

Answer 2

Add Material widget as root element.

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

Mate

surrounding the text or widget with Material widget helped me. Adding Material as root element didn't help in my case – Raneeraney

works both with type: MaterialType.transparency or without any. – Trihydric

Thanks for pointing out type: MaterialType.transparency,. Needed it because my child had rounded borders so I was seeing a white background. – Shame

Answer 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(),
  ),
);

Engram

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.

Lenient

Answer 5

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.

Overthecounter

Answer 6

Also you can use decoration: TextDecoration.none to remove underline

Chrissie

Answer 7

You should add Material and Scaffold widgets in main.dart file

 MaterialApp(
  home: Scaffold(
    body: Text('Hello world'),
  ),
);

Selfregulated

Answer 8

Before

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
          child: Text(
            "21:34",
            style: TextStyle(fontSize: 50),
          ),
        ),
        Center(
          child: Text(
            "Wakey - wakey",
            style: TextStyle(fontSize: 20),
          ),
        )
      ],
    );
  }

After (Solution):

Here Wrap the current top or parent widget with Scaffold widget

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Text(
              "21:34",
              style: TextStyle(fontSize: 50),
            ),
          ),
          Center(
            child: Text(
              "Wakey - wakey",
              style: TextStyle(fontSize: 20),
            ),
          )
        ],
      ),
    );
  }

Full code:Dartpad or Live code

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: sta()));

class sta extends StatefulWidget {
  const sta({Key? key}) : super(key: key);

  @override
  State<sta> createState() => _staState();
}

var isShow = false;


class _staState extends State<sta> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Text(
              "21:34",
              style: TextStyle(fontSize: 50),
            ),
          ),
          Center(
            child: Text(
              "Wakey - wakey",
              style: TextStyle(fontSize: 20),
            ),
          )
        ],
      ),
    );
  }
}

Helve

Answer 9

You just need to add Material root widget.

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

Martijn

Answer 10

problem: your widget doesn't have default text style,

solution: wrap it in one!

DefaultTextStyle(
    style: TextStyle(),
    child: yourWidget,
  );

remember if you dont set any color, default text color is white!

Himation

Answer 11

There is an other solution for this , especially if you are using multiple pages wrapped under main.dart file You can do something like this:

  child: MaterialApp(
    home: Material(child: Wrapper()),
  ),

This will remove the yellow lines under text that is present in any pages referenced/used under wrapper.

Doloresdolorimetry

Answer 12

The yellow lines come from _errorTextStyle. The documentation states that you should define a DefaultTextStyle parent (or use Material, which does this for you):

MaterialApp uses this TextStyle as its DefaultTextStyle to encourage developers to be intentional about their DefaultTextStyle.

In Material Design, most Text widgets are contained in Material widgets, which sets a specific DefaultTextStyle. If you're seeing text that uses this text style, consider putting your text in a Material widget (or another widget that sets a DefaultTextStyle).

Developing Flutter apps without material is not something most people do, but if that's your use case, you should use DefaultTextStyle.

Contrary to the accepted answer, Theme does not set a DefaultTextStyle, so it does not solve your problem. Scaffold does solve the problem, as it contains Material, which in turn defines DefaultTextStyle, but Scaffold is a bit more than you need for a Dialog, Hero, etc.

To permanently solve this for your whole app, you could set the DefaultTextStyle in your MaterialApp builder. This solves the issue for all the components of your app, not just the current screen you're working on.

Sarge

Answer 13

I recommend this approach because you could do it once and it will override your whole app.

Add DefaultTextStyle under builder of our MaterialApp like so:

child: MaterialApp(      
  ...
  ...
  theme: yourThemeData,
  builder: (context, child) => DefaultTextStyle(
    style: yourThemeData.textTheme.bodyText1,
    child: child,
  ),
),

By doing so we don't need to specify a style or having DefaultTextTheme every time we want to use showDialog or Overlay.

Longicorn

Answer 14

You can also have your scaffold as the home for your MaterialApp. This worked for me.

return MaterialApp(
  home: Scaffold(
    body: Container(
      child: SingleChildScrollView(child: Text('Test')),
    ),
  ),
);

Logy

Answer 15

Use a DefaultTextStyle() widget to set the textstyle of your text.

DefaultTextStyle(
  style: kTempTextStyle,
  child: Text('Hello world'),
)

you can give your own textstyle as you want.

const kTempTextStyle = TextStyle(
  fontFamily: 'Spartan MB',
  fontSize: 100.0,
  decoration: null,
);

Invalidism

Answer 16

The text has a hidden default text style .The problem arises because you can't provide this to any parent widget like Scaffold. Text widget takes the default style. for your solution either you can change the DefaultTextStyle like this.

DefaultTextStyle(
    style: TextStyle(),
    child: yourTextWidget,
  );

or just wrap into Scaffold, Scaffold is a widget. that provides scaffolding for pages in your app. like this

 MaterialApp(
  home: Scaffold(
    body: Text('Wakey Wakey!'),
  ),
);

for more info just walk through this Flutter Official video.

Yellow underline text | Decoding Flutter

Thaddeusthaddus

Answer 17

wrap your build widget with Material widget

@override Widget build(BuildContext context) { return Material ( ... );

it will fix the text yellow underline issue

Sail

Answer 18

Try wrapping your widget with Material widget like a below:

Material(color: Colors.white, child: YourWidget())

Rigging