Garis kuning di bawah Widget Teks di Flutter?

124

Mengerjakan aplikasi flutter pertama saya. Layar aplikasi utama tidak memiliki masalah ini, semua teks muncul sebagaimana mestinya.

Namun di layar baru yang saya kembangkan ini, semua widget teks memiliki beberapa garis kuning / garis ganda yang aneh di bawahnya.

Ada ide mengapa ini terjadi?

flutter

— dasfima
sumber

Bisakah Anda menambahkan kode Anda?

— aziza

14

Saya menduga alasannya adalah karena Anda tidak memiliki Scaffold di halaman ini.

— aziza

@aziza Saya pikir Anda benar. Halaman ini tidak memiliki perancah. Saya curiga itu mungkin masalahnya, tetapi tidak menindaklanjuti dengan memeriksanya. Adakah ide mengapa hal ini terjadi jika saya tidak memiliki perancah? Saya tidak menyadari itu diperlukan. Haruskah saya tetap menggunakan Scaffold, meskipun saya hanya akan menggunakan parameter_body_?

— dasfima

2

Setiap halaman membutuhkan Scaffold, meskipun Anda memfaktorkan ulang widget yang lebih kecil ke kelas terpisah, widget tersebut akan berakhir dengan induk Scaffold di suatu tempat. Saya tidak yakin apakah ini dimaksudkan dengan cara ini agar teks digarisbawahi atau menjadi masalah, terlepas dari itu, Anda pada akhirnya harus membangun halaman apa pun dalam Perancah.

— aziza

3

Atau jika Anda tidak mau Scaffold, Anda dapat mengelilingi Anda Textdengan Materialwidget

— realpac

154

Masalahnya tidak memiliki Scaffoldatau tidak. Scaffoldadalah penolong untuk Materialaplikasi ( AppBar, Drawer, hal-hal seperti). Tapi Anda tidak dipaksa untuk menggunakan Material.

Apa yang Anda lewatkan adalah contoh Themesebagai orang tua.

Mengapa itu penting untuk diketahui? Karena ketika Anda akan mengembangkan Modal (menggunakan showDialogmisalnya), Anda akan menghadapi masalah yang sama. TAPI Scaffold adalah widget layar penuh buram! Dan Anda jelas tidak menginginkannya di Modal Anda.

Ada banyak cara untuk memperkenalkan instance Tema. Di Aplikasi Material, ini biasanya dicapai dengan membuat instance MaterialWidget. Dan coba tebak? Scaffoldmembuatkan satu untuk Anda. Tapi Dialogjuga!

— Rémi Rousselet
sumber

3

Juga perlu diingat untuk Pahlawan, itu terputus dari induknya saat 'dalam penerbangan' jadi menambahkan Material(atau Tema apa pun) saat anak Pahlawan (KEDUA sisi) memperbaikinya dalam transisi. Lihat github.com/flutter/flutter/issues/30647

— aaronvargas

79

Tambahkan Materialwidget sebagai elemen root.

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

— Dyvoker
sumber

1

mengelilingi textatau widgetdengan Materialwidget membantu saya. Menambahkan Material sebagai elemen root tidak membantu dalam kasus saya

— MMK

1

bekerja baik dengan type: MaterialType.transparencyatau tanpa.

— sassman

28

Anda dapat menggunakan Scaffold(umumnya lebih baik) atau komponen lain yang menyediakan tema material seperti Materialwidget sederhana .

Berikut contohnya, gunakan salah satu dari mereka:

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

Sebagai solusi, Anda dapat menggunakan:

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

— CopsOnRoad
sumber

16

Gaya teks memiliki argumen dekorasi yang dapat disetel ke tidak ada

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

Juga, seperti yang telah disebutkan orang lain, jika widget Teks Anda ada di pohon widget Perancah atau Material, Anda tidak memerlukan gaya teks dekorasi.

— Aaron Halvorsen
sumber

10

Anda juga dapat menggunakan dekorasi: TextDecoration.none untuk menghapus garis bawah

— Anirudh Sharma
sumber

6

Hanya menambahkan cara lain yang saya temui untuk jawaban ini.

Gabungkan Widget root di sekitar widget DefaultTextStyle . Mengubah setiap widget Teks bukanlah suatu keharusan di sini.

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

Semoga bisa membantu seseorang.

— Nikhileshwar
sumber

2

Anda harus menambahkan widget Material dan Scaffold di file main.dart

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

— kokemomuke
sumber

2

Ada solusi lain untuk ini, terutama jika Anda menggunakan banyak halaman yang dibungkus di bawah file main.dart Anda dapat melakukan sesuatu seperti ini:

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

Ini akan menghapus garis kuning di bawah teks yang ada di halaman mana pun yang direferensikan / digunakan di bawah pembungkus.

— Abdulmanan
sumber

1

Anda hanya perlu menambahkan widget Material root.

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

— Paras Sharma
sumber

0

2 cara tersedia:

gunakan scaffuld di induk layar

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

menggunakan bahan untuk induk widget

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

— milad jalali
sumber