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
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
TextFormField();
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 :
Jenis | Tampilan |
---|---|
TextInputType.number atau TextInputType.numberWithOptions() | ![]() |
TextInputType.phone | ![]() |
TextInputType.emailAddress | ![]() |
TextInputType.url | ![]() |
TextInputType.datetime | ![]() |
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
_formKey.currentState.validate()
Source code lengkapnya seperti 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: [ // TextField(), 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; }, ), RaisedButton( child: Text( "Submit", style: TextStyle(color: Colors.white), ), color: Colors.blue, onPressed: () { if (_formKey.currentState.validate()) {} }, ), ], ), ), ), ); } }

Detail 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).
// contoh checkbox
Checkbox(
value: true,
onChanged: (value) {},
),
// contoh Switch
Switch(
value: true,
onChanged: (value) {},
),
Apabila membutuhkan label dan subtitle, agar lebih mudah kita dapat menggantinya menggunakan CheckboxListTile atau SwitchListTile widget
CheckboxListTile(
title: Text('Belajar Dasar Flutter'),
subtitle: Text('Dart, widget, http'),
value: true,
activeColor: Colors.deepPurpleAccent,
onChanged: (value) {},
),
SwitchListTile(
title: Text('Backend Programming'),
subtitle: Text('Dart, Nodejs, PHP, Java, dll'),
value: true,
activeTrackColor: Colors.pink[100],
activeColor: Colors.red,
onChanged: (value) {},
),
properti 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
Slider(
value: 25,
min: 0,
max: 100,
onChanged: (value) {},
),

Sama 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
double nilaiSlider = 25;
dan pada Slider widget menjadi seperti ini
Slider(
value: nilaiSlider,
min: 0,
max: 100,
onChanged: (value) {
setState(() {
nilaiSlider = value;
});
},
),
Tombol / 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
RaisedButton(
child: Text(
"Submit",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
onPressed: () {
if (_formKey.currentState.validate()) {}
},
),
Contoh Source Code Form di Flutter
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>(); double nilaiSlider = 1; bool nilaiCheckBox = false; bool nilaiSwitch = true; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("BelajarFlutter.com"), ), body: Form( key: _formKey, child: SingleChildScrollView( child: Container( padding: EdgeInsets.all(20.0), child: Column( children: [ Padding( padding: const EdgeInsets.all(8.0), child: 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; }, ), ), Padding( padding: const EdgeInsets.all(8.0), child: TextFormField( obscureText: true, decoration: new InputDecoration( labelText: "Password", icon: Icon(Icons.security), border: OutlineInputBorder( borderRadius: new BorderRadius.circular(5.0)), ), validator: (value) { if (value.isEmpty) { return 'Password tidak boleh kosong'; } return null; }, ), ), CheckboxListTile( title: Text('Belajar Dasar Flutter'), subtitle: Text('Dart, widget, http'), value: nilaiCheckBox, activeColor: Colors.deepPurpleAccent, onChanged: (value) { setState(() { nilaiCheckBox = value; }); }, ), SwitchListTile( title: Text('Backend Programming'), subtitle: Text('Dart, Nodejs, PHP, Java, dll'), value: nilaiSwitch, activeTrackColor: Colors.pink[100], activeColor: Colors.red, onChanged: (value) { setState(() { nilaiSwitch = value; }); }, ), Slider( value: nilaiSlider, min: 0, max: 100, onChanged: (value) { setState(() { nilaiSlider = value; }); }, ), RaisedButton( child: Text( "Submit", style: TextStyle(color: Colors.white), ), color: Colors.blue, onPressed: () { if (_formKey.currentState.validate()) {} }, ), ], ), ), ), ), ); } }
Demikian tutorial dasar tentang cara membuat form di flutter. Semoga dapat bermanfaat 🙂
Keren
Context: Found this candidate, but the arguments don’t match.
aku nmbhi border gan, tpi error itu