Flutter UI Essentials — Menus
--
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
Configurations
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
States
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.
