En Yeni Konular

Flutter : TextField

TextField

Flutter’da TextField ile kullanıcılardan veri girişi alıp bu bilgiler ile işlemler yapabiliriz.

hiç bir özelliği olmadan basit bir TextField

TextField içerisindeki bilgilere ulaşma

Yöntem 1: onChanged özelliği ile girilen bilgileri bir değişkene atayıp oradan kullanabiliriz.

Yöntem 2: TextEditingController oluşturup TextField’ımıza atayıp dinleyebiliriz.

TextEditingController : ile bir çok işlem yapılabilir dinlemek bunlardan bir tanesi.

Klavye tipi değiştirme

Yapacağımız işlemlere göre girilmesini istediğimiz bilgiler farklı olabilir. Örneğin kullanıcı mail adresi girerken  içerisinde @ işareti olan klavye göstermek isteyebiliriz. Bunun için TextFeild Widgetimizin keybordType özelliğinden yardım alırız.

 

Klavye Türleri

  1. TextInputType.text 
  2. TextInputType.number 
  3. TextInputType.emailAddress 
  4. TextInputType.datetime
  5. TextInputType.numberWithOptions 
  6. TextInputType.multiline 

TextField içerğini Hizalama

textAlign özelliği sayesinde hizalama işlemlerini kolayca yapabiliriz.

Diğer hizalama seçenekleri : start, end, left, right, center, justify.

Girilen verilerin uzunluğunu ve satır sayısı kontrol etmek

Bazı durumlardan kullanıcı tarafından girilen karakter sayısına veya satır sayısına sınırlama getirmek isteyebiliriz.

Maximum karakter uzunluğu kontrolü

Satır sayısı belirlemek

Eğer girilen verilerin çok uzun olabileceği durumlardan maxLines özelliği sayesinde bir den fazla satırdan oluşmasını sağlayabiliriz.

maxLines özelliğini aktif etiğimiz anda direk olarak ekranda belirtilen satır kadar yer kaplıyacaktır.

Girilen Verileri Gizleme

Şifre bölümü gibi kısımları obscuring özelliği sayesinde **** gibi görünmesini sağlayabiliriz.

TextField Süsleyip Püsleme işlemleri (Decorating)

TextField widgetimize hint(ipucu), icon, çerçeve, still verme gibi işlemlerimizi decorating özelliği ile yapabiliriz.

Hint(ipucu) ekleme

TextField’ımızın arkaplanında görünen kullanıcıya bilgi verme amaçlı yazı

Hint

Label ekleme

Hint gibidir ama ilgili TextField aktif olduğunda text yukarı çıkar

İcon ekleme

Normal İcon

 

Normal İcon

 

prefixİcon

Border (Çerçeve) verme

TextField Örnek Uygulama


TextField Örnek

Hakkında Necip Akgöz

İLGİNİZİ ÇEKEBİLİR

Flutter : Expanded Ve Flexible

BaşlıklarTextFieldhiç bir özelliği olmadan basit bir TextFieldTextField içerisindeki bilgilere ulaşmaKlavye tipi değiştirmeTextField içerğini HizalamaGirilen verilerin …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir