Panduan Lengkap FloatingActionButton di Flutter: Cara Membuat Tombol Aksi Mengambang yang Stylish dan Fungsional

Flutter adalah framework UI modern yang memudahkan kita membangun aplikasi mobile, web, dan desktop. Salah satu widget yang sering digunakan untuk interaksi cepat adalah FloatingActionButton (FAB).

FAB adalah tombol berbentuk bulat yang mengambang di atas konten aplikasi, biasanya digunakan untuk aksi utama, seperti menambahkan item, membuat pesan baru, atau memulai aktivitas penting.

Di artikel ini, kita akan membahas secara lengkap semua atribut FAB, berbagai variasi, serta tips praktis agar tombol ini lebih fungsional, stylish, dan interaktif.

1. Apa Itu FloatingActionButton?

Secara sederhana, FloatingActionButton adalah tombol bulat mengambang yang menonjol di atas konten aplikasi. Biasanya diposisikan di kanan bawah layar, tapi bisa dipindahkan sesuai kebutuhan.

Contoh FAB dasar:

Scaffold(
  appBar: AppBar(title: const Text('FAB Demo')),
  body: const Center(child: Text('Hello, Flutter!')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      print('FAB clicked!');
    },
    child: const Icon(Icons.add),
  ),
)

Dengan kode ini, kita sudah memiliki tombol aksi bulat dengan ikon plus di kanan bawah layar.

2. Atribut Utama FloatingActionButton

FAB memiliki banyak atribut yang bisa diatur. Berikut daftar lengkap beserta penjelasan:

a. onPressed

Atribut ini wajib ada, karena menentukan aksi yang dijalankan saat FAB ditekan.

FloatingActionButton(
  onPressed: () {
    print('Button pressed');
  },
  child: const Icon(Icons.add),
)

Tanpa onPressed, tombol tidak interaktif.

b. child

child biasanya digunakan untuk menampilkan ikon atau teks di dalam FAB.

FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.edit),
)

Tips: Gunakan ikon yang mudah dikenali untuk mewakili aksi utama.

c. backgroundColor

Menentukan warna latar belakang tombol.

FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.add),
  backgroundColor: Colors.red,
)

Tips: Gunakan warna kontras agar FAB menonjol di atas konten.

d. foregroundColor

Mengatur warna ikon atau teks di dalam FAB.

FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.add),
  backgroundColor: Colors.blue,
  foregroundColor: Colors.white,
)

e. tooltip

Teks singkat yang muncul saat FAB ditekan lama, memberikan petunjuk fungsi tombol.

FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.add),
  tooltip: 'Add new item',
)

f. elevation dan highlightElevation

• elevation → menentukan tinggi bayangan FAB dalam keadaan normal.

• highlightElevation → menentukan tinggi bayangan saat tombol ditekan.

FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.add),
  elevation: 4,
  highlightElevation: 8,
)

g. shape

Menentukan bentuk FAB. Secara default berbentuk bulat, tapi bisa diubah menjadi stadium, rectangle, atau custom shape.

FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.add),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
)

Tips: Gunakan bentuk custom untuk tampilan unik dan modern.

h. mini

Jika true, FAB menjadi lebih kecil, cocok untuk aksi sekunder atau FAB tambahan.

FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.edit),
  mini: true,
)

i. isExtended

Jika true, FAB bisa memanjang dan menampilkan teks bersama ikon, disebut Extended FAB.

FloatingActionButton.extended(
  onPressed: () {},
  icon: const Icon(Icons.add),
  label: const Text('Add Item'),
)

Extended FAB cocok untuk memberikan konteks lebih jelas daripada ikon saja.

3. Posisi FloatingActionButton

Secara default, FAB muncul di kanan bawah layar. Tapi kita bisa mengubah posisinya menggunakan Scaffold attribute floatingActionButtonLocation.

Beberapa lokasi populer:

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)

Beberapa opsi lainnya:

• FloatingActionButtonLocation.endFloat → default, kanan bawah

• FloatingActionButtonLocation.centerFloat → tengah bawah

• FloatingActionButtonLocation.startFloat → kiri bawah

Tips: Pilih lokasi yang tidak menghalangi konten utama.

4. Contoh Lengkap FloatingActionButton

Berikut contoh Scaffold dengan FAB berbagai tipe:

Scaffold(
  appBar: AppBar(title: const Text('FAB Example')),
  body: const Center(child: Text('FloatingActionButton Demo')),
  floatingActionButton: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
        tooltip: 'Add',
      ),
      const SizedBox(height: 10),
      FloatingActionButton.extended(
        onPressed: () {},
        icon: const Icon(Icons.edit),
        label: const Text('Edit'),
      ),
      const SizedBox(height: 10),
      FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.share),
        mini: true,
      ),
    ],
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
)

Dengan kode ini, kita memiliki:

• FAB utama dengan ikon plus

• Extended FAB dengan teks dan ikon

• Mini FAB untuk aksi sekunder

5. Tips Praktis Menggunakan FloatingActionButton

1. Gunakan FAB untuk aksi utama
   Jangan gunakan FAB untuk semua tombol, karena tujuan utamanya adalah aksi penting dan cepat diakses.

2. Perhatikan kontras warna
   Pastikan tombol menonjol di atas konten untuk kemudahan pengguna.

3. Tooltip untuk konteks
   Selalu tambahkan tooltip agar pengguna tahu fungsi FAB, terutama jika hanya menggunakan ikon.

4. Pertimbangkan Extended FAB untuk konteks lebih jelas
   Jika aksi FAB tidak jelas dari ikon saja, gunakan FloatingActionButton.extended.

5. Gunakan mini FAB untuk aksi sekunder
   Misalnya, FAB tambahan untuk share atau edit yang tidak terlalu dominan.

FloatingActionButton adalah widget interaktif penting di Flutter yang membantu pengguna melakukan aksi utama dengan cepat. Dengan memahami atribut-atributnya, kita bisa membuat FAB yang:

• Stylish dengan warna, bentuk, dan shadow

• Fungsional dengan onPressed, tooltip, dan extended FAB

• Fleksibel dengan lokasi, ukuran, dan mini FAB

Flutter memudahkan kita membangun UI modern, tapi menguasai FloatingActionButton adalah kunci untuk membuat aplikasi lebih profesional, interaktif, dan nyaman digunakan.

Eksperimen dengan kombinasi FAB: extended + mini + custom shapes + gradient background agar aplikasi terlihat unik dan menarik. Pengguna tidak hanya merasakan fungsionalitas, tapi juga pengalaman visual yang menyenangkan.