1.1 Tujuan

Tujuan praktikum ini yaitu mahasiswa mampu membuat basic form untuk menerima inputan dari keyboard dan mengelola inputan :

• Membuat beberapa input widgets
• Membuat dan mengontrol inputan dari user

1.2 Alat

• Computer / laptop yang telah terinstall lingkungan flutter development

1.3 Teori

Basic Form

Basic Form merupakan widget yang berfungsi sebagai inputan nilai seperti TextField, TextFormField, CheckBox, Switch, Dropdown, Radio, Dialog, DatePicker, BottomSheet, Snackbar dan lain-lain. Basic Form digunakan untuk validasi dan mengelola inputan dari berbagai field.

Form akan memberikan tampilan inputan kemudian inputan akan diperiksa apakah sudah sesuai dengan aturan atau format yang ditetapkan, selanjutnya data inputan akan diambil nilainya setelah proses pengecekan selesai dilakukan.

TextField

TextField adalah widget yang digunakan untuk memasukkan text oleh pengguna, widget ini biasanya digunakan untuk membuat form inputan seperti form login, pencarian dll.

Fitur TextField

• Menerima input dari keyboard
• Memiliki property yang lengkap seperti style, decoration, dan jenis inputan
• Dapat mengelola teks menggunakan TextEditingController

TextFormField

TextFormField adalah widget versi lengkap dari TextField yang secara otomatis terintegrasi dengan logika validasi dan manajemen state dari sebuah Form.

Fitur TextFormField

• Menerima input teks dari keyboard.
• Memiliki properti validator yang berfungsi untuk memeriksa apakah input sudah sesuai dengan aturan yang ditentukan.
• Menampilkan pesan error secara otomatis di bawah field jika validasi gagal.
• Berinteraksi dengan FormState untuk melakukan validasi secara kolektif dengan method validate().

GlobalKey & FormState

GlobalKey merupakan objek unik atau key yang digunakan untuk mengidentifikasi dan mengakses state secara global, artinya kita dapat mengakses widget dari widget mana saja.

FormState adalah kelas yang mengelola status dari Form, seperti status validasi setiap form inputan (TextFormField). Dengan menggunakan GlobalKey pada widget Form, kita dapat memanggil metode seperti validate() atau save() dari luar widget tersebut (misalnya pada onPressed ElevatedButton).

validate()

Metode validate() merupakan sebuah fungsi yang terdapat pada FormState yang digunakan untuk menjalankan validasi pada setiap TextFormField yang ada di dalam Form. Ketika memanggil _formKey.currentState!.validate(), Flutter akan:

• Mengecek setiap TextFormField yang terikat pada Form tersebut.
• Menjalankan fungsi validator yang telah didefinisikan pada setiap TextFormField.
• Jika fungsi validator mengembalikan String (pesan error), validate() akan menghentikan proses dan mengembalikan nilai false. Pesan error akan ditampilkan di bawah field tersebut.
• Jika semua fungsi validator mengembalikan null (tidak ada error), validate() akan mengembalikan nilai true.

1.4 Langkah-langkah

A. Basic Form — TextField (Langkah-langkah)

1. Buat file dart baru dengan nama form-textfield didalam folder lib.
2. Buat tampilan basic form dengan menggunakan Widget TextField untuk inputan, ElevatedButton untuk event.

            
Contoh TextFormField:
              

              
               
              

              
               
          

Pada class _MyFormState tambahkan kode program berikut :

Penjelasan :
• Line 1 merupakan membuat sebuah variable dari TextEditingController, controller ini berfungsi untuk mengambil inputan dari user.
• Line 2 – 6 merupakan method yang digunakan untuk membersihan text inputan

            
Contoh TextFormField:
            

              
            
          

Tambahkan property berikut pada Widget TextField

Penjelasan :
• Line 7 menambahkan controller _textEditingController
• Line 8 menambahkan property jenis inputan yang boleh diinputkan oleh user
• Line 9 – 11 method yang digunakan untuk event listener Ketika sedang menginputkan
teks

Tambahkan kode program berikut pada widget ElevatedButton

Penjelasan :
• Line 2 membuat variable inputText yang berfungsi untuk menampung inputan dari keyboard
• Line 2 – 5 menampilkan inputan text dengan menggunakan widget SnackBar

Basic Form — TextFormField

Langkah-langkah:

1. Buat file baru di folder lib dengan nama form-textformfield.
2. Buat form inputan menggunakan 2 buah widget TextFormField dan 1 buah ElevatedButton.

Jika dijalankan, tampilannya seperti pada modul asli.

Tambahkan pada class _MyFormTextState kode berikut :

Penjelasan singkat:

• Line 1 membuat variable GlobalKey.
• Line 2–3 membuat controller untuk TextFormField.
• Line 5–10 method dispose untuk membersihkan controller.
• Line 12–21 method _submitForm dipanggil saat tombol submit ditekan.

Penggunaan Form dan TextFormField dengan validator

Bungkus tampilan dengan widget Form dan tambahkan key: _formKey, lalu tambahkan validator pada setiap TextFormField:

Selanjutnya, tambahkan method _submitForm pada onPressed ElevatedButton:

Setelah disimpan dan dijalankan, form akan memvalidasi input dan menampilkan SnackBar bila validasi berhasil.

1.5 Latihan / Tugas

Setelah melakukan praktikum membuat basic form menggunakan widget TextField dan TextFormField, silahkan kerjakan Tugas berikut ini.

• Buatlah aplikasi kalkulator yang dapat menjalankan operasi kabataku.
• Gunakan 2 buah widget inputan (TextField atau TextFormField) untuk menerima nilai inputan.
• Gunakan ElevatedButton untuk mengeksekusi operasi kabataku.
• Gunakan widget Text untuk menampilkan hasil operasi.

Catatan: "operasi kabataku" artinya operasi aritmetika sederhana (mis. penjumlahan, pengurangan, perkalian, pembagian) — buat UI sesuai instruksi tugas.

            
code
            

              
            
          

            
operasi 1
            

              
            
          

            
operasi 2