[Flutter][43] Form (Bagian 4) Form Validation

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Tuesday, 29 Oct 2019

Hello world,

Form validation berfungsi untuk memastikan pengguna mengisi data sesuai dengan ketentuan. Hal ini sangat penting karena tidak semua pengguna rela menghabiskan waktunya untuk mengisi form yang mungkin cukup banyak pada kasus tertentu. Pada kondisi tertentu form validation setidaknya dapat memastikan pengguna mengisi data yang wajib diisi, atau memastikan isian form sesuai dengan ketentuan seperti maksimal angka, maksimal huruf dan lain-lain.

Nah untuk pembahasan kali ini saya hanya membahas bagaimana membuat form yang wajib diisi (required). Yang kita gunakan kali ini adalah widget Form dan TextFormField.

Tahap 1. Penggunaan Form

Penggunaan widget Form di sini masih sama seperti widget lainnya. Ikuti contoh berikut:

import 'package:flutter/material.dart';

class ContohForm extends StatefulWidget {
@override
_ContohFormState createState() => _ContohFormState();
}

class _ContohFormState extends State<ContohForm> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Contoh Form"),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: Form(
child: ListView(
children: <Widget>[
//widget textformfield di sini
],
),
),
),
);
}
}

Di dalam form kita isi dengan ListView atau ScrollView agar dapat diisi dengan lebih dari satu textfield.

Tahap 2. Tambahkan Key

Key ini akan digunakan pada widget Form dan akan berfungsi pada semua textfield yang ada dalam child dari widget Form.

final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();

Lalu tambahkan key pada widget Form.

import 'package:flutter/material.dart';

class ContohForm extends StatefulWidget {
@override
_ContohFormState createState() => _ContohFormState();
}

class _ContohFormState extends State<ContohForm> {
final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Contoh Form"),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: Form(
key: _formKey,
child: ListView(
children: <Widget>[
TextFormField(

),
],
),
),
),
);
}
}

Tahap 3. Gunakan Validator

Langkah terakhir adalah menggunakan validator pada textfield yang diinginkan. Contohnya sebagai berikut:

TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Textfield wajib diisi bro';
}
return null;
},
),

Jika kita menggunakan validator maka kita tidak memperbolehkan textfield dikosongkan (wajib diisi). Fungsi ini bekerja sebagai tanda apakah textfield tersebut sudah terisi atau belum. Jika belum terisi maka akan ditampilkan keterangan "Textfield ini wajib diisi bro".

selanjutnya pada tombol submit harus kita tambahkan kode sebagai berikut:

RaisedButton(
child: Text(
"Submit",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
onPressed: () {
if (_formKey.currentState.validate()) {
//event /Future/void
}

},
),

Fungsi ini hanya bekerja jika dipastikan textfield yang wajib diisi tidak ada yang kosong sehingga event tidak akan dipanggil jika masih ada textfield yang kosong.

Cukup sederhana bukan?
Selamat mencoba :)