Laporan Praktikum 3

Pendahuluan

Pada praktikum ini dipelajari penggunaan basic form di Flutter. Pertama ada TextField, yaitu widget untuk menerima input teks dari pengguna dan biasanya dipadukan dengan TextEditingController agar input dapat dikelola.

Selain itu dipelajari juga TextFormField yang sudah terintegrasi dengan logika validasi sehingga dapat memeriksa apakah data yang dimasukkan sudah sesuai aturan.

Digunakan juga GlobalKey untuk mengontrol status form serta method setState() untuk memperbarui tampilan ketika data berubah.

Basic Form TextField

Basic Form merupakan widget yang berfungsi sebagai inputan nilai seperti TextField, TextFormField, CheckBox, Switch, Dropdown, Radio, Dialog, DatePicker, BottomSheet, Snackbar dan lain-lain.

Untuk membuat Form TextField, dibuat file baru dengan nama form-textfield.dart.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

Pada kode tersebut digunakan TextEditingController untuk mengambil inputan dari user.

Keterangan Code

TextEditingController

final TextEditingController _teksEditingController
    = TextEditingController();

Digunakan untuk mengambil inputan dari user.

dispose()

dispose()

Method untuk membersihkan controller ketika widget sudah tidak digunakan.

TextField

controller: _teksEditingController

Menghubungkan TextField dengan controller.

keyboardType: TextInputType.text

Menentukan jenis input yang diperbolehkan.

onChanged: (text)

Event listener ketika user sedang mengetik.

TextFormField

TextFormField merupakan versi lebih lengkap dari TextField karena sudah mendukung validasi form.

final _formKey = GlobalKey<FormState>();

GlobalKey digunakan untuk mengontrol status form dan menjalankan validasi.

if (_formKey.currentState!.validate())

Digunakan untuk mengecek apakah seluruh field valid.

Keterangan Code

Controller

final _nameController = TextEditingController();
final _emailController = TextEditingController();

Controller digunakan untuk mengambil input nama dan email.

Validator

validator: (value) {
  if (value == null || value.isEmpty) {
    return 'Masukkan nama anda';
  }
}

Validator digunakan untuk mengecek validitas input user.

Tugas Kabataku

Pada tugas ini dibuat aplikasi kalkulator sederhana menggunakan TextField dan ElevatedButton.

void _hitung(String operasi) {
  double angka1 =
      double.tryParse(_angka1Controller.text) ?? 0;
}

Fungsi _hitung digunakan untuk melakukan operasi tambah, kurang, kali, dan bagi.

Aplikasi dimulai dari main() yang menjalankan MaterialApp, kemudian menampilkan dua buah TextField untuk input angka serta beberapa tombol operasi matematika.

Hasil perhitungan disimpan pada variabel hasil dan diperbarui menggunakan setState().

Kesimpulan

Pada praktikum ini dipelajari cara membuat form dasar di Flutter menggunakan TextField dan TextFormField.

Dengan TextField, input pengguna dapat ditangkap menggunakan TextEditingController dan ditampilkan kembali ke layar.

Sedangkan TextFormField menyediakan fitur validasi otomatis menggunakan GlobalKey.

Melalui tugas kalkulator Kabataku, dipahami juga penggunaan beberapa input, operasi matematika sederhana, serta setState() untuk memperbarui tampilan hasil.