MiRow

The MiRow component is a Flutter widget for arranging child widgets in a horizontal layout, configurable via JSON.

Overview

MiRow extends MiStatelessWidget and is designed to facilitate the creation of flexible and responsive row layouts. It supports various alignment options, spacing configurations, and the ability to wrap children into multiple lines if necessary.

Component Name: row

JSON key: "component": "row"

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
children	List	List<Widget>	A list of child widgets to be arranged in the row. Each child should be a valid widget.	None	No	No
mainAxisAlignment	String	MainAxisAlignment	Defines how the children are aligned along the main axis (horizontal). Accepts values like "start", "end", "center", "spaceBetween", etc.	"start"	Yes	No
crossAxisAlignment	String	CrossAxisAlignment	Defines how the children are aligned along the cross axis (vertical). Accepts values like "start", "end", "center", etc.	"center"	Yes	No
runAxisAlignment	String	WrapAlignment	Defines how the wrapped rows are aligned. Accepts values like "start", "end", "center", etc.	"start"	Yes	No
spacing	num	double	The space between the children in the row.	16.0	Yes	No
runSpacing	num	double	The space between the rows when wrapping occurs.	0.0	Yes	No
wrap	bool	bool	Determines whether the row should wrap its children into multiple lines if they exceed the available width.	false	Yes	No
flexibleChildren	bool	bool	If true, allows children to be wrapped in a Flexible widget, enabling them to expand and fill available space equally. Incompatible with "wrap": true.	false	Yes	No
color	String	Color	The background color of the row. Can be a color name or hex code.	Theme default color	Yes	No
padding	List<num>	EdgeInsets	Padding to be applied around the row. Expects a list of numbers representing padding values (e.g., [left, top, right, bottom]).	None	Yes	No
margin	List<num>	EdgeInsets	Margin to be applied around the row. Expects a list of numbers representing margin values (e.g., [left, top, right, bottom]).	None	Yes	No
alignment	String	AlignmentGeometry	How the row should be aligned within its allocated space. Accepts alignment keywords like 'topLeft', 'center', 'bottomRight', etc.	Defaults to topLeft	Yes	No
width	num	double	The width of the row.	None (Intrinsic width)	Yes	No
height	num	double	The height of the row.	None (Intrinsic height)	Yes	No

Note:

• Inherited Parameters: color, alignment, width, height, padding, and margin are inherited parameters from MiStatelessWidget and allow for styling and positioning of the MiRow component.
• Flexible Children: The flexibleChildren parameter allows for dynamic resizing of child widgets, enhancing the layout's responsiveness. If set to true, each child will be wrapped in a Flexible widget, allowing them to expand and fill the available space equally. Incompatible with "wrap": true.
• Conditional Rendering: The wrap parameter determines whether the children should wrap into multiple lines when they exceed the available width. If wrap is false, a standard Row is used; if true, a Wrap widget is employed.
• Helper Classes: The component utilizes helper classes like MainAxisAlignmentHelper, CrossAxisAlignmentHelper, WrapAlignmentHelper, and WrapCrossAlignmentHelper for resolving alignment parameters from JSON to Flutter types.

Example JSON Configurations

Example 1: Basic Row with Children

{
    "component": "row",
    "children": [
        {
            "component": "text",
            "text": "Item 1"
        },
        {
            "component": "text",
            "text": "Item 2"
        },
        {
            "component": "text",
            "text": "Item 3"
        }
    ],
    "mainAxisAlignment": "center",
    "crossAxisAlignment": "start",
    "spacing": 10,
    "wrap": false
}

Explanation of Example 1:

• component: "row" - Identifies this configuration as being for a MiRow component.
• children - Specifies a list of child components, each defined as a MiText component with text content. This demonstrates the ability to nest components within the MiRow.
• mainAxisAlignment: "center" - Aligns the children in the center along the main axis (horizontal). This value is resolved using MainAxisAlignmentHelper.
• crossAxisAlignment: "start" - Aligns the children at the start along the cross axis (vertical). This value is resolved using CrossAxisAlignmentHelper.
• spacing: 10 - Sets the space between the children to 10.0. This value will be applied as padding between each child widget.
• wrap: false - Indicates that the row should not wrap its children into multiple lines, using a standard Row widget.

Example 2: Wrapped Row with Flexible Children

{
    "component": "row",
    "children": [
        {
            "component": "text",
            "text": "Item A"
        },
        {
            "component": "text",
            "text": "Item B"
        },
        {
            "component": "text",
            "text": "Item C"
        },
        {
            "component": "text",
            "text": "Item D"
        },
        {
            "component": "text",
            "text": "Item E"
        }
    ],
    "mainAxisAlignment": "spaceBetween",
    "crossAxisAlignment": "center",
    "spacing": 8,
    "wrap": false,
    "flexibleChildren": true
}

Explanation of Example 2:

• component: "row" - Identifies this configuration as being for a MiRow component.
• children - Specifies a list of child components, each defined as a MiText component with text content. This showcases the ability to nest multiple components within the MiRow.
• mainAxisAlignment: "spaceBetween" - Distributes the children evenly along the main axis, with space between them. This value is resolved using MainAxisAlignmentHelper.
• crossAxisAlignment: "center" - Aligns the children in the center along the cross axis. This value is resolved using CrossAxisAlignmentHelper.
• spacing: 8 - Sets the space between the children to 8.0. This value will be applied as padding between each child widget.
• wrap: false - Since "wrap": true is incompatible.
• flexibleChildren: true - Allows each child to be wrapped in a Flexible widget, enabling them to expand and fill available space equally.