Question 242291 in Flutter Question posted in
The official Flutter documentation can be found here.

Advanced and beautiful dropdown menu in Flutter

How can I create this dropdown menu for appbar user profile icon, in Flutter?
I’m using Material 3.
This is an example from Atlassian pages.

  • Different sections (Account / Recent workspaces / etc) (green marks)
  • Titles for sections (yellow marks)
  • Account information not clickable (blue mark)

enter image description here

I tried to achieve this using MenuAnchor and MenuButtonItem classes, but I can’t create sections, dividers, and not clickable containers.

I expect to find some package to help me create this kind of dropdown menu, or who can help me to create it manually using Flutter widgets.

Tags:

2

Answers


  1. 0

    You can try and use PopMenuButton to Achieve this:

    PopupMenuButton(
    child: const CircleAvatar(),
    itemBuilder: (context) {
      return [
        PopupMenuItem(
          child: Container(
            alignment: Alignment.center,
            color: Colors.blue,
            height: 150,
            child: const Text('Account'),
          ),
        ),
        PopupMenuItem(
          child: Container(
            alignment: Alignment.center,
            color: Colors.teal,
            height: 150,
            child: const Text('Recent'),
          ),
        ),
        PopupMenuItem(
          child: Container(
            alignment: Alignment.center,
            color: Colors.cyan,
            height: 50,
            child: const Text('Logout'),
          ),
        ),
      ];
    },
  )

    enter image description here

    Login or Signup to reply.
  2. 0

    Try using this awesome package for dropdown
    dropdown_button2.

    It’s highly customizable as per your needs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search