Belajar Flutter dari Awal: Interaksi Pengguna: Tombol, Input, dan Gesture (Part 5)

Rifqi An Rifqi An
•
Februari 26, 2026


Halo, sobat ngoding! Balik lagi nih di seri Belajar Flutter dari Awal yang super asyik ini. Setelah kemarin kita udah sibuk nata-nata UI biar cakep, pasang gambar yang kece, dan bikin layout responsif biar aplikasi kita enak dilihat di berbagai ukuran layar, sekarang saatnya kita bikin aplikasi kita hidup!

Kebayang nggak sih, kalo aplikasi cuma bisa dilihat doang kayak pajangan? Pasti garing banget kan? Nah, di Part 5 ini, kita bakal belajar gimana caranya aplikasi kita bisa "ngobrol" sama pengguna. Mulai dari ngeklik tombol, nulis di kolom input, sampai gestur-gestur sentuhan yang bikin interaksi makin natural. Dijamin abis ini, aplikasi kalian nggak bakal jadi patung doang!

Siap-siap ngopi lagi ya, karena materi ini bakal bikin aplikasi kalian jadi lebih interaktif. Yuk, langsung aja kita gas!

Daftar Isi

Pengantar Ngoding Interaksi Pengguna

Interaksi pengguna itu ibarat jembatan antara aplikasi kita dengan orang yang makai. Tanpa interaksi, aplikasi cuma jadi poster digital. Nah, Flutter nyediain banyak banget widget dan cara untuk bikin jembatan ini kokoh dan nyaman. Kita bakal fokus ke tiga pilar utama hari ini: Tombol, Input Teks, dan Gestur Sentuhan.

Kalo udah ngerti ini, dijamin kalian bakal bisa bikin fitur-fitur dasar yang paling sering ditemuin di aplikasi manapun!

Tombol-Tombol Keren Biar Gak Stagnan

Tombol adalah cara paling dasar dan populer buat pengguna ngasih perintah ke aplikasi. "Klik ini dong!", "Pencet itu yuk!". Flutter punya beberapa jenis tombol yang bisa kita pilih sesuai kebutuhan dan selera desain. Yuk, kita kenalan!

ElevatedButton: Si Paling Nongol

Ini adalah tombol yang paling umum dan sering dipakai. Ada efek "nongol" alias elevasi dan bayangan (shadow) yang bikin dia kelihatan menonjol. Cocok banget buat aksi utama di layar.

Cara pakenya gampang banget:


ElevatedButton(
  onPressed: () {
    // Aksi yang akan dilakukan saat tombol diklik
    print('ElevatedButton diklik!');
  },
  child: Text('Klik Aku Dong!'),
)

Paling penting itu properti onPressed. Kalo ini diisi dengan fungsi (kayak contoh di atas), tombolnya bakal aktif. Kalo properti onPressed kita set jadi null, tombolnya otomatis non-aktif alias disabled. Berguna banget buat kondisi tertentu, misalnya tombol "Kirim" baru aktif kalo semua form udah diisi!

TextButton: Si Minimalis Santuy

Sesuai namanya, ini tombol yang cuma berupa teks doang, tanpa background solid atau elevasi. Cocok buat aksi sekunder atau kalo kalian mau desain yang minimalis banget.


TextButton(
  onPressed: () {
    print('TextButton diklik nih!');
  },
  child: Text('Tombol Santuy'),
)

Fungsinya sama persis dengan ElevatedButton, cuma beda tampilan aja.

OutlinedButton: Si Tegas Bergaris

Nah, kalo yang ini, tampilannya mirip TextButton tapi ada border di sekelilingnya. Kesannya lebih tegas tapi tetep ringan. Sering dipakai buat aksi alternatif atau tombol "Batal".


OutlinedButton(
  onPressed: () {
    print('OutlinedButton diklik juga!');
  },
  child: Text('Tombol Bergaris'),
)

Sama kan cara pakainya? Intinya di onPressed itu loh, kawan!

Inputan Manja ala Pengguna (TextField)

Tombol udah, sekarang gimana kalo kita mau pengguna nulis sesuatu? Misalnya nulis nama, email, atau curhatannya? Nah, di sinilah peran si TextField.

Mengambil Inputan User dengan TextEditingController

TextField itu cuma widget buat menampilkan kolom input. Untuk bisa membaca atau mengubah teks yang ada di dalamnya, kita butuh "juru bicara" namanya TextEditingController. Anggap aja ini kayak remote control buat TextField.


// Ini diletakkan di dalam kelas State (kalo pake StatefulWidget)
// atau sebagai variabel di kelas (kalo pake StatelessWidget, tapi jarang)
final TextEditingController _namaController = TextEditingController();

// Di dalam widget build()
TextField(
  controller: _namaController, // Ini dia remote-nya!
  decoration: InputDecoration(
    labelText: 'Nama Lengkap',
    hintText: 'Masukkan nama kamu di sini...'
  ),
),
ElevatedButton(
  onPressed: () {
    // Ambil teks dari TextField pakai controller
    String namaPengguna = _namaController.text;
    print('Halo, $namaPengguna!');
  },
  child: Text('Sapa Aku!'),
)

