Cara Membuat Form di Flutter

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.

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 🙂