Flutter UI Essentials — Menus

Maneesha Erandi
4 min readMay 30

This article will give you a little idea about the Material UI menu component and the Flutter material PopupMenuButton button example with Material 3 design changes.

We use a Menu to display a set of choices without using the app's screen surface. Menus help us make a selection from those choices while appearing on a temporary surface.

We can make a menu appear when the user interacts with a button, a text field, an icon button, or some other control element.

According to the material design guidelines menus should be

  • Easy to use, open, close or interacts with
  • Menu items should be easy to scan and should contain some thing user need according to the action

What’s new with material 3

  • Color: same as other new material components, new color mappings.
  • Types: dropdown menus and exposed dropdown menus are now both known as menus.


  • Display a list of choices in a temporary space — set of overflow actions in a top app bar
  • Make a selection from a dropdown — it will take less space than other selection elements(ex: chips, radio buttons)
  • Menu will appear on top of other UI elements and disappear when we tap on our action


A menu will appear when users interact with a button or some other action control. Find a few examples below that we can use to open a menu.

  • Button
  • Text field
  • Icon button
  • Selected text


This is what users will see when they interact with a component or element. As examples, we can name enabled, disabled, hover, focused and pressed as these material states. We can find the visual behavior of these states of a menu item from material design menu specs.

If you want to explore more about interactive states, follow my article about materialstateproperties.

Maneesha Erandi

I write about mobile development and wildlife.