Jangan lupa, kalo udah nggak dipakai (misalnya pas widgetnya dibuang dari tree), TextEditingController harus di-dispose() biar nggak bikin memory leak. Biasanya dilakukan di metode dispose pada StatefulWidget:


@override
void dispose() {
  _namaController.dispose(); // Jangan lupa buang remote-nya!
  super.dispose();
}

Mempercantik TextField

TextField bisa dihias-hias pakai properti decoration yang isinya InputDecoration. Ada banyak banget opsi buat bikin TextField kalian estetik!


TextField(
  controller: _namaController,
  decoration: InputDecoration(
    labelText: 'Nama Pengguna',
    hintText: 'Misal: Budi Santoso',
    prefixIcon: Icon(Icons.person), // Ikon di awal
    suffixIcon: IconButton( // Ikon di akhir, bisa diklik
      icon: Icon(Icons.clear),
      onPressed: () {
        _namaController.clear(); // Hapus teks kalo ikon clear diklik
      },
    ),
    border: OutlineInputBorder( // Border kotak
      borderRadius: BorderRadius.circular(10.0),
    ),
    filled: true, // Isi dengan warna background
    fillColor: Colors.grey[200], // Warna background
  ),
  keyboardType: TextInputType.emailAddress, // Jenis keyboard yang muncul
  obscureText: false, // Buat password, jadi teksnya bintang-bintang
)

Wah, banyak banget ya opsinya? Ini baru beberapa, sisanya bisa kalian eksplorasi sendiri di dokumentasi Flutter. Seru kan?!

Gestur-Gestur Ajaib dari Jempol Pengguna

Selain tombol dan input teks, pengguna juga bisa berinteraksi lewat sentuhan jempol mereka, alias gestur. Contohnya tap (sentuh), long press (tekan lama), swipe (geser), dan banyak lagi. Untuk "menangkap" gestur ini, kita punya GestureDetector!

GestureDetector: Sang Penangkap Gerakan

GestureDetector adalah widget yang memungkinkan kita mendeteksi berbagai jenis gestur pada widget anaknya. Cukup bungkus widget yang ingin dideteksi gesturnya dengan GestureDetector, lalu tentukan gestur apa yang mau didengarkan.


GestureDetector(
  onTap: () {
    print('Kotak diklik (tap)!');
  },
  onLongPress: () {
    print('Kotak ditekan lama (long press)!');
  },
  onDoubleTap: () {
    print('Kotak diklik dua kali (double tap)!');
  },
  child: Container(
    height: 100,
    width: 100,
    color: Colors.blue,
    alignment: Alignment.center,
    child: Text(
      'Sentuh Aku!',
      style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
    ),
  ),
)

Di contoh di atas, kita bungkus sebuah Container dengan GestureDetector. Sekarang, setiap kali pengguna menyentuh, menekan lama, atau mengklik dua kali kotak biru itu, fungsi yang sesuai di onTap, onLongPress, atau onDoubleTap bakal dieksekusi.

Ingat, properti gestur yang lain seperti onPanUpdate (untuk geser-geser), onScaleUpdate (untuk zoom), dan lainnya juga tersedia. Eksplorasi ya!

Nah, gimana? Udah mulai kerasa kan aplikasi kalian makin hidup? Dari yang cuma dipandangi, sekarang bisa diajak ngobrol, disuruh nulis, sampai disentuh-sentuh. Keren banget kan! Belajar Flutter emang bikin nagih kayak kopi pahit pas lagi lembur ngoding.

Yuk, Latihan Biar Makin Jago!

Teori doang mah nggak afdol, Bro! Sekarang waktunya kita praktik. Anggap aja ini skenario nyata dari salah satu client kamu:

Pak Budi, pemilik warung kopi 'Ngoding Bareng', minta tolong kamu bikinin aplikasi sederhana buat meja kasir. Dia mau aplikasinya punya fitur begini:

  1. Ada TextField untuk input "Nama Pelanggan". Tambahin labelText dan hintText biar jelas.
  2. Di bawah TextField, ada ElevatedButton bertuliskan "Pesan Kopi".
    • Kalau tombol ini diklik, di bawah tombol muncul Text yang menampilkan "Pesanan Kopi untuk [Nama Pelanggan] Sedang Diproses!". Pastikan nama pelanggannya diambil dari TextField tadi ya.
    • Jika TextField kosong saat tombol diklik, tampilkan "Nama pelanggan belum diisi!".
  3. Bikin TextButton bertuliskan "Clear Input". Tombol ini fungsinya buat menghapus semua teks di TextField "Nama Pelanggan".
  4. Ini yang paling canggih: Bungkus Text "Pesanan Kopi Anda Sedang Diproses!" tadi dengan GestureDetector.
    • Kalau teks itu di-onLongPress (ditekan lama), munculkan SnackBar (pesan singkat di bawah layar) bertuliskan "Terima kasih atas pesanannya, [Nama Pelanggan]!".

Gimana? Lumayan menantang tapi seru kan? Coba deh kalian kerjain sendiri, jangan langsung copas dari internet ya! Kalo mentok, boleh buka-buka lagi catatan ini. Semangat ngodingnya, calon master Flutter!

Sampai jumpa di Part selanjutnya, di mana kita bakal bahas sesuatu yang lebih advanced lagi!

Bagikan Artikel Ini