Flutter Basit Form Uygulaması

Flutter Basit Form Uygulaması

Flutter Basit Form Uygulaması ile Flutter örneklerime devam ediyorum. Bu yazımda sizlerle beraber Flutter’de iki adet textformfield kullanarak form uygulaması yapacağız. Daha sonra bu textformfield’leri içeriklerine göre kontrol edeceğiz.Hadi başlayalım.

1.Yeni bir proje oluşturalım.

Yeni bir proje oluşturun ve aşağıdaki kodları kullanarak proje içeriğini oluşturun. Bu kodlarla kabaca bir yapı oluşturuyoruz. Görünüm olarak sadece bir appbar mevcut olacaktır.

2.Key için değişken oluşturalım.

Form yapısında kullanacağımız textformfield’ler üzerinde yetkinliğimizin daha fazla olması adına form widgetimize key ekleyeceğiz. Keyler aracılığı ile widgetlerin bazı gizli ya da başka bir deyişle derin özelliklerini kullanabiliyoruz. Form widgeti için kullanacağımız ile form içerisinde yer alan nesneleri kontrol edeceğiz. Bunun için GlobalKey oluşturup değişkene atıyoruz.

Key oluşturmak için aşağıdaki kodu MyApp class’ının hemen altına yazıyoruz.

3.Form widgetini çağırıp key verelim.

Burada yapacağımız işlem widget ağacına Form widgetini eklemek ve key vermek. Bunu yapmak için ilk adımda verdiğim kod bloğu içerisinde bulunan Column widgetini child parametresine Form widgetini veriyoruz. Daha sonra Form widgeti içerisine key yazıp bir önceki adımda oluşturduğumuz key değişkenini atıyoruz. Bu işlemlerden sonra kodlarımız aşağıdaki gibi olacaktır

4.Textformfield kontrolleri için TextEditingController ekleyelim.

Textleri kontrol edilmek adına TextEditingController özelliğini kullanmamız gerek. Bu controller ile textformfield içeriklerini kontrol edebileceğiz. Bu sayede textformfield’ler boş mu,içerisine yazılacak karakter sayısını karşılıyor mu gibi kontroller yapabileceğiz. TextEditingController kullanabilmek için onları değişkenlere atıyorum. Ben sadece iki adet textformfield kullandığım için kullanıcıadı ve şifre olmak üzre iki adet TextEditingController yaratıyorum. Bu değişkenleri key tanımladığımız alanın hemen altında oluşturuyorum. Kodlarımız böyle görünecek

5.Formumuza TextFormField ekleyelim.

Form widgetinin child parametresine dikeyde iki adet textformfield verebilmek adına Column widgeti tanımlıyorum. Bu Column widgetinin children parametresine de iki adet textformfield ekliyorum. Kodlarımızın son hali bu şekilde

6.Textformfield controller ekleyelim

İlk Textformfield widgetinin altına gelerek yukarıda tanımladığımız TextEditingController değişkenini atıyorum. Benim ilk textformfield’im kullanıcı adı alacağı için tfKullaniciAdi değişkenini textformfield’in controller parametresine atıyorum

Daha sonra bu textfieldin kullanıcı adına ait olduğunu göstermek için hintText ekliyorum

Kontrolleri yapabilmek için textfieldin validator parametresini kullanıyorum

7. Textformfiel validator kullanımı

Kontrolleri yapabilmek için textfieldin validator parametresini kullanıyorum. Validator parametresine bir isim veriyorum. Bu isimle textformfieldlerin kontrol edeceğim.

if (tfgirdisi.isEmpty) ile bu textfield boş mu onu kontrol ediyorum. Eğer boşsa bir hata mesajı dönderiyorum. Eğer sorun yoksa hata mesajı yerine null döndererek işleme devam ediyorum.

8.Şifre textformfield kontrolleri

Bir önceki textfield işlemlerinin aynısı yapıyorum. Burada değişen şeyler kaç karakter girildiği ve şifre textfieldi olduğu için girilen karakterlerin görünmemesini sağlıyorum. Kodlarımız aşağıdaki gibi olacaktır.

9.Butona basınca kontrollerin çalışması

Formumuzu oluşturduk ancak işlemlerin kontrolü için bir buton ekliyorum. Butona tıklanınca eğer ki form valid ise kullanıcı adı ve şifreyi konsola yazdıracaktır. Eğer ki hata olursa form üzerinde belirtecektir.Buton kodlarımızda aşağıdaki gibidir.

Uygulamanın ekran görüntüsü

TÜM KODLAR

Bir yazımızın daha sonuna geldik. Umarım sizler için faydalı olmuştur.

İyi çalışmalar dilerim =)

www.abdullahtas.net

Bilgisayar Programıcısı-AÖF Yönetim Bilişim Sistemleri/DART&FLUTTER

Bilgisayar Programıcısı-AÖF Yönetim Bilişim Sistemleri/DART&FLUTTER