Flutter Design – Menampilkan Snackbar Pada Aplikasi

Untuk teman-teman yang akan baru memulai belajar Flutter silahkan masuk ke artikel ini dulu ya teman-teman ➡ Aplikasi Pertamaku “Halo Semuaaa…“. Jika sudah yuk lanjut baca artikel ini…

Jangan lupa baca artikel sebelumnya ya teman-teman ➡ Menambahkan Drawer Pada Aplikasi

Pada artikel ini kita akan mencoba menampilkan snackbar yang berguna untuk memberi tahu pengguna secara langsung saat tindakan tertentu terjadi. Misalnya, saat pengguna menghapus pesan dalam list, maka akan muncul notifikasi yang memberi tahu mereka bahwa pesan tersebut telah dihapus. Bahkan nantinya, ada opsi yang diberikan untuk pengguna agar dapat membatalkan tindakan.

Dalam Material Design, ini adalah tugas SnackBar. Berikut langkah-langkah yang akan dibahas pada artikel ini:

1. Membuat Scaffold.
2. Menampilkan SnackBar.
3. Menyediakan tindakan pilihan.

1. Membuat Scaffold

Seperti yang kita pahami saat membuat aplikasi yang mengacu pada Material Design guidelines, aplikasi yang kita buat akan memiliki struktur visual yang konsisten. Pada contoh ini, kita akan membuat SnackBar yang akan muncul dari bawah layar tanpa menumpang tindih widget penting lainnya seperti FloatingActionButton.

Widget Scaffold yang telah disediakan oleh material library akan membuat struktur visual tersebut dan memastikan bahwa widget penting lainnya tidak tertindih.

Scaffold(
  appBar: AppBar(
    title: Text('SnackBar Demo'),
  ),
  body: SnackBarPage(), // Complete this code in the next step.
);

2. Menampilkan SnackBar

Selanjutkan kita akan menampilkan SnackBar dengan meletakkannya pada Scaffold. Pertama, buat SnackBar, lalu tampilkan menggunakan ScaffoldMessenger.

final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));

// Find the ScaffoldMessenger in the widget tree
// and use it to show a SnackBar.
ScaffoldMessenger.of(context).showSnackBar(snackBar);

3. Menyediakan Tindakan Pilihan

Pada langkah ini kita akan menyediakan tindakan pilihan kepada pengguna ketika SnackBar ditampilkan. Contohnya, jika pengguna secara tidak sengaja menghapus sebuah pesan maka akan muncul pilihan pada SnackBar untuk membatalkan tindakan menghapus pesan tersebut. Berikut cuplikan program yang menyediakan optional action pada widget SnackBar:

final snackBar = SnackBar(
  content: Text('Yay! A SnackBar!'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // Some code to undo the change.
    },
  ),
);

Berikut cuplikan kode dan simulasinya, jika teman-teman menggunakan VSCode jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, maka berikut hasil akhirnya (Klik “Show SnackBar”).

Jika ada pertanyaan silahkan komen dan jika artikel ini dirasa bermanfaat, jangan lupa like dan sharenya ya teman-teman. ??????? Sampai bertemu di artikel selanjutnya.
Terima Kasih, Assalamu’alaykum… Salam KODINGINDONESIA

Referensi : https://flutter.dev//

Anton Prafanto

Konten developer kodingindonesia.com & staf pengajar tetap di Universitas Mulawarman Samarinda

all author posts