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

Last updated on December 13, 2020 A Goodman Loading... Post a comment

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

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

Screenshot:

Example 2

Widget build(BuildContext context) {
    return 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:

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

Output:

Using CupertinoApp

Example:

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

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

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

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

Output:

Learn more about Cupertino:

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, check out our Flutter category page for more tutorials.

Related Articles

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x