How to Remove Yellow lines Under Text Widgets in Flutter?

· 2 min read
Remove Yellow Lines Under Text In Flutter
Remove Yellow Lines Under Text In Flutter

Sometimes while creating an application it may happen that all the Text Widget have some weird yellow line/double-line underneath. In this article, we will walk through How to Remove Yellow lines Under Text Widgets in Flutter?

Why Flutter displays Yellow lines?

The problem is not having a Scaffold Widget.  A Scaffold is a helper for Material apps like AppBar, Drawer.

How to Remove Yellow lines Under Text Widgets in Flutter?

There are many ways to introduce a Theme instance. In Material App, this is usually achieved by instantiating a Material Widget.

Add Material Widget as the root element.

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

You can either use Scaffold or any other component that provides a material theme like a simple Material Widget.

Here is the example, use any of them:

var text2 = Material(child: Text("Hi"),);
var text = Scaffold(body: Text("Hi"),);

As a workaround you can use:

  'Your text',
  style: TextStyle(decoration: TextDecoration.none), // removes yellow line

Wrap the root Widget around a DefaultTextStyle Widget. Altering each Text widget is not a necessity here.

    style: TextStyle(decoration: TextDecoration.none), 
    child : Your_RootWidget


In this article, we have been through how to remove yellow lines under the Text Widget in Flutter?

Thanks for being with us on a Flutter Journey.
Still, need support for Flutter? is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc. is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply