13.Flutter - Forms

Forms Flutter

Terkadang kita perlu mengambil informasi dari user menggunakan forms field, dimana pada saat user memasukkan informasi kita akan melakukan validasi dan menampilkan pesan validasi kepada user jika terjadi kesalahan sewaktu validasi dilakukan.

Membuat Form Dengan Validasi

Untuk membuat validasi pada form, langkah-langkahnya adalah sebagai berikut:

1. Buat sebuah Form dengan GlobalKey

Widget Form bertidak sebagai container untuk meng-grupkan dan memvalidasi field-field, ketika mebuat Form, buat juga GlobalKey, ini ditujukan untuk membuat Form menjadi unik, dan mengizinkan validasi pada form dilangkah selanjutnya. Perhatikan potongan kode berikut:

Final _formKey = GloblKey<FormState>();
Form (
    key: _formKey,
    child: ...
)

catatan: Menggunakan GlobakKey direkomendasikan untuk mengakses form. Akan tetapi, jika kita mempunyai widget tree yang kompleks, kita dapat menggunakan metode Form.of() untuk mengakses form didalam nested widget.

2. Tambahkan TextFormField dengan logika validasi

Setelah form dibuat, itu hanya bertindak sebagai container, sehingga tidak menyediakan apapun untuk user agar bisa menginput teks, oleh karena itu kita harus menambahkan widget TextFormField. Widge TextFormFelds merender material design text field dan dapat menampilkan pesan error jika validasi tidak valid.

Validasi dilakukan dengan menyediakan fungsi validator() ke TextFormFeld. Jika input user tidak valid, fungsi validator akan mengembalikan String berisi pesan error, jika input user valid maka validator haru mengembalian null. Perhatikan potongan kode berikut:

TextFormField ( 
    validator: (value) {
	if(valu.isEmpty) {
	    return ‘Input Text / Field Tidak Boleh Kosong’;
	}
	return null;
    },
);

3. Buat sebuah tombol untuk melakukan validasi dan kirim data.

Ketika user telah selesai memasukkan informasi (text) maka user akan menekan / tap tombol untuk mengirim informasi yang telah user isi, pada saat tombol ini ditekan kita bisa melakukan validasi pada TextFormFeld, Perhatikan potongan kode berikut:

RaisedButton(
    onPressed: () {
	if (_formKey.currentState.validate()) {
	    Scaffold.of(context).showSnackBar(SnackBar(content: Text(‘Validasi OK’)));
	}
    },
    child: Text(‘Proses’);
)

Penjelasan

Untuk melakukan validasi pada form, gunakan _formKey yang sudah dibuat. Kita bisa menggunaan metode _formKey.currentState() untuk mengakses FormState, yang diciptakan secara otomatis oleh Flutter ketika membuat Form.

Class FormState berisi metode validate(), ketika metode validate() dipanggil akan menjalankan fungsi validator() untuk setiap text field dalam form. Jika tidak ada kesalahan dalam artian validasi berjalan dengan baik, maka validate() mengembalikan nilai true. Jika TextField bersisi error, maka validate() akan membuat ulang forms dan menampilkan pesan error dan mengembalikan nilai false.

Full source code

Styling Text Field

Text fields mengizinkan user untuk melakukan input teks pada applikasi. Text Field digunakan untuk membuat form, mengirim pesan, membuat pencarian dan lain sebagainya, pada Flutter terdapat dua text fields yaitu:

1. TextField

TextField paling sering digunakan pada flutter, secara default dekorasi (tampilan) TextField berupa garis bawah (underline). Kita dapat menambahkan label, icon, hint text (pada html seperti palceholder), dan error teks dengan menyediakan IputDecoration sebagai property dari decoration pada TextField. Untuk menghapus decoration secara keseluruhan (termasuk underline dan spasi yang disediakan untuk label) isi nilai dari decoration dengan null.

TextField(
    decoration: InputDecoration(
	border: InputBorder.none,
	hintText: ‘Isi Username’,
    ),
);

2. TextFormField.

TextFormFeld membungkus TextField dan mengintegrasikannya dengan Form, sehingga menambah fungsionalitasnya seperti validasi dan integrasi dengan widget FormField lainnya.

TextFormFeld (
    decoration: InputDecoration (
	labelText: ‘Input Username’
    ),
);

Menangani Perubahan Nilai Pada TextField

Untuk mengambil nilai pada TextField ataupun TextformField pada saat ada perubahan dapat digunakan cara berikut:

a. Gunakan fungsi callback onChanged()

TextField(
	onChanged: (value) {
		print(“Nilai dari teks : $value”);
	},
);

b. Gunakan TextEditingController.

Cara ini lebih powerfull, tetapi lebih sedikit rumit, kita harus menggunaan TextEditingController sebagai property contoller dari TextField atau TextFormField.

Untuk mendapatkan notifikasi jika teks berubah, maka kita harus mendengarkan (listen) ke controller menggunakan metode addListener(), langkah-langkahnya adalah sebagai berikut:

1. Buat sebuah TextEditingController

final usernameController = TextEditingController();

2. Hubungan TextEditingController ke TextField

TextField(
	controller: usernameController,
)

3. Buat fungsi untuk mencetak nilainya

void _cetakNilai() {
  print(“Nilai dari Teks: ${usernameContrller.text}”);
}

4. Listen ke controller untuk mendapatkan notifikasi perubahan.

void initState() {
	super.initState();
	// Start listening to changes.
	myController.addListener(_printLatestValue);
}

full source code