How to remove yellow lines under Text in Flutter (3 approaches)

There are several ways to remove yellow lines under a Text widget in Flutter.

Adding a Material ancestor

You can remove the double yellow lines by placing your Text widget inside a Material widget or a widget that contains Material itself like Scaffold, Card, Dialog, Drawer, etc.

Note: Don’t forget to import ‘package:flutter/material.dart’ at the top of your Dart file.

Example 1

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('Hello'),
      ),
    );
  }
}

Screenshot:

Example 2

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Card(
        child: Text(
          'Chicken',
          style: TextStyle(fontSize: 50),
        ),
      ),
    );
  }
}

Screenshot:

Using TextDecoration.none

By setting the decoration argument of TextStyle to TextDecoration.none, you can remove the yellow lines as well.

Example:

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        'Banana',
        style: TextStyle(decoration: TextDecoration.none, fontSize: 50),
      ),
    );
  }
}

Output:

See also: Styling Text in Flutter: Tutorial & Examples

Using CupertinoApp

Example:

// main.dart
import 'package:flutter/cupertino.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color.fromARGB(255, 255, 155, 0),
      alignment: Alignment.center,
      child: const Text(
        'Banana',
        style:
            TextStyle(fontSize: 50, color: Color.fromARGB(255, 255, 255, 255)),
      ),
    );
  }
}

Output:

Learn more about Cupertino things:

• Flutter Cupertino (iOS-style) example
• CupertinoDialog example
• CupertinoSliverNavigationBar example

Conclusion

In this article, we used different examples to remove the yellow lines under a Text widget in Flutter. You were introduced to some material widgets, TextDecoration, and ScaffoldApp. If you’d like to learn more about Flutter, take a look at the following articles:

• Flutter: Creating Transparent/Translucent App Bars
• Adding a Border to Text in Flutter
• Using RichText and TextSpan in Flutter
• Flutter Vertical Text Direction: An Example
• Flutter: Display Text over Image without using Stack widget

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.