Flutter’da Validation İle Login Ekranı Yapımı

Herkese merhabalar, bugünkü yazımda form validation işlemlerinin nasıl yapıldığından bahsedeceğim.

Önce kullanacağımız state’leri ve modelimizi tanımlayalım.

GlobalKey’ler, kullanılan bir sınıfa key olarak atandığında o sınıfın özelliklerini başka bir sınıfta kullanabilmemizi sağlar.

Formdaki girilen input’lara başka sınıflardan ulaşabilmek amacıyla formState adında GlobalKey tanımladım.

“isAutoValidate” state’ini ekran ilk açıldığında false olarak tanımladım. Böylece butona tıklanana kadar auto validate özelliğini kapatmış oldum.

Ve ekranımızı çizelim.

Ekranımızı çizerken form elemanlarını Form sınıfı ile sarmalıyorum ve “formState” key’imizi ve “isAutoValidate” state’imizi burada veriyorum.

TextFormField sınıfının içinde bulunan validator field’ı yardımı ile e-mail validation işlemini yaptım.

Burada paramatre olarak gelen value’nun type’ı String’dir ve Dart’ta String’in contains diye bir methodu bulunur. Bu methodun içine tanımladığımız regex değeri sayesinde mail’imizin uygun olup olmadığını denetledim. Eğer girilen değer uygunsa contains methodu true dönüyor biz de validator field’ına null gönderiyoruz. Eğer uygun değilse “Invalid E-mail” stringini gönderiyoruz. Burada gönderdiğimiz String değeri form field’ımızın altında uyarı mesajı olarak görünür.

“onSaved” methodu ise daha sonra butona tıklandığında, çağıracağımız save methodunda yapılacak işleri tanımlamamızı sağlıyor. Girilen value’yu trim işleminden geçirdikten sonra modelimizin email’ine atamasını yapıyoruz.

Tıpkı e-mail field’ında olduğu gibi şifre için de gerekli işlemleri yapıyoruz.

Ve submit butonumuzun onPressed özelliğini kullanarak formState key’i sayesinde formumuzun uygun olup olmadığını denetliyoruz. Eğer uygun değilse yukarıda belirlediğim hata mesajlarımız görünür hale geliyor.

Zaman ayırıp okuduğunuz için teşekkür ederim.

Github Reposu: https://github.com/VBT-Intership/EvrenV-FlutterLogin