Tutorial Flutter — Validation
Belajar membuat validasi dengan Flutter
Halo semua! Jeremy disini dan pada artikel kali ini kita akan belajar mengenai validasi di Flutter. Ohiya temen-temen, tutorial ini berlanjut dari Tutorial sebelumnya yaitu Styling Component. Jadi bagi temen-temen yang belum mencobanya maka diharapkan coba dulu agar ngga bingung ya!
Nah, Validasi atau Validitas menurut KBBI adalah “sifat benar menurut bahan bukti yang ada, logika berpikir, atau kekuatan hukum” atau ” sifat valid”. Tapi di dalam programming validasi adalah proses untuk menentukan data yang di-input oleh pengguna agar sesuai dengan sistem yang dibuat.
Sekarang buka kembali project kalian yang kita buat sebelumnya tentang Login. Setelah di buka, tekan anak panah di kiri bagian scaffold untuk menyebunyikan isi scaffold, lalu block dari bawah keatas hingga widget scaffold.
Copy (CTRL + C) lalu hapus bagian Scaffold. Setelah dihapus lalu ganti dengan FirstPages() (pasti akan bergaris merah).
Setelah itu buat file baru dan beri nama firstPage.dart .
Lalu buat kembali stateful widget (ketik stl dan tekan Ctrl + space). Setelah itu isi dengan nama “FirstPages”. Karena di statefulnya merah, silahkan klik pada text yang merah, dan tekan Ctrl + . (titik) dan pilih material.dart .
Jika sudah, tinggal ganti Container di dalamnya dengan Scaffold kalian tadi(tanpa menghapus titik komanya).
Jangan lupa kembali ke bagian main.dart, karena di sana masih ada yang merah. Lakukan seperti tadi dengan menekan Ctrl + .(titik) di sana.
Jadi disini kita memisahkan isi widget tadi dan menempatkannya ke Class baru.
Mengapa harus dipisah? Jika kita menaruh semua widget itu dalam 1 kelas/ lebih tepatnya berada langsung didalam kelas MyApp, tentu saja akan terlalu padat. Pada pemrograman di dunia pekerjaan, kita harus memecah penggunaan widget berdasarkan fungsinya, sehingga widget itu dapat bersifat dinamis atau digunakan berulang-ulang pada class lainnya.
Sekarang kita lanjutkan tutorial validasinya. Dan sekarang permainan kita berada didalam firstPage.dart
Kita tambah baris ini, diatas class _FirstPagesState
final _formKey = GlobalKey<FormState>();Codenya seperti ini:
GlobalKey digunakan untuk memberikan kunci yang unik pada widget (khusus jenis stateful widget). Ketika kita membuat kunci pada widget yang ada pada stateful widget, kita dapat menjalankan method yang ada di dalam widget tersebut. Maksudnya adalah, apabila kita menggunakan formKey maka kita bisa mendeteksi behavior atau aktivitas pengguna didalam fungsi onPress.
Contoh method dalam FormState yang bisa digunakan untuk memeriksa validasinya adalah validate.
Kita akan membungkus isi Column kita dengan widget Form. Form digunakan sebagai widget untuk mendapatkan behavior atau fungsi didalam input text.
Pada Column yang berisi TextFormField, disamping kanan akan ada anak panah untuk menyembunyikan isi didalam Column tersebut. Pencet lalu bungkus dengan Child: Form() dan tambah property Key:_formKey.
Kemudian pergi ke TextFormField, dan tambah property validator (TextFormField yang dimaksud ke-dua — duanya. Ketikkan validator di keduanya).
.........
validator: (String value){
//if statement
}
..........Ketika pengguna memasukkan teks pada TextFormField, parameter “value” dalam validator akan menerima input tersebut lalu memeriksanya di dalam if statement.
If statement ini akan melakukan validasi apakah input nya sesuai atau tidak. Contohnya adalah apabila kita ingin mengecek apakah user udah mengisi TextFormField atau belum. Maka syntaxnya di dalam validator / parameter tersebut adalah sebagai berikut:
...............
if (value.isEmpty) {
return 'Enter some text';
}
return null;
.........Codenya akan seperti ini:
Kemudian pada di FlatButton, tambahkan syntax ini di dalam onPress supaya validasinya berfungsi.
............
onPressed:(){
if (_formKey.currentState.validate()) {}
return false;
}
................Codenya akan seperti ini:
Jika TextFormField kosong, maka TextFormField akan memunculkan kalimat ‘Enter some text’ seperti ini.
Atau jika kita ingin memvalidasi length (jumlah karakter) dalam TextFormField, kita bisa menambahkannya dengan else if seperti ini:
...............
if (value.isEmpty) {
return 'Enter some text';
}else if (value.length > 7)
{
return 'too much';
}
return null;
.........Hasilnya akan seperti ini:
Di flutter atau didalam bahasa programming lainnya, kita bisa membuat validasi dengan menggunakan regex atau di sebut regular expression.
Regular expression adalah template untuk data berdasarkan pola tertentu, terutama untuk kasus-kasus kompleks. Dan sebetulnya lebih sering digunakan untuk mecari kode/kata — kata sulit yang tidak bisa sekedar menggunakan kondisi == atau !=.
Pertama, kita tentukan dulu “format” untuk mencocokkan input user. Kita buat dulu variable regexnya seperti ini.
RegExp regx = RegExp(r"^[a-z0-9_]*$",caseSensitive: false);Bingung naruhnya dimana? Taruh saja kode diatas dibawah variable _formKey yang telah dibuat.
Di Flutter, “class” regex, dinamakan “RegExp”. Lalu kita buat formatnya seperti di dalam kurung di atas. Yang dibahas pada tutorial ini hanyalah caseSensitive saja dimana fungsinya untuk mengatur sensitifitasnya.
Jika caseSensitivenya true, tingkat sensitivenya tinggi dan apapun yang di masukkan user adalah salah.
Pada regex/regular expression diatas, kurung siku ( simbol [] ) digunakan untuk menentukan karakter apa saja yang boleh ada di dalamnya.
a-z : artinya semua alfabet kecil diperbolehkan.
A-Z : artinya semua alfabet besar diperbolehkan.
0–9 : artinya semua huruf diperbolehkan.
^ dan $ : hanya sebagai penanda awal(^) dan akhir($)
Lambang bintang (*) memperbolehkan kemunculan pola sebanyak 0 (kosong) atau lebih. Untuk lebih jelasnya kalian bisa buka video ini atau web ini
Lalu tambahkan syntax ini di bagian password;
.......
else if (!(regx.hasMatch(value))){
return 'Dont use special character';
}
.......Dan jika kalian memasukkan karakter khusus, hasilnya seperti ini:
Kalian juga bisa mengatur keyboard pengguna untuk menspesifikasi format input, ketika user ingin memasukkan text/lainnya.
Misalkan, Jika kalian hanya ingin user memasukkan angka, maka kita bisa mengaturnya dengan menggunakan property keyboardType. Ketik keyboardType di dalam TextFormField. Fungsinya adalah keyboard yang digunakan oleh pengguna akan berubah sesuai kebutuhan kita.
Masih bingung? Nih contohnya.
Diatas adalah gambar keyboard tipe email, kita bisa melihat ada tombol ‘@’ disamping spasi karena untuk memudahkan kita memasukkan email.
Berikutnya ada tipe keyboard angka.
Nah kalo pengen pengguna hanya menginput angka cukup masukkan aja tipe keyboard angka.
Gimana caranya? Nih kodenya dibawah.
keyboardType:......Masukkan tipe email address untuk kolom email ya!
.........
keyboardType:TextInputType.emailAddress,
.......Tapi kalian bisa menentukan dengan keyboard lain untuk user dengan mengganti “emailAddress” di atas dengan pilihan berikut:
- datetime (Format tanggal dan waktu)
- number (Format angka)
- phone (Format nomor telfon)
- text (Format teks)
- url (Format url seperti http://facebook.com)
- multiline (Format teks lebih dari satu garis, biasanya digunakan untuk memasukkan teks yang sangat panjang. contoh: alamat)
Ohiya, password kita kan belum bintang-bintang ya alias format password di input teks. Gimana caranya? Gampang, tambahkan attribute obscureText pada TextFormField di password.
obscureText: trueCodenya seperti ini:
Setelah itu dijamin password kalian akan bintang-bintang kaya gambar dibawah ini.
Berhubung bang Hudya adalah editor di Medium Komandro maka saya masukkin aja deh nama Hudya Keren biar beliau seneng.
Sudah selesai! Demikian untuk validasi kali ini.
Intinya validasi dilakukan jika kalian ingin mengatur input dari pengguna. Sekian kali ini terima kasih.
Sekarang saatnya kamu mencoba untuk kulik sendiri dengan mengganti tipe keyboard maupun validasi yang membuatnya lebih baik.
Exercise
Kerjakan exercise berikut apabila kamu kebingungan dengan data apa yang kamu harus kulik.
- Buat validasi email dengan jumlah digit minimal 3 dan maksimal 100.
- Buat validasi email harus menggunakan format email (gunakan Regex, cari dan browsing untuk formatnya)
- Buat validasi password minimal 6 kata dan maksimal 50 kata.
- Buat validasi password wajib menggunakan kombinasi huruf dan angka.
Apabila sudah selesai jangan lupa dikirimkan ke Google Classroom Kelas Android ya!
Happy Coding! ^^
