Flutter: bagaimana membuat TextField dengan HintText tapi tanpa Underline?

116

Inilah yang saya coba buat:

masukkan deskripsi gambar di sini

Di dokumen Flutter untuk Bidang Teks ( https://flutter.io/text-input/ ) disebutkan bahwa Anda dapat menghapus garis bawah dengan meneruskan nullke dekorasi. Namun, itu juga menghilangkan teks petunjuk.

Saya tidak ingin ada garis bawah apakah bidang teks terfokus atau tidak.

UPDATE: memperbarui jawaban yang diterima untuk mencerminkan perubahan dalam Flutter SDK per April 2020.

Teh celupSanta
sumber

Jawaban:

79

Bukan dari jawaban di atas akan berfungsi untuk flutter sdk baru karena setelah integrasi web dan dukungan desktop Anda perlu menentukan satu per satu seperti ini

TextFormField(
    cursorColor: Colors.black,
    keyboardType: inputType,
    decoration: new InputDecoration(
        border: InputBorder.none,
        focusedBorder: InputBorder.none,
        enabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        contentPadding:
            EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
        hintText: sLabel),
  )
sourav pandit
sumber
233

Lakukan seperti ini:

TextField(
  decoration: new InputDecoration.collapsed(
    hintText: 'Username'
  ),
),

atau jika Anda membutuhkan hal lain seperti ikon, atur batasnya dengan InputBorder.none

InputDecoration(
    border: InputBorder.none,
    hintText: 'Username',
  ),
),
Dibuat Baruna
sumber
Apakah mungkin melakukannya tanpa mengimpor materialpaket? yaitu untuk Cupertinotema?
kosiara - Bartosz Kosarzycki
Saya ingin menghindari: InputDecoration' can't be assigned to the parameter type 'BoxDecoration'kesalahan jenis
kosiara - Bartosz Kosarzycki
13

ubah batas fokus menjadi tidak ada

TextField(
      decoration: new InputDecoration(
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          contentPadding: EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
          hintText: 'Subject'
      ),
    ),
Sarthak Singhal
sumber
12

Berikut adalah jawaban tambahan yang menunjukkan beberapa kode yang lebih lengkap:

masukkan deskripsi gambar di sini

  Container(
    decoration: BoxDecoration(
      color: Colors.tealAccent,
      borderRadius:  BorderRadius.circular(32),
    ),
    child: TextField(
      decoration: InputDecoration(
        hintStyle: TextStyle(fontSize: 17),
        hintText: 'Search your trips',
        suffixIcon: Icon(Icons.search),
        border: InputBorder.none,
        contentPadding: EdgeInsets.all(20),
      ),
    ),
  ),

Catatan:

  • Latar belakang gelap (kode tidak ditampilkan) adalah Colors.teal.
  • InputDecorationjuga memiliki filleddan fillColorproperti, tapi saya tidak bisa membuatnya memiliki radius sudut, jadi saya menggunakan wadah sebagai gantinya.
Suragch
sumber
3

Saya tidak menemukan jawaban lain memberikan radius batas, Anda dapat melakukannya seperti ini, tidak bersarang Container

  TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderSide: BorderSide.none,
        borderRadius: BorderRadius.circular(20),
      ),
    ),
  );
E. Sun
sumber
-1

Saya menggunakan TextFieldkontrol flutter. Saya mendapat input yang diketik pengguna menggunakan metode di bawah ini.

onChanged:(value){
}
Sachin Mishra
sumber
-2
decoration: InputDecoration(
 border:OutLineInputBorder(
 borderSide:BorderSide.none
 bordeRadius: BordeRadius.circular(20.0)
 )
)
SR Keshav
sumber
Apa perbedaan antara jawaban ini dan @E. Jawaban Sun dari sebulan yang lalu?
Jeremy Caney
Anda menginginkan sesuatu yang baru?
SR Keshav
2
Jika jawaban sudah diberikan, tidak perlu mengirimkannya lagi. Melakukan hal itu hanya menambah kebisingan bagi pembaca di masa mendatang, karena mereka perlu memilah-milah beberapa jawaban serupa. Di masa mendatang, setelah Anda mendapatkan sedikit lebih banyak reputasi, Anda akan dapat memberi suara positif pada jawaban yang ada; itulah cara yang lebih disukai untuk memvalidasi pendekatan dan menegaskan bahwa solusinya berhasil.
Jeremy Caney
1
Perlu saya perhatikan bahwa, terkadang, kontributor masih akan memposting saran serupa jika mereka memiliki cara penjelasan yang berbeda, atau ingin menambahkan lebih banyak detail. Tidak apa-apa. Masalahnya di sini adalah Anda tampaknya memberikan jawaban yang sama , tetapi dengan sedikit detail, sehingga tidak banyak berkontribusi pada utas.
Jeremy Caney