PopMenuButton Flutter

Halo teman – teman, kali ini kita akan membahas tentang PopMenuButton pada Flutter. Hampir sama dengan DropDownButton hanya saja data pada PopMenuButton biasanya tidak akan ada perubahan, sedangkan pada DropDownButton data bisa lebih flexibel.

PopMenuButton ini biasanya lebih sering digunakan untuk menampilkan data seperti Button Keluar.
Berikut untuk code nya :

Container(
            child: PopupMenuButton<int>(
              onSelected: (value) {
                Navigator.pop(context);
              },
              icon: Icon(Icons.view_headline),
              itemBuilder: (context) => [
                PopupMenuItem(
                  child: Text(
                    "Keluar",
                    style: TextStyle(
                      fontWeight: FontWeight.w400,
                      fontFamily: "Nunito",
                      fontSize: 16,
                    ),
                  ),
                  value: 1,
                ),
              ],
            ),
          ),

Adapun code untuk informasi status seperti berikut :

Container(
            child: PopupMenuButton(
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(4),
                  color: Colors.white,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'Available',
                      style: TextStyle(
                        fontSize: 13,
                        fontFamily: 'Roboto',
                        color: Color(0xff484545),
                      ),
                    ),
                    Icon(
                      Icons.keyboard_arrow_down_rounded,
                      size: 15,
                    )
                  ],
                ),
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8),
              ),
              itemBuilder: (BuildContext context) => [
                PopupMenuItem(
                  child: Row(
                    children: [
                      Icon(
                        Icons.check_circle_rounded,
                        color: Color(0xff88BE34),
                        size: 18,
                      ),
                      SizedBox(width: 9),
                      Text(
                        'Available',
                        style: TextStyle(
                          fontSize: 13,
                          fontFamily: 'Roboto',
                          color: Color(0xff484545),
                        ),
                      ),
                    ],
                  ),
                ),
                PopupMenuItem(
                  child: Row(
                    children: [
                      Icon(
                        Icons.circle,
                        color: Color(0xffBE3144),
                        size: 18,
                      ),
                      SizedBox(width: 9),
                      Text(
                        'Busy',
                        style: TextStyle(
                          fontSize: 13,
                          fontFamily: 'Roboto',
                          color: Color(0xff484545),
                        ),
                      ),
                    ],
                  ),
                ),
                PopupMenuItem(
                  child: Row(
                    children: [
                      Icon(
                        Icons.remove_circle_sharp,
                        color: Color(0xffBE3144),
                        size: 18,
                      ),
                      SizedBox(width: 9),
                      Text(
                        'Don’t disturb',
                        style: TextStyle(
                          fontSize: 13,
                          fontFamily: 'Roboto',
                          color: Color(0xff484545),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

Adapun hasil running nya seperti berikut :

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here