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 :

Subscribe

Related articles

Tips Kolaborasi Efektif antara UI/UX Desainer dan Pengembang

Kerja sama yang solid antara UI/UX desainer dan pengembang...

Aturan Penting yang Harus Dipatuhi oleh Seorang UI/UX Designer

Desain Antarmuka Pengguna (UI) dan Pengalaman Pengguna (UX) adalah...

Membangun Profil LinkedIn yang Mengesankan untuk UI/UX Designer

Dalam era digital yang semakin maju, LinkedIn telah menjadi...

Meningkatkan Karir Anda dengan Sertifikasi Google UX

Dalam dunia yang semakin terhubung secara digital, pengalaman pengguna...

Perjalanan Seorang Intern UI/UX Desainer di Udacoding

Sebagai seorang mahasiswa yang bersemangat dan bercita-cita tinggi di...

LEAVE A REPLY

Please enter your comment!
Please enter your name here