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