Flutter: HintText ile ancak Altı Çizili olmayan bir TextField nasıl oluşturulur?

Yapmaya çalıştığım şey bu:

Metin Alanları için Flutter belgelerinde ( https://flutter.io/text-input/ ) null, dekorasyona geçerek alt çizgiyi kaldırabileceğinizi söylüyor . Ancak, bu aynı zamanda ipucu metninden de kurtulur.

Metin alanının odaklanmış olup olmadığının altını çizmek istemiyorum.

GÜNCELLEME: Nisan 2020 itibarıyla Flutter SDK'daki değişiklikleri yansıtmak için güncellenmiş kabul edilmiş yanıt.

Yukarıdaki cevaplardan hiçbiri yeni flutter sdk için işe yaramayacaktır çünkü web ve masaüstü desteğinin entegrasyonundan sonra, bunun gibi ayrı ayrı belirtmeniz gerekir.

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),
  )

Bunu şöyle yapın:

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

veya simge gibi başka şeylere ihtiyacınız varsa, sınırı InputBorder.none

InputDecoration(
    border: InputBorder.none,
    hintText: 'Username',
  ),
),

odaklanmış sınırı yok olarak değiştir

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

İşte bazı tam kodları gösteren tamamlayıcı bir cevap:

  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),
      ),
    ),
  ),

Notlar:

• Koyu arka plan (kod gösterilmemiştir) Colors.teal .
• InputDecorationAyrıca bir filledve fillColorözelliği var, ancak onlara bir köşe yarıçapına sahip olamadım, bu yüzden bunun yerine bir kap kullandım.

Başka hiçbir cevabın bir sınır yarıçapı vermediğini buldum, bunu basitçe yapabilirsiniz, iç içe değil Container

  TextField(
    decoration: InputDecoration(
      border: OutlineInputBorder(
        borderSide: BorderSide.none,
        borderRadius: BorderRadius.circular(20),
      ),
    ),
  );

TextFieldFlutter kontrolünü kullanıyordum.Kullanıcıya aşağıdaki yöntemleri kullanarak girdi yazdım .

onChanged:(value){
}

decoration: InputDecoration(
 border:OutLineInputBorder(
 borderSide:BorderSide.none
 bordeRadius: BordeRadius.circular(20.0)
 )
)