MiSpacing

The MiSpacing component is a Flutter widget for creating empty space in layouts, configurable via JSON to control size and positioning within the mEye Framework.

Overview

MiSpacing extends MiStatelessWidget, the base class for mEye Framework components, and renders as a SizedBox with no content. It is used to create visual separation between other components in a layout.

Component Name: spacing

JSON key: "component": "spacing"

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
width	num (Number)	double	The width of the component.	None (Intrinsic width)	Yes	No
height	num (Number)	double	The height of the component.	None (Intrinsic height)	Yes	No

Note:

• Layout Parameters: width and height control the size of the MiSpacing component.
• Purpose: The MiSpacing component is used to create space within layouts. You can control the size of the space by setting the width and height properties.

Example JSON Configurations

Example 1: Horizontal Spacing Between Two Text Components

{
  "component": "row",
  "children": [
    {
      "component": "text",
      "text": "Left Item"
    },
    {
      "component": "spacing",
      "width": 20
    },
    {
      "component": "text",
      "text": "Right Item"
    }
  ]
}

Explanation of Example 1:

• component: "row" - Defines a row layout to contain the components.
• children - A list of components within the row.
  • component: "text" - Displays the text "Left Item".
  • component: "spacing" - Creates a horizontal space.
    • width: 20 - Sets the width of the spacing to 20 logical pixels.
  • component: "text" - Displays the text "Right Item".

Example 2: Vertical Spacing Between Two Buttons

{
  "component": "column",
  "children": [
    {
      "component": "button",
      "label": "Button 1"
    },
    {
      "component": "spacing",
      "height": 10
    },
    {
      "component": "button",
      "label": "Button 2"
    }
  ]
}

Explanation of Example 2:

• component: "column" - Defines a column layout to contain the components.
• children - A list of components within the column.
  • component: "button" - Renders a button with the label "Button 1".
  • component: "spacing" - Creates a vertical space.
    • height: 10 - Sets the height of the spacing to 10 logical pixels.
  • component: "button" - Renders a button with the label "Button 2".