Flutter tutorial : Membuat pop up menu sederhana

Hello people spirit of learning!

Kita pasti sering melihat aplikasi kita ada tombol navigasi yang berbentuk tanda 3 titik. Itu dinamakan Pop up menu. Pop up menu ini fungsinya mirip seperti Bottom navbar dan Appbar yaitu Membuat menu dan saat ditekan terjadi sebuah interaksi atau bisa juga berpindah halaman. Disini kita akan membuat Pop up menu sederhana.

1) Membuat Widget Scaffold

Scaffold(
appBar: AppBar(actions: []),
)

Langkah awal pastinya Menambahkan widget Scaffold terlebih dahulu. Setelah menambahkan widget scaffold. Didalamnya tambahkan properti appBar dan diisi dengan Widget Appbar. Setelah diisi dengan Widget AppBar, tambahkan properti actions didalamnya.

2) Menambahkan Widget PopUpMenu

Scaffold(
appBar: AppBar(actions: [
PopupMenuButton(itemBuilder: (context) => [       

],)
      ]),
    )

Langkah kedua menambahkan widget PopupMenuButton pada properti Actions. Pada widget PopupMenuButton terdapat properti yang harus kita isi Yaitu itemBuilder. Fungsi dari properti itemBuilder adalah menampilkan menu jika tombol Pop up nya ditekan. Properti ini berbentuk void function yang bertipe List, dan hanya bisa diisi dengan tipe class abstract PopUpMenuEntry. Untuk mengetahui isi fungsi class PopUpMenuEntry, bisa membaca dokumentasinya disini.

3) Menambahkan Widget PopupMenuItem

Scaffold(
         appBar: AppBar(actions: [
             PopupMenuButton(
                itemBuilder: (context) => [
                    PopupMenuItem(child: Text('Settings')),
                    PopupMenuItem(child: Text('Options')),
                    PopupMenuItem(child: Text('Logout'))
       ],
      )
    ]),
  )

Langkah terakhir adalah menambahkan widget PopupMenuItem. widget ini berfungsi untuk menambahkan menu Pop up. Bebas kita bisa isi sesuai keinginan.

Kita barusan saja membuat Popup Menu sederhana. Popup menu biasanya dipakai untuk melihat menu yang lebih banyak.

Semoga bermanfaaat dan terima kasih !

Perfect Place To Begin Your Career Development

BuildWith Angga.