Flutter UI Essentials — Menus

Maneesha Erandi
4 min readMay 30, 2023

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.

Usage

  • 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

--

--