Home Android PopMenuButton Flutter

PopMenuButton Flutter

0
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 :