InputField

Giriş

InputField widget'ı, Nylo Website'nun aşağıdaki özelliklere yerleşik destekli geliştirilmiş metin alanıdır:

• Özelleştirilebilir hata mesajlarıyla doğrulama
• Şifre görünürlük geçişi
• Giriş maskeleme (telefon numaraları, kredi kartları vb.)
• Başlık ve alt bilgi widget'ları
• Temizlenebilir giriş
• Durum yönetimi entegrasyonu
• Geliştirme için sahte veriler

Temel Kullanım

final TextEditingController _controller = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: InputField(
          controller: _controller,
          labelText: "Username",
          hintText: "Enter your username",
        ),
      ),
    ),
  );
}

Doğrulama

Doğrulama kuralları eklemek için formValidator parametresini kullanın:

InputField(
  controller: _controller,
  labelText: "Email",
  formValidator: FormValidator.rule("email|not_empty"),
  validateOnFocusChange: true,
)

Kullanıcı odağı alandan çektiğinde alan doğrulanacaktır.

Özel Doğrulama İşleyicisi

Doğrulama hatalarını programatik olarak yönetin:

InputField(
  controller: _controller,
  labelText: "Username",
  formValidator: FormValidator.rule("not_empty|min:3"),
  handleValidationError: (FormValidationResult result) {
    if (!result.isValid) {
      print("Error: ${result.getFirstErrorMessage()}");
    }
  },
)

Tüm kullanılabilir doğrulama kurallarını Doğrulama dokümantasyonunda bulabilirsiniz.

InputField.password

Gizli metin ve görünürlük geçişi ile önceden yapılandırılmış şifre alanı:

final TextEditingController _passwordController = TextEditingController();

InputField.password(
  controller: _passwordController,
  labelText: "Password",
  formValidator: FormValidator.rule("not_empty|min:8"),
)

Şifre Görünürlüğünü Özelleştirme

InputField.password(
  controller: _passwordController,
  passwordVisible: true, // Show/hide toggle icon
  passwordViewable: true, // Allow user to toggle visibility
)

InputField.emailAddress

E-posta klavyesi ve otomatik odaklanma ile önceden yapılandırılmış e-posta alanı:

final TextEditingController _emailController = TextEditingController();

InputField.emailAddress(
  controller: _emailController,
  formValidator: FormValidator.rule("email|not_empty"),
)

InputField.capitalizeWords

Her kelimenin ilk harfini otomatik olarak büyük yapar:

final TextEditingController _nameController = TextEditingController();

InputField.capitalizeWords(
  controller: _nameController,
  labelText: "Full Name",
)

Giriş Maskeleme

Telefon numaraları veya kredi kartları gibi biçimlendirilmiş veriler için giriş maskeleri uygulayın:

// Phone number mask
InputField(
  controller: _phoneController,
  labelText: "Phone Number",
  mask: "(###) ###-####",
  maskMatch: r'[0-9]',
  maskedReturnValue: false, // Returns unmasked value: 1234567890
)

// Credit card mask
InputField(
  controller: _cardController,
  labelText: "Card Number",
  mask: "#### #### #### ####",
  maskMatch: r'[0-9]',
  maskedReturnValue: true, // Returns masked value: 1234 5678 9012 3456
)

Başlık ve Alt Bilgi

Giriş alanının üstüne veya altına widget'lar ekleyin:

InputField(
  controller: _controller,
  labelText: "Bio",
  header: Text(
    "Tell us about yourself",
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
  footer: Text(
    "Max 200 characters",
    style: TextStyle(color: Colors.grey, fontSize: 12),
  ),
  maxLength: 200,
)

Temizlenebilir Giriş

Alanı hızlıca boşaltmak için bir temizleme düğmesi ekleyin:

InputField(
  controller: _searchController,
  labelText: "Search",
  clearable: true,
  clearIcon: Icon(Icons.close, size: 20), // Custom clear icon
  onChanged: (value) {
    // Handle search
  },
)

Durum Yönetimi

Programatik olarak kontrol etmek için giriş alanınıza bir durum adı verin:

InputField(
  controller: _controller,
  labelText: "Username",
  stateName: "username_field",
)

Durum Eylemleri

// Clear the field
InputField.stateActions("username_field").clear();

// Set a value
updateState("username_field", data: {
  "action": "setValue",
  "value": "new_value"
});

Parametreler

Ortak Parametreler

Stil Parametreleri

Maskeleme Parametreleri

Özellik Parametreleri