Tombol Interaktif Flutter: FlatButton, RaisedButton, IconButton & Migrasi Modern

Yo, gaes! Apa kabar nih para developer kece? Kali ini kita mau ngebahas salah satu elemen paling fundamental di setiap aplikasi: tombol! Yap, tanpa tombol, aplikasi kita berasa hambar kayak sayur tanpa garam, setuju kan? Tombol itu ibarat gerbang interaksi antara user sama aplikasi kita. Nah, di Flutter, ada beberapa jenis tombol interaktif yang dulu sering banget kita pakai, yaitu FlatButton, RaisedButton, dan IconButton.

Tapi, eits! Dunia Flutter ini dinamis banget, ngab. Ada yang di-deprecate, ada yang baru, biar makin keren dan sesuai sama Material Design terbaru. Jadi, di artikel ini kita bakal nge-spill tuntas sejarah, fungsi, sampai cara migrasi ke tombol modern yang lebih kekinian dan powerful! Skuy, kita gas!

Kenalan Sama Trio Tombol Legendaris (Dulu & Sekarang)

Sebelum kita nyemplung ke kodenya, mari kita kenalan dulu sama masing-masing vibes tombol ini:

1. FlatButton (Sekarang Jadi TextButton)

• Vibes Dulu: FlatButton itu tombol yang paling sederhana, gaes. Nggak punya bayangan (shadow/elevation), alias rata aja sama background. Cocok banget buat aksi yang nggak terlalu menonjol atau saat ditempatkan di dalam dialog.
• Kenapa Deprecated? Karena Material Design 2 sudah beranjak ke Material Design 3. FlatButton ini digantiin sama TextButton biar lebih konsisten dan modern.
• Fungsi Utama: Memberikan aksi yang low-emphasis. Misalnya, opsi "Batal" atau "Oke" di dalam sebuah dialog, atau tombol navigasi di dalam AppBar yang nggak perlu terlalu mencolok.

2. RaisedButton (Sekarang Jadi ElevatedButton)

• Vibes Dulu: Nah, kalau RaisedButton ini kebalikannya FlatButton. Dia punya efek bayangan (elevation) yang bikin tombolnya kelihatan "terangkat" dari permukaan. Memberikan kesan high-emphasis dan biasanya dipakai buat aksi utama.
• Kenapa Deprecated? Sama kayak FlatButton, RaisedButton juga digantiin sama ElevatedButton biar sejalan sama Material Design terbaru.
• Fungsi Utama: Memberikan aksi yang high-emphasis atau paling penting di suatu tampilan. Contohnya, tombol "Submit", "Daftar", atau "Beli Sekarang".

3. IconButton

• Vibes Kekinian: Nah, kalau IconButton ini masih eksis dan tetap stylish sampai sekarang, gaes! Sesuai namanya, tombol ini berupa ikon yang bisa diklik.
• Fungsi Utama: Digunakan untuk aksi yang bisa diwakilkan dengan ikon, tanpa perlu teks. Biasanya buat navigasi (misal, tombol "Back" atau "Menu"), atau aksi kecil seperti "Like", "Share", atau "Edit". Efisien banget buat menghemat ruang di UI.

Migrasi ke Era Modern: TextButton, ElevatedButton, dan OutlinedButton

Oke, karena FlatButton dan RaisedButton sudah resmi pensiun, sekarang kita pakai TextButton dan ElevatedButton. Ada satu lagi nih yang sering dipakai buat melengkapi, namanya OutlinedButton. Yuk, kita lihat perbandingannya dan cara pakainya!

• TextButton: Penerus FlatButton. Cocok untuk low-emphasis actions.
• ElevatedButton: Penerus RaisedButton. Cocok untuk high-emphasis actions.
• OutlinedButton: Tombol dengan border tipis dan tanpa elevation default. Cocok untuk medium-emphasis actions atau sebagai opsi sekunder.

Praktik Ngoding: Yuk, Bikin Tombol-tombol Kece!

