Flutter Form Widgeti Kullanımı
Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda Form widgetini anlatacağım. Hadi başlayalım !
Table of Contents
Flutter, modern mobil uygulama geliştirme için Google tarafından oluşturulmuş bir framework’tür. Flutter’ın güçlü ve esnek form widget’ları, kullanıcılara kullanıcı arayüzü tasarlama ve veri girişi işlemlerini kolaylaştırma konusunda büyük avantajlar sağlar.
Bu makalede, Flutter form widget’larının özellikleri ve kullanımları hakkında bilgi vereceğim ve her bir özelliğin kullanımını kod örnekleriyle açıklayacağım.
Form Widget Nedir?
Flutter’da Form widget, kullanıcının veri girişi yapabileceği bir form arayüzü oluşturmak için kullanılır. Form widget’ı, formları oluşturmak için kullanabileceğimiz birçok farklı widget’ı bir araya getirir. Ayrıca formun doğruluğunu kontrol etmek için de kullanılabilir.
TextFormField
TextFormField, kullanıcının metin girmesine olanak tanıyan bir widget’tır. TextFormField, bir dizi özellik sunar ve özelleştirilebilir. Aşağıdaki örnek, bir kullanıcının adını girmesine izin veren basit bir Text Form Field’dir.
TextFormField(
decoration: InputDecoration(
labelText: 'Adınız',
),
)
Yukarıdaki kod, bir Text Form Field oluşturur ve “Adınız” etiketi ekler.
FormFieldValidator
FormFieldValidator, bir FormField’in doğruluğunu kontrol etmek için kullanılır. FormFieldValidator, kullanıcının girdiği değere bağlı olarak geri dönen bir metot olmalıdır. Aşağıdaki örnek, Text Form Field’in doğruluğunu kontrol eder ve bir hata mesajı döndürür.
TextFormField(
decoration: InputDecoration(
labelText: 'Adınız',
),
validator: (value) {
if (value.isEmpty) {
return 'Lütfen adınızı giriniz.';
}
return null;
},
)
Yukarıdaki kod, kullanıcının bir değer girip girmediğini kontrol eder. Eğer kullanıcı bir değer girmezse, “Lütfen adınızı giriniz.” mesajını döndürür. Aksi takdirde null döndürür.
Form
Form widget’ı, FormField widget’larını bir araya getirir ve doğruluğunu kontrol eder. Aşağıdaki örnek, bir Form widget’ı oluşturur ve içine iki Text Form Field ekler.
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Adınız',
),
validator: (value) {
if (value.isEmpty) {
return 'Lütfen adınızı giriniz.';
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
labelText: 'Soyadınız',
),
validator: (value) {
if (value.isEmpty) {
return 'Lütfen soyadınızı giriniz.';
}
return null;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
// form doğrulandı
}
},
child: Text('Gönder'),
),
],
),
);
}
Yukarıdaki kod, bir Form widget’ı oluşturur ve iki Text Form Field içerir. Ayrıca, “Gönder” adlı bir buton ekler. Butona basıldığında, _formKey anahtarını kullanarak formun doğruluğunu kontrol eder. Eğer form doğruysa, verileri işleyebilirsiniz.
TextFormField Initial Value
TextFormField’un başlangıç değerini belirlemek için, initialValue özelliğini kullanabilirsiniz. Aşağıdaki örnek, Text Form Field’in başlangıç değerini belirler.
TextFormField(
decoration: InputDecoration(
labelText: 'Adınız',
),
initialValue: 'John',
)
Yukarıdaki kod, bir Text Form Field oluşturur ve “John” başlangıç değerini ayarlar.
Form Resetleme
Bir Form’un içindeki tüm FormField widget’larının değerlerini sıfırlamak için, reset() yöntemini kullanabilirsiniz. Aşağıdaki örnek, bir Form widget’ı oluşturur ve içinde iki Text Form Field ve bir “Sıfırla” adlı bir buton ekler.
final _formKey = GlobalKey<FormState>();
TextEditingController _nameController = TextEditingController();
TextEditingController _surnameController = TextEditingController();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Adınız',
),
controller: _nameController,
validator: (value) {
if (value.isEmpty) {
return 'Lütfen adınızı giriniz.';
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
labelText: 'Soyadınız',
),
controller: _surnameController,
validator: (value) {
if (value.isEmpty) {
return 'Lütfen soyadınızı giriniz.';
}
return null;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
// form doğrulandı
}
},
child: Text('Gönder'),
),
ElevatedButton(
onPressed: () {
_formKey.currentState.reset();
_nameController.clear();
_surnameController.clear();
},
child: Text('Sıfırla'),
),
],
),
);
}
Yukarıdaki kod, bir Form widget’ı oluşturur ve iki Text Form Field içerir. Ayrıca, “Gönder” ve “Sıfırla” adlı iki buton ekler. “Sıfırla” butonuna tıklandığında, formun içindeki tüm alanlar sıfırlanır.
Focus Node
TextFormField’a bir focus node ekleyerek, kullanıcıların FormField’a tıklayarak doğrudan o alana girmesine izin verebilirsiniz. Aşağıdaki örnek, iki Text Form Field’ı olan bir Form widget’ı oluşturur. İlk Text Form Field’a tıkladığınızda, o alanın içine odaklanır ve klavye açılır.
final _formKey = GlobalKey<FormState>();
FocusNode _nameFocusNode = FocusNode();
FocusNode _surnameFocusNode = FocusNode();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Adınız',
),
focusNode: _nameFocusNode,
validator: (value) {
if (value.isEmpty) {
return 'Lütfen adınızı giriniz.';
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
labelText: 'Soyadınız',
),
focusNode: _surnameFocusNode,
validator: (value) {
if (value.isEmpty) {
return 'Lütfen soyadınızı giriniz.';
}
return null;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
// form doğrulandı
}
},
child: Text('Gönder'),
),
],
),
);
}
Yukarıdaki kod, bir Form widget’ı oluşturur ve iki Text Form Field içerir. Ayrıca, her bir Text Form Field’a bir focus node ekler. Bu focus node’lar, kullanıcıların doğrudan FormField’a tıklayarak o alana girmesine izin verir.
TextEditingController
TextFormField’un içindeki metin, bir TextEditingController kullanarak kontrol edilebilir. Aşağıdaki örnek, bir Text Form Field’ı oluşturur ve metnin içeriğini bir TextEditingController kullanarak kontrol eder.
final _formKey = GlobalKey<FormState>();
TextEditingController _nameController = TextEditingController();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Adınız',
),
controller: _nameController,
validator: (value) {
if (value.isEmpty) {
return 'Lütfen adınızı giriniz.';
}
return null;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
// form doğrulandı
print(_nameController.text);
}
},
child: Text('Gönder'),
),
],
),
);
}
Yukarıdaki kod, bir Form widget’ı oluşturur ve bir Text Form Field içerir. Ayrıca, bir TextEditingController kullanarak metnin içeriğini kontrol eder. Form doğrulandığında, metnin içeriği yazdırılır.
Wrap-up
Flutter’da Form widget’ı, kullanıcı girdilerini toplamak için kullanışlı bir araçtır. Form widget’ı birçok form elemanı içerebilir, bunlar TextFormField, Checkbox, Radio, Switch gibi öğeler olabilir. Ayrıca, formu doğrulamak için kolayca bir validator ekleyebilirsiniz.
Ayrıca, form elemanlarına focus node ekleyebilir ve kullanıcıların doğrudan o alana tıklayarak girmesine izin verebilirsiniz. Metnin içeriğini kontrol etmek için TextEditingController kullanabilirsiniz.
Form widget’ı, kullanıcı girdilerini toplamak ve doğrulamak için kullanışlı bir araçtır. Flutter’da form oluşturma ile ilgili daha fazla bilgi için Flutter resmi belgelerine bakabilirsiniz.
Evet Form widgeti bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.
