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.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Column(
            children: [
            ],
          ),
        ),
      ),
    );
  }
}

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.

var formKey = GlobalKey<FormState>();

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

return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Column(
            children: [
              Form(         //<=== FORM WIDGET
                key: formKey,//<=== KEY
              )
            ],
          ),
        ),
      ),
    );
  }
}

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

var formKey = GlobalKey<FormState>();
var tfKullaniciAdi = TextEditingController();
var tfSifre = TextEditingController();

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

return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Column(
            children: [
              Form(
                key: formKey,
                child: Column(
                  children: [
                    TextFormField( //<== !!!
                      
                    ),
                    TextFormField( //<== !!!
                     
                    ),
                  
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

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

TextFormField(
                      controller: tfKullaniciAdi,
.....

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

TextFormField(
                      controller: tfKullaniciAdi,
                      decoration: InputDecoration(hintText: 'KULLANINICI ADI'),
......

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.

TextFormField(
                      controller: tfKullaniciAdi,
                      decoration: InputDecoration(hintText: 'KULLANINICI ADI'),
                      
                      validator: (tfgirdisi) { //<==!!!!!
                        if (tfgirdisi.isEmpty) {//<=== !!! Textformfield boş mu
                          return 'KULLANICI ADI GİRİNİZ';
                        }
                        return null; //<== eğer bir sorun devam etmesini sağlıyoruz
                      },
                    ),

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.

TextFormField(
                      controller: tfSifre,
                      obscureText: true, // <== KARAKTERLERİ ŞİFRELİYOR: *** 
                      decoration: InputDecoration(hintText: 'ŞİFRE'),
                      validator: (tfgirdisi) {
                        if (tfgirdisi.isEmpty) { //<== boş mu dolu mu
                          return 'ŞİFRENİZİ GİRİNİZ';
                        }
                        if (tfgirdisi.length < 6) { //<= girilen metnin karakter sayısı altıdan küçükse hata veriyor
                          return 'ŞİFRENİZ EN AZ 6 HANELİ OLMALIDIR';
                        }
                        return null;
                      },
                    ),

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.

RaisedButton(
                     child: Text('GİRİŞ'),
                     onPressed: (){
                       bool kontrolSonucu = formKey.currentState.validate(); // <== form valid ise geçerli yani true değerini alır değilse false değerini alır
                         if(kontrolSonucu){ //<== kontrol sonucu true ise konsola bilgileri yazdırır değilse controller çalışır hatayı ekranda gösterir
                           String kullaniciAdi = tfKullaniciAdi.text;
                           String sifre = tfSifre.text;
                           print('kullanıcı adı: $kullaniciAdi -Sifre: $sifre');
                         }
                     },
                   )

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

TÜM KODLAR

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  var formKey = GlobalKey<FormState>();
  var tfKullaniciAdi = TextEditingController();
  var tfSifre = TextEditingController(); 
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Column(
            children: [
              Form(
                key: formKey,
                child: Column(
                  children: [
                    TextFormField(
                      controller: tfKullaniciAdi,
                      decoration: InputDecoration(hintText: 'KULLANINICI ADI'),
                      
                      validator: (tfgirdisi) {
                        if (tfgirdisi.isEmpty) {
                          return 'KULLANICI ADI GİRİNİZ';
                        }
                        return null;
                      },
                    ),
                    TextFormField(
                      controller: tfSifre,
                      obscureText: true,
                      decoration: InputDecoration(hintText: 'ŞİFRE'),
                      validator: (tfgirdisi) {
                        if (tfgirdisi.isEmpty) {
                          return 'ŞİFRENİZİ GİRİNİZ';
                        }
                        if (tfgirdisi.length < 6) {
                          return 'ŞİFRENİZ EN AZ 6 HANELİ OLMALIDIR';
                        }
                        return null;
                      },
                    ),
                    RaisedButton(
                      child: Text('GİRİŞ'),
                      onPressed: (){
                        bool kontrolSonucu = formKey.currentState.validate();
                          if(kontrolSonucu){
                            String kullaniciAdi = tfKullaniciAdi.text;
                            String sifre = tfSifre.text;
                            print('kullanıcı adı: $kullaniciAdi -Sifre: $sifre');
                          }
                      },
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
//main.dart

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

İyi çalışmalar dilerim =)

www.abdullahtas.net