Halo teman- teman,
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 :
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.
Komponen Umum pada Form
Banyak sekali pilihan 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
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
masih pada properti decoration, kita juga dapat menambah border, contohnya seperti ini
AutoFocus
Cara mengaktifkan auto fokus pada text field yaitu dengan men-set properti autofocus menjadi true
TextFormField(
autofocus: true,
…
Password
Kita juga dapat merubah tampilan tipe keyboard saat textFormField aktif, caranya dengan menggunakan properti keyboardType. Contoh
keyboardType: TextInputType.phone,
lengkapnya seperti ini :
VALIDATION
Untuk menambahkan validasi pada TextFormField cukup mudah, caranya yaitu seperti ini
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 codenya seperti berikut
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
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
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
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
CONTOH SOURCE CODE FORM DI FLUTTER
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
title: "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) {
double nilaiSlider = 1;
bool nilaiCheckBox = false;
bool nilaiSwitch = true;
return Scaffold(
appBar: AppBar(
title: Text('Macam-Macam Form Pada Flutter'),
),
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: Fahrul Riza",
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()) {}
},
),
],
),
),
),
),
);
}
}
Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba.