Form merupakan hal yang umum ditemukan dan penting dalam sebuah aplikasi mobile. Penggunaan form juga sangat beragam, dari mulai untuk form login, register, kolom komentar, halaman order, dan banyak lagi. Karena pentingnya memahami penggunaan form pada sebuah aplikasi mobile, untuk itu dalam kesempatan ini kita akan membahas cara membuat form di Flutter menggunakan Form widget beserta komponen dan widget di dalamnya
Form widget sendiri berfungsi untuk mempermudah dalam proses pembuatan dan memberi keamanan lebih pada aplikasi flutter seperti validasi, dan aksi lainnya yang umum terdapat pada sebuah form. Contoh penggunaan form widget seperti dibawah ini :
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: "Belajar Form Flutter", home: BelajarForm(), )); } class BelajarForm extends StatefulWidget { @override _BelajarFormState createState() => _BelajarFormState(); } class _BelajarFormState extends State<BelajarForm> { final _formKey = GlobalKey<FormState>(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("BelajarFlutter.com"), ), body: Form( key: _formKey, child: Container( padding: EdgeInsets.all(20.0), child: Column( children: [ // tambahkan komponen seperti input field disini ], ), ), ), ); } }Perhatikan pada kode di baris 16, potongan kode seperti dibawah ini
final _formKey = GlobalKey<FormState>();Variable _formKey berfungsi sebagai identifier untuk sebuah form yang nantinya dapat kita gunakan untuk validasi, dll. Umumnya setiap form memiliki satu unik key jadi apabila anda memiliki dua form yang berbeda maka buat lah kembali form key dengan nama variable berbeda. misal _formKey2.
Daftar Isi
- 1 Komponen Umum pada Form
- 1.1 TextFormField Widget
- 1.1.1 Label dan Placeholder pada TextFormField
- 1.1.2 AutoFocus
- 1.1.3 Password
- 1.1.4 keyboardType
- 1.1.5 Validation
- 1.2 Check Box dan Switch Button
- 1.3 Slider Widget
- 1.4 Tombol / Button Widget
- 1.1 TextFormField Widget
- 2 Contoh Source Code Form di Flutter
Komponen Umum pada Form
Banyak sekali pilihan flutter widget yang dapat digunakan dalam sebuah form namun dalam kesempatan ini kita hanya akan membahas komponen atau widget yang umum ditemukan pada sebuah form di aplikasi flutter yaitu TextFormField, CheckBox, RadioButton, Slider Widget, dan Button.
TextFormField Widget
TextFormField berfungsi sebagai input field, biasanya digunakan untuk input nama lengkap, searching, email, password dan input lainnya. Untuk contoh kode penggunaannya seperti dibawah ini
Label dan Placeholder pada TextFormField
Untuk menambahkan label, placeholder atau icon pada TextField, kita dapat menggunakan properti decoration. contohnya seperti ini
TextFormField( decoration: new InputDecoration( hintText: "Masukan Nama Lengkap Anda", labelText: "Nama Lengkap", icon: Icon(Icons.people)), ),masih pada properti decoration, kita juga dapat menambah border, contohnya seperti ini
TextFormField( decoration: new InputDecoration( hintText: "masukan nama lengkap anda", labelText: "Nama Lengkap", icon: Icon(Icons.people), border: OutlineInputBorder( borderRadius: new BorderRadius.circular(5.0)), ), )AutoFocus
Cara mengaktifkan auto fokus pada text field yaitu dengan men-set properti autofocus menjadi true
TextFormField( autofocus: true, ...Password
Untuk merubah tampilan TextFormField atau TextField menjadi password, bisa dengan menggunakan properti obscureText dan set valuenya menjadi true
TextField(obscureText: true),keyboardType
Kita juga dapat merubah tampilan tipe keyboard saat textFormField aktif, caranya dengan menggunakan properti keyboardType. Contoh
keyboardType: TextInputType.phone,Lengkapnya seperti ini
TextFormField( keyboardType: TextInputType.phone, decoration: new InputDecoration( hintText: "contoh: 0812xxxxxxx", labelText: "Nomor Telp", icon: Icon(Icons.phone), border: OutlineInputBorder( borderRadius: new BorderRadius.circular(5.0)), ), )Pilihan dari keyboardType pada TextField dan TextFormField juga cukup beragam. Berikut opsi dan contoh pilihan tampilan keyboard pada flutter :
Validation
Untuk menambahkan validasi pada TextFormField cukup mudah, caranya yaitu seperti ini
TextFormField( decoration: new InputDecoration( hintText: "contoh: Susilo Bambang", labelText: "Nama Lengkap", icon: Icon(Icons.people), border: OutlineInputBorder( borderRadius: new BorderRadius.circular(5.0)), ), validator: (value) { if (value.isEmpty) { return 'Nama tidak boleh kosong'; } return null; }, ),Kode value.isEmpty untuk mengecek apakah nilai pada field tersebut kosong atau tidak. Kita juga dapat menambah kondisi lain sesuai kebutuhan seperti menggunakan regex untuk mengecek format email dan sejenisnya.
Properti validation akan aktif apabila fungsi validate() pada formKey di trigger
final _formKey = GlobalKey<FormState>();0Source code lengkapnya seperti ini
final _formKey = GlobalKey<FormState>();1Detail tentang penggunaan validasi kita akan coba bahas secara terpisah pada artikel khusus mendatang.
referensi : Flutter form validation
Check Box dan Switch Button
Pada flutter, untuk membuat check box bisa menggunakan Checkbox widget. Dan untuk Switch button menggunakan Switch Widget. Nilai atau value untuk kedua widget tersebut berupa boolean (true / false).
Apabila membutuhkan label dan subtitle, agar lebih mudah kita dapat menggantinya menggunakan CheckboxListTile atau SwitchListTile widget
final _formKey = GlobalKey<FormState>();3final _formKey = GlobalKey<FormState>();4properti activeColor untuk merubah warna widget saat value true. Agar widget ini dapat terlihat bekerja, maka nilai pada key value harus bersifat dinamis (di simpan pada state)
Slider Widget
Sesuai namanya, untuk membuat input slider pada flutter silahkan gunakan Slider Widget. Nilai pada widget ini berupa Number (double). Secara sederhana penggunaanya seperti ini
final _formKey = GlobalKey<FormState>();5Sama seperti checkbox widget, agar dapat di-slide kita perlu merubah nilai pada properti value menjadi dinamis yaitu dengan menyimpan pada state. caranya
Buat variable baru, contoh kita beri nama nilaiSlider. Lalu gunakan fungsi setState pada properti onChange. Kurang lebih seperti dibawah ini
final _formKey = GlobalKey<FormState>();6dan pada Slider widget menjadi seperti ini
final _formKey = GlobalKey<FormState>();7Tombol / Button Widget
Seperti yang pernah di singgung pada pembahasan text field, penggunaan tombol biasanya untuk men-trigger validasi dan form itu sendiri. contoh kode nya seperti dibawah ini