How to Add Menus In Flutter

A menu can be the complete user interface of a system or only a portion of a more sophisticated one. In the same way, menus in Flutter present a list of options on temporary surfaces. When users interact with a button, action, or other control, they appear.

Fundamental of Menus In Flutter

Naturally, menus should be simple to read, scan, and navigate.

Types of Menus in Flutter

Firstly, to iterate, dropdown menus show a list of options that are activated by an icon, button, or action. Their position varies depending on the element that opens them.

Dropdown menus

Dropdown menus show a list of options that are activated by an icon, button, or action. Their position varies depending on the element that opens them.

Exposed Dropdown Menu

In exposed dropdown menus, the currently selected menu item is displayed above the list of options. Some variations allow for human input.

Code Implementation

First, here is the code to implement the Dropdown Menu, and secondly, the Exposed Dropdown Menu.

PopupMenuButton(
  icon: Icon(Icons.more_vert),
  itemBuilder: (BuildContext context) => <PopupMenuEntry>[
    const PopupMenuItem(
      child: ListTile(
        leading: Icon(Icons.add),
        title: Text('Item 1'),
      ),
    ),
    const PopupMenuItem(
      child: ListTile(
        leading: Icon(Icons.anchor),
        title: Text('Item 2'),
      ),
    ),
    const PopupMenuItem(
      child: ListTile(
        leading: Icon(Icons.article),
        title: Text('Item 3'),
      ),
    ),
    const PopupMenuDivider(),
    const PopupMenuItem(child: Text('Item A')),
    const PopupMenuItem(child: Text('Item B')),
  ],
),

DropdownButton(
  value: dropdownValue,
  items: <DropdownMenuItem>[
    DropdownMenuItem(
      value: 'Option 1',
      child: Text('Option 1'),
    ),
    DropdownMenuItem(
      value: 'Option 2',
      child: Text('Option 2'),
    ),
    DropdownMenuItem(
      value: 'Option 3',
      child: Text('Option 3'),
    ),
    DropdownMenuItem(
      value: 'Option 4',
      child: Text('Option 4'),
    ),
    DropdownMenuItem(
      value: 'Option 5',
      child: Text('Option 5'),
    ),
    DropdownMenuItem(
      value: 'Option 6',
      child: Text('Option 6'),
    ),
],
  onChanged: (value) {
    setState(() {
      dropdownValue = value;
    });
  },
),

Conclusion

To conclude, we learned that Flutter menus display a set of alternatives on temporary surfaces. They appear when users interact with a button, action, or other control. It is used everywhere and even in browsers. You could check all the browsers here and see if the menus in Flutter cannot be seen in any of them. You can always check the official documentation here as well. Once again, thank you for reading. If you find this useful, share it with your friends and family.