Quds Popup Menu

A new way to show advanced popup menu in Flutter.

What is Quds Popup Menu

It's a part of Quds UI Kit, which introduce an advanced way to show a popup menu with collecting commands in seperate sections.

How to use?

Quds Popup Menu consists of the following:

  • QudsPopupButton To show to Quds Popup Menu.

  • QudsPopupMenuSection To add an section with sub items.

  • QudsPopupMenuItem To add a seperate item.

  • QudsPopupMenuWidget To add an item with custom widget.

  • QudsPopupMenuDivider To add a divider between the menu items

  • showQudsPopupMenu To show QudsPopupMenu without QudsPopupButton

QudsPopupButton(
              // backgroundColor: Colors.red,
              tooltip: 'T',
              items: getMenuItems(),
              child: Icon(Icons.menu)),
      
    
List<QudsPopupMenuBase> getMenuItems() {
    return [
      QudsPopupMenuSection(
          backgroundColor: Colors.yellow.shade200,
          titleText: 'أبو أسعد الأمير',
          subTitle: Text('See your profile'),
          leading: Icon(
            Icons.redeem,
            size: 40,
          ),
          subItems: [
            QudsPopupMenuSection(
                titleText: 'Settings',
                leading: Icon(Icons.settings),
                subItems: [
                  QudsPopupMenuItem(
                      leading: Icon(Icons.logout),
                      title: Text('Logout'),
                      onPressed: () {
                        showToast('Logout Pressed!');
                      })
                ]),
          ]),
      QudsPopupMenuDivider(),
      QudsPopupMenuItem(
          leading: Icon(Icons.info_outline),
          title: Text('Give Feedback'),
          subTitle: Text('Help us improve our new app'),
          onPressed: () {
            showToast('Feedback Pressed!');
          }),
      QudsPopupMenuDivider(),
      QudsPopupMenuSection(
          leading: Icon(Icons.place),
          titleText: 'Settings & Privacy',
          subItems: [
            QudsPopupMenuItem(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onPressed: () {
                  showToast('Settings Pressed!');
                }),
            QudsPopupMenuItem(
                leading: Icon(Icons.lock),
                title: Text('Privacy Checkup'),
                onPressed: () {
                  showToast('Privacy Checkup Pressed!');
                }),
            QudsPopupMenuItem(
                leading: Icon(Icons.lock_clock),
                title: Text('Privacy Shortcuts'),
                onPressed: () {
                  showToast('Privacy Shourtcuts Pressed!');
                }),
            QudsPopupMenuItem(
                leading: Icon(Icons.list),
                title: Text('Activity Log'),
                onPressed: () {
                  showToast('Activity Log Pressed!');
                }),
            QudsPopupMenuItem(
                leading: Icon(Icons.card_membership),
                title: Text('News Feed Preferences'),
                onPressed: () {
                  showToast('News Feed Preferences Pressed!');
                }),
            QudsPopupMenuItem(
                leading: Icon(Icons.language),
                title: Text('Language'),
                onPressed: () {
                  showToast('Language Pressed!');
                }),
          ]),
      QudsPopupMenuDivider(),
      QudsPopupMenuWidget(
          builder: (c) => Container(
              padding: EdgeInsets.all(10),
              child: IntrinsicHeight(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    IconButton(
                        onPressed: () {
                          showToast('Favourite Pressed!');
                        },
                        icon: Icon(
                          Icons.favorite,
                          color: Colors.red,
                        )),
                    VerticalDivider(),
                    IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.music_note,
                          color: Colors.blue,
                        )),
                    VerticalDivider(),
                    IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.umbrella,
                          color: Colors.green,
                        ))
                  ],
                ),
              )))
    ];
  }

Libraries

quds_popup_menu
Quds Popup Menu introduce an advanced way to show popup menu, with several sections with simple transition between the sections.