MiButtonMenu

The MiButtonMenu component is a Flutter widget that renders a button which, when pressed, displays a popup menu of action items, configurable via JSON.

Overview

MiButtonMenu extends MiStatelessWidget, to the user in a popup menu triggered by tapping an icon button. The menu items are dynamically generated based on the buttonTiles parameter, enabling versatile action selection.

Component Name: buttonMenu

JSON key: "component": "buttonMenu".

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
buttonTiles	List	List<Map>	A list of JSON objects, where each object defines a button tile within the popup menu. Each object should contain keys like label (for the menu item's text) and actionName (the action to execute when the item is selected).	[]	Yes	No
icon	String	IconData	The icon to display on the button that triggers the menu. Accepts a string representing a Flutter IconData name (e.g., 'more_vert'). Converted to IconData using IconDataHelper.get.	'more_vert'	Yes	No
iconSize	num	double	The size of the icon on the button that triggers the menu. Converted from JSON num to Flutter double using DoubleHelper.get.	28.0	Yes	No
iconColor	String	Color	The color of the icon on the button that triggers the menu. Accepts color names or hex codes.	'onSurface'	Yes	No
padding	List<num>	EdgeInsets	Padding to be applied around the button icon. Expects a list of numbers representing padding values (e.g., [left, top, right, bottom] or [horizontal, vertical] or [all]). (Inherited from MiStatelessWidget)	None	Yes	No
margin	List<num>	EdgeInsets	Margin to be applied around the button. Expects a list of numbers representing margin values (e.g., [left, top, right, bottom] or [horizontal, vertical] or [all]). (Inherited from MiStatelessWidget)	None	Yes	No
alignment	String	AlignmentGeometry	How the button should be aligned within its allocated space. Accepts alignment keywords like 'topLeft', 'center', 'bottomRight', etc. Refer to Flutter's Alignment documentation. (Inherited from MiStatelessWidget)	Defaults to topLeft	Yes	No
color	String	Color	The color of the component. Can be a color name or hex code. (Inherited from MiStatelessWidget)	Theme default color	Yes	No
width	num	double	The width of the component. (Inherited from MiStatelessWidget)	None (Intrinsic width)	Yes	No
height	num	double	The height of the component. (Inherited from MiStatelessWidget)	None (Intrinsic height)	Yes	No

Note:

• buttonTiles Structure: The buttonTiles parameter is critical for defining the menu items. Each item in the list must be a Map containing at least label (the text to display in the menu) and actionName (the action to execute on selection). The label value should correspond to a text to be displayed and the actionName should correspond to the action to be invoked.
• Icon Customization: The icon, iconSize, and iconColor parameters allow customization of the button's icon.
• Inherited Parameters: color, alignment, width, height, padding, and margin are inherited parameters from MiStatelessWidget and allow for styling and positioning of the MiButtonMenu component.

Example JSON Configurations

Example 1: Basic Button Menu with Two Options

{
  "component": "buttonMenu",
  "buttonTiles": [
    {
      "label": "Edit",
      "actionName": "editItem"
    },
    {
      "label": "Delete",
      "actionName": "deleteItem"
    }
  ],
  "icon": "menu",
  "iconColor": "primary",
  "iconSize": 32
}

Explanation of Example 1:

• component: "buttonMenu" - Specifies that this configuration is for a MiButtonMenu component.
• buttonTiles - Defines a list of two menu items:
  • The first item has a label of "Edit" and an actionName of "editItem". When selected, it will trigger the "editItem" action.
  • The second item has a label of "Delete" and an actionName of "deleteItem". When selected, it will trigger the "deleteItem" action.
• icon: "menu" - Sets the button's icon to the "menu" icon.
• iconColor: "primary" - Sets the icon color to the theme's primary color.
• iconSize: 32 - Sets the icon size to 32.0.

Example 2: Button Menu with Custom Styling

{
  "component": "buttonMenu",
  "buttonTiles": [
    {
      "label": "Option 1",
      "actionName": "action1"
    },
    {
      "label": "Option 2",
      "actionName": "action2"
    }
  ],
  "icon": "more_vert",
  "iconColor": "secondary",
  "iconSize": 24,
  "padding": [8, 12],
  "margin": [4],
  "alignment": "topRight"
}

Explanation of Example 2:

• component: "buttonMenu" - Specifies that this configuration is for a MiButtonMenu component.
• buttonTiles - Defines a list of two menu items.
  • The first item has a label of "Option 1" and an actionName of "action1".
  • The second item has a label of "Option 2" and an actionName of "action2".
• icon: "more_vert" - Sets the button's icon to the "more_vert" icon.
• iconColor: "secondary" - Sets the icon color to the theme's secondary color.
• iconSize: 24 - Sets the icon size to 24.0.
• padding: [8, 12] - Sets the padding around the icon to 8 on the left and right, and 12 on the top and bottom.
• margin: [4] - Sets the margin around the button to 4 on all sides.
• alignment: "topRight" - Aligns the button to the top right of its container.