Laprak 3 — Input Widgets dan Basic Form (Flutter)

void main() => runApp(const MyApp()) adalah titik masuk aplikasi yang langsung menjalankan widget MyApp. Widget ini berupa StatelessWidget karena tampilan awalnya tidak perlu berubah, dan cukup mengembalikan MaterialApp sebagai pembungkus utama seluruh aplikasi Flutter.

Di dalam MaterialApp, properti home diisi Scaffold yang menyediakan struktur halaman standar Material Design. AppBar(title: const Text('Basic Form')) menampilkan judul "Basic Form" di bagian atas layar, sedangkan body: const MyForm() memanggil widget form yang isinya akan dilengkapi pada langkah berikutnya.

Baris final TextEditingController _textEditingController = TextEditingController(); membuat variabel controller yang bertugas mengambil apa pun yang diketik user pada field. Controller inilah yang nantinya dihubungkan ke widget TextField lewat properti controller.

• @override void dispose() — method siklus hidup widget yang otomatis dipanggil saat widget dihapus dari tree.
• _textEditingController.dispose(); — membersihkan resource controller.
• super.dispose(); — memastikan proses dispose bawaan dari State tetap berjalan.

Properti decoration: InputDecoration(...) mengatur tampilan field: labelText: 'Nama Lengkap' sebagai label mengambang, hintText: 'Misalnya masnoer' sebagai contoh teks placeholder, border: OutlineInputBorder() memberi garis tepi kotak, dan prefixIcon: Icon(Icons.person) menambah ikon orang di sisi kiri field.

Selanjutnya controller: _textEditingController menghubungkan field dengan controller yang sudah dibuat sebelumnya, sementara keyboardType: TextInputType.text menentukan keyboard yang muncul berupa keyboard teks biasa. Terakhir, onChanged: (text) { print('Sedang mengetik teks : $text'); } adalah event listener yang berjalan setiap kali teks berubah — dipakai di sini untuk mencetak teks yang sedang diketik ke console sebagai bukti bahwa perubahan input benar-benar terpantau secara realtime.

Saat tombol ditekan, baris String inputText = _textEditingController.text; mengambil nilai terakhir yang tersimpan pada controller dan menampungnya ke variabel inputText. Nilai ini kemudian ditampilkan lewat ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Nama anda adalah $inputText'))), yang memunculkan notifikasi singkat di bagian bawah layar berisi gabungan teks statis dan nilai inputan.

Tampilan tombol sendiri diatur lewat ElevatedButton.styleFrom(backgroundColor: Colors.amber, foregroundColor: Colors.black) sehingga warna latarnya amber dengan teks berwarna hitam.

Baris final _formKey = GlobalKey<FormState>(); membuat key unik yang menjadi jembatan untuk mengakses FormState dari luar widget Form — nantinya key inilah yang dipanggil dari onPressed tombol Submit untuk menjalankan validasi. Dua baris berikutnya, final _nameController = TextEditingController(); dan final _emailController = TextEditingController();, menyiapkan controller terpisah untuk masing-masing field nama dan email, sedangkan method dispose() membersihkan keduanya ketika state dihancurkan.

Form(key: _formKey, child: ...) mendaftarkan seluruh TextFormField di dalam child sebagai satu kesatuan yang statusnya dipegang oleh _formKey. Struktur di dalamnya tetap memakai Padding dan Column seperti biasa agar tata letak antar field tetap rapi dengan jarak SizedBox di antaranya.

Selain controller: _nameController yang menghubungkan field dengan controller nama dan decoration yang mengatur label serta garis tepi, bagian terpenting ada pada fungsi validator: (value) { if (value == null || value.isEmpty) { return 'Masukkan nama anda'; } return null; }. Fungsi ini mengembalikan pesan error saat field masih kosong, dan mengembalikan null — yang berarti tidak ada error — ketika sudah terisi.

Kondisi pertama, if (value == null || value.isEmpty) { return 'Masukkan email anda '; }, menolak field yang masih kosong. Jika field sudah terisi, barulah kondisi kedua dicek: if (!value.contains('@')) { return 'Email tidak valid'; } menolak input yang tidak mengandung karakter @, sebagai pengecekan format email sederhana. Apabila kedua kondisi ini terlewati tanpa masalah, fungsi mengembalikan null yang menandakan email dianggap valid.

