TextField & TextEditingController

Menerima input teks

TextField adalah kotak isian untuk mengetik. Untuk mengetahui apa yang diketik pengguna, kita memakai controller: ibarat kotak surat yang terhubung ke TextField — setiap ketikan masuk ke sana dan bisa dibaca kapan saja.

final _controller = TextEditingController();

TextField(
  controller: _controller,
  decoration: const InputDecoration(
    labelText: 'Nama',
    border: OutlineInputBorder(),
  ),
)

• controller menghubungkan TextField dengan TextEditingController.
• decoration mengatur tampilan kotak: labelText (label yang mengambang), hintText (contoh isian), border (bingkai), dan prefixIcon (ikon di kiri).

Membaca dan mengubah isi

_controller.text            // isi saat ini (String)
_controller.clear();        // mengosongkan
_controller.text = 'Sari';  // mengisi

Membersihkan dengan dispose()

Controller memakai sumber daya. Setelah widget tidak dipakai lagi, kita wajib melepasnya di method dispose() agar memori tidak bocor:

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

Contoh lengkap: menyapa

ElevatedButton(
  onPressed: () {
    setState(() {
      _salam = 'Halo, ${_controller.text}!';
    });
  },
  child: const Text('Sapa'),
)
Text(_salam)

Saat tombol ditekan, isi TextField dibaca, disusun menjadi kalimat, lalu setState menampilkannya. Perhatikan: mengetik di TextField tidak memicu build(); yang memicunya adalah setState pada tombol.

Cara lain: onChanged

TextField(onChanged: (teks) { ... }) dipanggil tiap kali isi berubah. Cocok untuk pencarian langsung; untuk membaca isi saat tombol ditekan, controller lebih rapi.