Laporan Praktikum

24 September 2025 ~ Oleh Kevin Andhika

Input Widgets dan Basic Form

1. Tujuan

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

  • Membuat beberapa input widgets
  • Membuat dan mengontrol inputan dari user
  • Menambahkan informasi error ketika memasukkan input yang tidak sesuai

2. Alat yang Digunakan

  • IDE (Visual Studio Code)
  • Flutter & Dart

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 ini akan memberikan tampilan inputan kemudian inputan akan diperiksa apakah sudah sesuai dengan aturan atau format yang ditetapkan, selanjtunya data inputan akan diambil nilainya setelah proses pengecekan selesai dilakukan.

  • Text Field

    • 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 antara lain:

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

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

    Fitur TextFormField antara lain

    • 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 validate() method.

4. Langkah-langkah

A. Basic Form TextField

  • Buat file dart baru dengan nama form-textfield.dart di dalam folder lib
  • Buat sebuah tampilan basic form dengan menggunakan widget TextField untuk inputan dan ElevatedButton sebagai tombol event listener
    • vsc
    • _MyFormState: membuat variabel TextEditingController yang berguna untuk mengambil inputan dari pengguna, lalu membuat variabel yang membersihkan teks inputan
    • TextField: menambahkan controller properti jenis inputan agar bisa di lakukan aksi input dari pengguna
    • ElevatedButton: pada bagian onPressed ditambahkan program agar tombol bisa ditekan dan menampilkan inputan pengguna dari textfield ke dalam widget snackbar (yang biasanya berada di paling bawah halaman), bisa juga menampilkan inputan ke dalam suatu area teks
  • Berikut hasil run dari kode basic form TextField
    • Ketika pertama kali dijalankan
      • vsc
    • Ketika textfield ditekan
      • vsc
    • ketika ElevatedButton ditekan
      • vsc

    B. Basic Form TextFormField

  • Buat file dart baru dengan nama form-textformfield.dart di dalam folder lib
  • Buat form inputan pengguna menggunakan widget TextFormField dan ElevatedButton beserta handling jika inputan tidak sesuai
    • vsc
    • _MyFormTextState: membuat controller untuk textformfield bagian nama dan email, lalu membuat method yang menghapus inputan nama dan email dan membuat method yang berjalan ketika ElevatedButton di tekan
    • TextFormField: membuat handling pada textformfield berdasarkan inputan yang diberikan pengguna kosong ataupun tidak sesuai dengan format biasanya
    • ElevatedButton: pada bagian onPressed ditambahkan method _submitform agar bisa menampilkan output Validasi Berhasil berupa Snackbar
  • Berikut hasil run dari kode basic form TextFormField
    • Ketika pertama kali dijalankan
      • vsc
    • Ketika ElevatedButton ditekan dan TextField kosong
      • vsc
    • ketika ElevatedButton ditekan dan TextField salah format
      • vsc
    • ketika ElevatedButton ditekan dan TextField sudah benar
      • vsc

    Kesimpulan

    Berdasarkan praktikum yang telah dilakukan, dapat disimpulkan bahwa pengembangan form input dalam Flutter menggunakan TextField dan TextFormField beserta controller-nya memungkinkan pembuatan antarmuka interaktif yang dapat menerima, memvalidasi, dan mengelola input pengguna dengan efektif, termasuk penanganan error dan tampilan feedback, serta diimplementasikan dalam aplikasi kalkulator aritmatika sederhana yang berfungsi dengan baik.


    Latihan

    • Buatlah aplikasi kalkulator yang dapat menjalankan operasi kabataku dengan menggunakan 2 buah widget inputan (TextField atau TextFormField), lalu menggunakan ElevatedButton dan widget text untuk menampilkan hasil opersi aritmatikanya

      > Berikut kode operasi aritmatika kabataku

      latihan

      Kode ini membuat operasi aritmatika sederhana berdasarkan 2 buah inputan yang diisi oleh pengguna pada TextFormField yang mana menggunakan handling ketika pengguna memasukkan inputtan yang tidak sesuai formatnya.

      Berikut tampilan dari aplikasi kalkulator aritmatika sederhana

      • Ketika pertama kali dijalankan
        • latihan

        Handling TextFormField

      • Ketika textformfield kosong
        • latihan
      • Ketika textformfield salah format
        • latihan

        Hasil operasi kabataku

      • Ketika ElevatedButton tambah (+) ditekan
        • latihan
      • Ketika ElevatedButton kurang (-) ditekan
        • latihan
      • Ketika ElevatedButton kali (×) ditekan
        • latihan
      • Ketika ElevatedButton bagi (÷) ditekan
        • latihan