เส้นสีเหลืองใต้ Text Widgets ใน Flutter?

กำลังทำงานกับแอพพลิเคชั่นแรกของฉัน หน้าจอหลักของแอพไม่มีปัญหานี้ข้อความทั้งหมดจะแสดงขึ้นตามที่ควร

อย่างไรก็ตามในหน้าจอใหม่นี้ฉันกำลังพัฒนาวิดเจ็ตข้อความทั้งหมดมีเส้นสีเหลืองแปลก ๆ / สองบรรทัดอยู่ข้างใต้

มีความคิดเห็นว่าเหตุใดจึงเกิดขึ้น

ปัญหาคือไม่มีScaffoldหรือไม่มี Scaffoldเป็นตัวช่วยสำหรับMaterialแอพ ( AppBar, Drawerประเภทของสิ่งต่างๆ) Materialแต่คุณไม่ได้บังคับให้ใช้

สิ่งที่คุณขาดหายไปคือตัวอย่างของการThemeเป็นพ่อแม่

เหตุใดจึงสำคัญที่ต้องรู้? เพราะเมื่อคุณจะพัฒนา Modal ( showDialogตัวอย่างเช่น) คุณจะประสบปัญหาเดียวกัน แต่ Scaffold เป็นวิดเจ็ตแบบเต็มหน้าจอทึบแสง! และเห็นได้ชัดว่าคุณไม่ต้องการสิ่งนั้นใน Modal ของคุณ

มีหลายวิธีในการแนะนำอินสแตนซ์ธีม ในแอป Material มักทำได้โดยการสร้างMaterialวิดเจ็ต และเดาอะไร? Scaffoldสร้างขึ้นมาเพื่อคุณ แต่Dialogเกินไป!

เพิ่มMaterialวิดเจ็ตเป็นองค์ประกอบรูท

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

คุณสามารถใช้Scaffold(โดยทั่วไปจะดีกว่า) หรือส่วนประกอบอื่น ๆ ที่มีธีมวัสดุเช่นMaterialวิดเจ็ตธรรมดา

นี่คือตัวอย่างใช้อย่างใดอย่างหนึ่ง:

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

เป็นวิธีแก้ปัญหาชั่วคราวคุณสามารถใช้:

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

รูปแบบข้อความมีอาร์กิวเมนต์การตกแต่งที่สามารถตั้งค่าเป็นไม่มี

Text("My Text",
  style: TextStyle(
    decoration: TextDecoration.none,
  )
);

นอกจากนี้ตามที่คนอื่น ๆ กล่าวถึงหากวิดเจ็ตข้อความของคุณอยู่ในโครงสร้างของวิดเจ็ต Scaffold หรือ Material คุณก็ไม่จำเป็นต้องใช้สไตล์ข้อความตกแต่ง

คุณสามารถใช้การตกแต่ง: TextDecoration.none เพื่อลบขีดเส้นใต้

เพียงเพิ่มวิธีอื่นที่ฉันพบในคำตอบเหล่านี้

ตัดวิดเจ็ตรูทรอบวิดเจ็ตDefaultTextStyle การแก้ไขวิดเจ็ตข้อความแต่ละรายการไม่จำเป็นที่นี่

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

หวังว่ามันจะช่วยใครบางคน

คุณควรเพิ่มวิดเจ็ต Material และ Scaffold ในไฟล์ main.dart

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

มีวิธีแก้ปัญหาอื่นสำหรับสิ่งนี้โดยเฉพาะอย่างยิ่งหากคุณใช้หลาย ๆ เพจที่อยู่ภายใต้ไฟล์main.dartคุณสามารถทำสิ่งนี้ได้:

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

การดำเนินการนี้จะลบเส้นสีเหลืองใต้ข้อความที่มีอยู่ในหน้าใด ๆ ที่อ้างอิง / ใช้ภายใต้ Wrapper

คุณต้องเพิ่มวิดเจ็ตรูท Material

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

สามารถใช้ได้ 2 วิธี:

ใช้ scaffuld ในพาเรนต์ของหน้าจอ

Scaffold(body: Container(child:Text("My Text")))

ใช้วัสดุสำหรับผู้ปกครองของวิดเจ็ต

Material(child: Text("My Text"))