Hari 5: Widget Interaktif di Flutter

Fri, May 2025 14:32:30

Halo teman-teman! Di hari ke-5 kita bakal bahas hal yang sangat penting dalam pengembangan aplikasi Flutter, yaitu widget interaktif. Ini adalah komponen yang memungkinkan aplikasi kita berinteraksi langsung dengan pengguna. Kita akan fokus pada beberapa widget penting seperti:

• ElevatedButton
• TextButton
• TextField
• GestureDetector

Kita juga akan bahas cara menangani input dari user. Yuk langsung aja kita mulai!

1. Apa Itu Widget Interaktif?

Widget interaktif adalah widget yang bisa merespon aksi dari pengguna, seperti tap, input teks, atau geser. Biasanya digunakan untuk navigasi, formulir, dan interaksi lainnya yang menjadikan aplikasi terasa "hidup" dan responsif.

2. ElevatedButton

Apa itu ElevatedButton?

ElevatedButton adalah tombol dengan elevasi, alias tampak seperti mengambang. Biasanya digunakan untuk aksi utama di sebuah halaman.

Contoh Penggunaan:

ElevatedButton(
  onPressed: () {
    print('Tombol diklik!');
  },
  child: Text('Klik Saya'),
)

Penjelasan:

• onPressed: Fungsi yang dijalankan saat tombol ditekan.
• child: Isi dari tombol, biasanya Text.

Tambahan Styling:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.green,
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
    textStyle: TextStyle(fontSize: 18),
  ),
  onPressed: () {},
  child: Text('Submit'),
)

3. TextButton

Apa itu TextButton?

TextButton adalah tombol berbasis teks tanpa elevasi. Cocok untuk aksi sekunder seperti "Lupa Password?", "Batal", atau navigasi sederhana.

Contoh Penggunaan:

TextButton(
  onPressed: () {
    print('Teks tombol diklik');
  },
  child: Text('Batal'),
)

Styling Tambahan:

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.red,
  ),
  onPressed: () {},
  child: Text('Hapus'),
)

4. TextField

Apa itu TextField?

TextField digunakan untuk input teks dari pengguna, seperti nama, email, password, dll.

Contoh Penggunaan:

TextField(
  decoration: InputDecoration(
    labelText: 'Nama',
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('Input: $value');
  },
)

Menyimpan Nilai Input:

Gunakan TextEditingController:

TextEditingController namaController = TextEditingController();

TextField(
  controller: namaController,
  decoration: InputDecoration(labelText: 'Nama'),
)

ElevatedButton(
  onPressed: () {
    print(namaController.text);
  },
  child: Text('Submit'),
)

5. GestureDetector

Apa itu GestureDetector?

GestureDetector memungkinkan kita mendeteksi berbagai gesture seperti tap, double tap, long press, dll. Biasanya dipakai saat kita ingin elemen non-button seperti gambar atau container merespon aksi pengguna.

Contoh Penggunaan:

GestureDetector(
  onTap: () {
    print('Container ditekan');
  },
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.amber,
    child: Text('Tap Aku'),
  ),
)

Gesture Lain:

GestureDetector(
  onDoubleTap: () => print('Double Tap!'),
  onLongPress: () => print('Long Press!'),
  child: Icon(Icons.favorite, size: 50),
)

6. Menangani Input dari User

Gunakan State

Untuk menyimpan dan menampilkan kembali input dari user, kita harus menggunakan StatefulWidget.

Contoh:

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  TextEditingController namaController = TextEditingController();

  String hasil = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: namaController,
          decoration: InputDecoration(labelText: 'Masukkan Nama'),
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              hasil = namaController.text;
            });
          },
          child: Text('Tampilkan'),
        ),
        Text('Halo, $hasil'),
      ],
    );
  }
}

Penjelasan:

• Kita menggunakan TextEditingController untuk menangkap input.
• setState untuk meng-update tampilan saat data berubah.

7. Latihan

Coba buat form sederhana yang memiliki:

• Input nama
• Input email
• Tombol submit
• Menampilkan hasil input setelah tombol ditekan

Tambahkan validasi sederhana seperti tidak boleh kosong.

8. Kesimpulan

Widget interaktif di Flutter sangat powerful. Dengan ElevatedButton, TextButton, TextField, dan GestureDetector, kita bisa membuat aplikasi yang benar-benar bisa merespon pengguna. Penting juga memahami konsep state agar aplikasi bisa merespon dan menampilkan data secara dinamis.

Terus eksplor dan jangan takut coba-coba ya!

Sampai jumpa di hari ke-6!

Terus belajar bareng-bareng!