Baris if (_formKey.currentState!.validate()) menjalankan validasi seluruh field dalam Form sekaligus; tanda seru memastikan currentState tidak bernilai null. Apabila validasi lolos, String name = _nameController.text; dan String email = _emailController.text; mengambil nilai terakhir dari masing-masing controller, lalu ditampilkan lewat SnackBar(content: Text('Validasi $name, $email Berhasil')).

Agar tombol memenuhi lebar layar, dipakai SizedBox(width: double.infinity, child: ElevatedButton(onPressed: _submitForm, child: const Text('Submit'))) — tombol ini memanggil _submitForm setiap kali ditekan.

AppBar(title: const Text('Kalkulator Kabataku')) menampilkan judul aplikasi di bagian atas layar, sedangkan KalkulatorForm sengaja dideklarasikan sebagai StatefulWidget karena hasil perhitungan perlu diperbarui secara dinamis (rebuild) setiap kali salah satu operasi dijalankan.

Sama seperti pada form_textformfield.dart, _formKey di sini berfungsi memanggil validate() dari luar Form. Yang membedakan adalah variabel String _hasil = 'Hasil akan tampil di sini';, yaitu nilai awal teks hasil sebelum operasi apa pun dijalankan — variabel inilah yang akan diperbarui lewat setState() setiap kali tombol operasi ditekan. Method dispose() tetap disertakan untuk membersihkan kedua controller angka.

Fungsi String? _validasiAngka(String? value) sengaja dipisah agar dapat dipakai bersama oleh kedua field. Fungsi ini mengembalikan pesan 'Masukkan angka' jika field kosong, mengembalikan 'Harus berupa angka' jika double.tryParse(value) gagal mengonversi teks menjadi angka, atau mengembalikan null jika input sudah valid.

• keyboardType: const TextInputType.numberWithOptions(decimal: true) — menampilkan keyboard numerik dengan dukungan angka desimal.
• prefixIcon: Icon(Icons.numbers) — ikon angka di depan tiap field sebagai penanda visual.

Baris if (!_formKey.currentState!.validate()) { return; } menghentikan proses lebih awal apabila ada field yang belum valid, sehingga perhitungan tidak akan dijalankan pada data yang salah. Setelah lolos validasi, double angka1 = double.parse(_angka1Controller.text); dan baris serupa untuk angka2 mengubah teks inputan menjadi tipe numerik agar dapat dihitung.

Struktur switch (operator) kemudian menentukan rumus dan simbol berdasarkan tombol yang ditekan: tambah (+), kurang (−), kali (×), dan bagi (÷). Khusus pada case 'bagi', terdapat pengecekan tambahan if (angka2 == 0) yang langsung memanggil setState() untuk menampilkan pesan "Tidak bisa membagi dengan nol" dan menghentikan proses, sehingga hasil infinity dapat dicegah. Di akhir method, setState(() { _hasil = '$angka1 $simbol $angka2 = $hasilOperasi'; }); memperbarui tampilan dengan hasil operasi yang baru saja dihitung.

Setiap tombol memakai onPressed: () => _hitung('kali') dan sejenisnya, meneruskan string operator berbeda ke method _hitung() yang sama, sehingga logika perhitungan tidak perlu ditulis ulang untuk tiap tombol. Supaya keempat tombol memenuhi ruang secara merata, masing-masing dibungkus Expanded(child: Padding(...)) dengan padding horizontal 4.0 sebagai jarak antar tombol, lalu diberi warna berbeda lewat ElevatedButton.styleFrom(backgroundColor: ...) — Kali biru, Bagi hijau, Tambah oranye, dan Kurang merah — agar mudah dibedakan secara visual.

Container(padding: const EdgeInsets.all(16.0), decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(8.0)), child: Text(_hasil, ...)) membungkus teks hasil dengan padding, warna latar abu-abu muda, dan sudut membulat agar tampil rapi. Teksnya sendiri diatur rata tengah lewat textAlign: TextAlign.center dengan gaya TextStyle(fontSize: 16, fontWeight: FontWeight.bold) agar mudah dibaca.