Skuy, langsung aja kita coba implementasi di kode biar makin paham! Kita akan buat satu halaman sederhana yang menampilkan ketiga tombol modern ini.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tombol Interaktif Kece',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
        // Kita bisa atur default style untuk semua tombol di sini, gaes!
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(
            foregroundColor: Colors.deepPurple, // Warna teks default TextButton
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.deepPurple, // Background default ElevatedButton
            foregroundColor: Colors.white, // Warna teks default ElevatedButton
          ),
        ),
        outlinedButtonTheme: OutlinedButtonThemeData(
          style: OutlinedButton.styleFrom(
            foregroundColor: Colors.deepPurple, // Warna teks default OutlinedButton
            side: const BorderSide(color: Colors.deepPurple), // Warna border default
          ),
        ),
      ),
      home: const TombolKecePage(),
    );
  }
}

class TombolKecePage extends StatefulWidget {
  const TombolKecePage({super.key});

  @override
  State<TombolKecePage> createState() => _TombolKecePageState();
}

class _TombolKecePageState extends State<TombolKecePage> {
  String _pesanTerakhir = 'Belum ada tombol yang ditekan';

  void _tampilkanPesan(String pesan) {
    setState(() {
      _pesanTerakhir = pesan;
    });
    // Ini pakai SnackBar, biar ada notifikasi kecil di bawah layar
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(pesan),
        duration: const Duration(milliseconds: 800),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tombol Interaktif Kekinian!'),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings),
            tooltip: 'Pengaturan Aplikasi', // Penting buat aksesibilitas!
            onPressed: () {
              _tampilkanPesan('Icon Pengaturan ditekan!');
            },
          ),
        ],
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              // Teks untuk menampilkan pesan
              Text(
                'Status: $_pesanTerakhir',
                textAlign: TextAlign.center,
                style: Theme.of(context).textTheme.headlineSmall,
              ),
              const SizedBox(height: 30),

              // 1. TextButton (Penerus FlatButton)
              TextButton(
                onPressed: () {
                  _tampilkanPesan('TextButton "Batal" ditekan!');
                },
                child: const Text('Batal'),
              ),
              const SizedBox(height: 10),

              // TextButton dengan custom style
              TextButton(
                style: TextButton.styleFrom(
                  foregroundColor: Colors.red, // Warna teks jadi merah
                ),
                onPressed: () {
                  _tampilkanPesan('TextButton Merah ditekan!');
                },
                child: const Text('Hapus Item'),
              ),
              const SizedBox(height: 20),

              // 2. ElevatedButton (Penerus RaisedButton)
              ElevatedButton(
                onPressed: () {
                  _tampilkanPesan('ElevatedButton "Kirim" ditekan!');
                },
                child: const Text('Kirim Data'),
              ),
              const SizedBox(height: 10),

              // ElevatedButton dengan custom style
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green, // Background hijau
                  foregroundColor: Colors.white, // Teks putih
                  padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 15), // Padding lebih gede
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20), // Sudut melengkung
                  ),
                ),
                onPressed: () {
                  _tampilkanPesan('ElevatedButton Kustom ditekan!');
                },
                child: const Text('Bayar Sekarang!', style: TextStyle(fontSize: 16)),
              ),
              const SizedBox(height: 20),

              // 3. OutlinedButton (opsi tambahan yang sering dipakai)
              OutlinedButton(
                onPressed: () {
                  _tampilkanPesan('OutlinedButton "Pelajari Lebih" ditekan!');
                },
                child: const Text('Pelajari Lebih Lanjut'),
              ),
              const SizedBox(height: 10),

              // OutlinedButton yang disabled (onPressed: null)
              OutlinedButton(
                onPressed: null, // Kalau onPressed null, tombolnya otomatis disabled!
                child: const Text('Tombol Disabled'),
              ),
              const SizedBox(height: 20),

              // 4. IconButton di dalam body (contoh lain)
              Align(
                alignment: Alignment.center,
                child: IconButton(
                  icon: const Icon(Icons.favorite),
                  color: Colors.pink,
                  iconSize: 48.0,
                  tooltip: 'Suka Ini',
                  onPressed: () {
                    _tampilkanPesan('IconButton Favorit ditekan!');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _tampilkanPesan('FAB ditekan! (Ini juga sejenis tombol!)');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Tips & Trik Biar Tombolmu Makin Kece dan Fungsional!

1. Pilih yang Tepat:

   • TextButton: Buat aksi yang nggak terlalu menonjol. Mikir aja, kayak link teks yang bisa diklik.
   • ElevatedButton: Buat aksi utama yang perlu perhatian. Kesannya "Yuk, klik aku!".
   • OutlinedButton: Opsi kedua setelah ElevatedButton. Memberi penekanan tapi nggak sekuat ElevatedButton. Cocok buat "opsi alternatif".
   • IconButton: Kalau aksinya bisa diwakilkan pakai ikon, biar UI lebih bersih.
   • FloatingActionButton (FAB): Buat aksi primer di suatu halaman yang sifatnya menambahkan atau membuat sesuatu yang baru.

2. Styling Tombol (Theming is King!):

   • Global Theme: Di contoh kode tadi, kita set textButtonTheme, elevatedButtonTheme, dan outlinedButtonTheme di ThemeData. Ini best practice banget, gaes! Jadi, semua tombol di aplikasi kita punya gaya default yang konsisten. Hemat waktu dan bikin aplikasi makin profesional.
   • Per-Tombol: Kalau butuh gaya yang beda untuk satu tombol aja, bisa pakai properti style langsung di widget tombolnya. Gunakan TextButton.styleFrom, ElevatedButton.styleFrom, atau OutlinedButton.styleFrom untuk styling yang mudah dan sesuai Material Design.

3. Disable Tombol dengan Elegan:

   • Gampang banget! Cukup set onPressed: null. Otomatis tombolnya akan terlihat disabled (warna teks/ikon jadi pudar) dan nggak bisa diklik. Penting banget nih buat validasi input atau saat menunggu proses loading.

4. Aksesibilitas itu Penting, Gaes!

   • Untuk IconButton, selalu pakai properti tooltip. Ini akan menampilkan teks kecil saat user menekan lama ikonnya, membantu user memahami fungsi ikon tersebut, terutama buat user berkebutuhan khusus atau yang kurang familiar dengan ikon tertentu.

5. InkWell atau GestureDetector untuk Kontrol Penuh:

   • Kalau kamu butuh area yang bisa diklik tapi nggak bisa dipenuhi oleh tombol-tombol standar (misal, klik di seluruh area card), kamu bisa pakai InkWell atau GestureDetector. Mereka ngasih kamu kontrol lebih banyak atas gestures yang bisa dideteksi. Tapi, untuk tombol standar, selalu pakai widget tombol yang sudah disediakan Flutter ya!

Kesimpulan: Tombol Bukan Sekadar Tombol!

Nah, gimana gaes? Sekarang udah makin tercerahkan kan soal dunia per-tombol-an di Flutter? Dari FlatButton dan RaisedButton yang kini jadi TextButton dan ElevatedButton, sampai IconButton yang tetap nge-hits. Memahami tombol-tombol ini adalah fondasi penting banget buat bikin UI yang interaktif, responsif, dan tentunya user-friendly.

Jangan cuma bisa ngoding doang, tapi pahami juga best practices dan kenapa suatu widget itu berubah. Dengan gitu, skill Flutter kamu bakal makin diasah dan aplikasi yang kamu bangun juga makin keren dan relevan dengan perkembangan ekosistem Flutter.

Terus semangat ngulik dan eksplorasi ya, ngab! Yuk, bikin aplikasi-aplikasi yang bikin mata melongo! Sampai jumpa di artikel berikutnya!