Dynamic Form Generator
Dinamik formlar oluşturmak için kullanabileceğiniz esnek ve kullanımı kolay bir Flutter paketi. Bu paket sayesinde form alanlarını kısa veya detaylı tanımlamalarla belirtebilir, stil özelleştirmeleri yapabilir ve form alanlarını istediğiniz gibi düzenleyebilirsiniz.
Özellikler
- Esnek Alan Tanımlamaları: Kısa veya uzun tanımlamalarla form alanları oluşturabilirsiniz.
- Stil Özelleştirmeleri: Global veya alan bazlı stil uygulayabilirsiniz.
- Alanları Yan Yana Yerleştirme: Form alanlarını gruplandırarak yan yana yerleştirebilirsiniz.
- Desteklenen Alan Tipleri: Metin, e-posta, şifre, sayı, onay kutusu ve açılır liste alanları.
- Doğrulama Mekanizması: Zorunlu alanlar ve basit doğrulama kuralları ile kullanıcı girdilerini kontrol edebilirsiniz.
- Kullanım Kolaylığı: Widget içinde doğrudan form alanlarını tanımlayarak hızlıca formlar oluşturabilirsiniz.
Kurulum
pubspec.yaml
dosyanıza aşağıdaki satırı ekleyin:
dependencies:
dynamic_form_generator:
git:
url: https://github.com/kullaniciadi/dynamic_form_generator.git
Ardından terminalde aşağıdaki komutu çalıştırın:
flutter pub get
Kullanım
import 'package:flutter/material.dart';
import 'package:dynamic_form_generator/dynamic_form_generator.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// Form alanlarını tanımlıyoruz
final List<dynamic> formFields = [
[
't:Adınız?required&hint=Adınızı girin&style={"color":"#0000FF"}',
't:Soyadınız?required&hint=Soyadınızı girin&style={"color":"#008000"}',
],
'e:Email?required',
'p:Şifre?required',
'n:Yaş?hint=18',
'd:Cinsiyet=Erkek,Kadın,Diğer?required',
'c:Kullanım koşullarını kabul ediyorum?required',
];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dinamik Form Örneği',
home: Scaffold(
appBar: AppBar(
title: Text('Dinamik Form Örneği'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: DynamicFormGenerator(
fields: formFields,
onSubmit: (formData) {
// Form gönderildiğinde yapılacak işlemler
print('Form Verileri: \$formData');
},
fieldDecoration: InputDecoration(
filled: true,
fillColor: Colors.grey[200],
border: OutlineInputBorder(),
),
textStyle: TextStyle(fontSize: 16),
),
),
),
);
}
}
Form Verilerine Erişim
DynamicFormGenerator
widget'ının onSubmit callback fonksiyonu aracılığıyla form verilerine kolayca erişebilirsiniz. Form başarıyla doğrulandıktan ve gönderildikten sonra bu fonksiyon çağrılır ve form alanlarının değerlerini içeren bir Map<String, dynamic>
parametresi alır.
Örnek:
onSubmit: (formData) {
String adiniz = formData['Adınız'];
String email = formData['Email'];
String sifre = formData['Şifre'];
// Form verilerini kullanarak işlemler yapabilirsiniz
},
Açıklamalar:
- formData: Form alanlarının isimlerini (label) anahtar olarak kullanan ve kullanıcıdan alınan değerleri içeren bir harita (
Map<String, dynamic>
) yapısıdır. - Alan Değerlerine Erişim: Örneğin,
'Adınız'
alanının değerineformData['Adınız']
ile erişebilirsiniz.
Alan Tanımlamaları
Form alanlarını tanımlamak için aşağıdaki söz dizimini kullanabilirsiniz:
alanTipi:Label[=Seçenekler][?Özellikler]
Desteklenen Alan Tipleri
t
(text): Metin girişie
(email): E-posta girişip
(password): Şifre girişin
(number): Sayısal girdic
(checkbox): Onay kutusud
(dropdown): Açılır liste
Açılır liste
Özellikler
required
: Alanı zorunlu yapar.hint=Değer
: Alanın placeholder değerini belirler.style={"özellik":"değer"}
: Alanın yazı stilini belirler (örneğin, renk, font boyutu).decoration={"özellik":"değer"}
: Alanın dekorasyonunu belirler (örneğin, doldurma rengi, border).
Örnekler:
't:Adınız?required&hint=Lütfen adınızı girin'
'e:Email?required'
'p:Şifre?required'
'n:Yaş?hint=18'
'd:Cinsiyet=Erkek,Kadın,Diğer?required'
'c:Kullanım koşullarını kabul ediyorum?required'
Alanları Yan Yana Yerleştirme
Form alanlarını yan yana yerleştirmek için alanları iç içe liste içinde tanımlayabilirsiniz:
final List<dynamic> formFields = [
[
't:Adınız',
't:Soyadınız',
],
'e:Email',
// Diğer alanlar
];
Bu yapı sayesinde Adınız
ve Soyadınız
alanları yan yana görüntülenecektir.
Stil Özelleştirmeleri
Global Stil
DynamicFormGenerator
widget'ına fieldDecoration
ve textStyle
parametreleri ekleyerek tüm alanlara uygulanacak genel stil belirleyebilirsiniz.
Örnek:
DynamicFormGenerator(
fields: formFields,
onSubmit: (formData) {
// İşlemler
},
fieldDecoration: InputDecoration(
filled: true,
fillColor: Colors.grey[200],
border: OutlineInputBorder(),
),
textStyle: TextStyle(fontSize: 16),
)
Alan Bazlı Stil
Her bir form alanı için özel stil belirtebilirsiniz. Bunun için alan tanımında style
ve decoration
parametrelerini kullanabilirsiniz.
Örnek:
't:Adınız?style={"color":"blue","fontSize":18}'
Desteklenen Stil Özellikleri:
- color: Renk değeri (isim veya hex kodu)
- fontSize: Yazı boyutu
- fontWeight: Yazı kalınlığı (
"bold"
veya"normal"
) - fontStyle: Yazı stili (
"italic"
veya"normal"
)
Renk Değerleri:
- Renk isimleri:
red
,blue
,green
,black
,white
,grey
- Hex kodları:
#FF5733
,#008000
vb.
Doğrulama Mekanizması
Form alanlarını zorunlu yapmak ve basit doğrulama kuralları eklemek için required
özelliğini kullanabilirsiniz.
Örnek:
'e:Email?required'
E-posta alanı için basit bir doğrulama yapılır ve @
karakterinin varlığı kontrol edilir.
Örnek Tam Form Tanımı
final List<dynamic> formFields = [
[
't:Adınız?required&hint=Adınızı girin&style={"color":"#0000FF"}',
't:Soyadınız?required&hint=Soyadınızı girin&style={"color":"#008000"}',
],
'e:Email?required',
'p:Şifre?required',
'n:Yaş?hint=18',
'd:Cinsiyet=Erkek,Kadın,Diğer?required',
'c:Kullanım koşullarını kabul ediyorum?required',
];
Paket Geliştirme ve Test Etme
-
Paket Klasörüne Gidin:
cd dynamic_form_generator
-
Bağımlılıkları Yükleyin:
flutter pub get
-
Örnek Uygulamayı Çalıştırın:
cd example flutter run
Katkıda Bulunma
Eğer bu pakete katkıda bulunmak isterseniz, GitHub üzerinden pull request gönderebilirsiniz. Yeni özellikler, hata düzeltmeleri ve önerileriniz için teşekkür ederiz.
Lisans
Bu proje MIT Lisansı ile lisanslanmıştır.
İletişim
Herhangi bir sorunuz veya öneriniz varsa, lütfen GitHub Issues üzerinden bizimle iletişime geçin.
Teşekkürler
Bu paketi kullanmayı tercih ettiğiniz için teşekkür ederiz! Umarız projenizde size yardımcı olur.
Sıkça Sorulan Sorular (SSS)
1. Desteklenen alan tipleri nelerdir?
Metin (t
veya text
), E-posta (e
veya email
), Şifre (p
veya password
), Sayı (n
veya number
), Onay Kutusu (c
veya checkbox
), Açılır Liste (d
veya dropdown
)
2. Form alanlarını nasıl yan yana yerleştirebilirim?
Form alanlarını yan yana yerleştirmek için alanları iç içe liste içinde tanımlayabilirsiniz. Örneğin:
[
[
't:Adınız',
't:Soyadınız',
],
'e:Email',
]
3. Stil özelleştirmelerini nasıl yapabilirim?
Global Stil: DynamicFormGenerator
widget'ına fieldDecoration
ve textStyle
parametreleri ekleyerek tüm alanlara uygulanacak genel stili belirleyebilirsiniz.
Alan Bazlı Stil: Alan tanımlarında style
ve decoration
parametreleri ile özel stil belirtebilirsiniz.
4. Özel doğrulama kuralları ekleyebilir miyim?
Şu an için paket basit doğrulama kurallarını desteklemektedir. Gelecekteki sürümlerde özel doğrulama fonksiyonları ekleme özelliği planlanmaktadır.
5. Paket açık kaynak mı?
Evet, bu paket açık kaynaklıdır ve MIT Lisansı ile lisanslanmıştır.
Feedback
Her türlü geri bildiriminiz bizim için değerlidir. Lütfen görüşlerinizi bizimle paylaşın ve paketi geliştirmemize yardımcı olun.
Kısaca
Dynamic Form Generator paketi ile Flutter projelerinizde dinamik ve özelleştirilebilir formlar oluşturmak artık çok kolay. Esnek yapısı ve kullanım kolaylığı sayesinde zaman kazanacak ve daha verimli çalışacaksınız.
Teşekkürler ve iyi kodlamalar!