MiPadding

The MiPadding component is a Flutter widget that adds padding around its child.

Overview

MiPadding extends MiStatelessWidget, and is used to control the spacing around a single child widget.

Component Name: padding

This component is identified in your JSON configurations using the component key set to padding.

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
child	Map	Widget	The configuration of the widget to be wrapped with padding. This should be a JSON object that defines another component.	None	Yes	Yes
padding	List<num>	EdgeInsets	The amount of padding to apply to the child. This parameter accepts a list of numbers, which are interpreted as padding values based on the list's length: a single value for uniform padding, two values for vertical and horizontal padding, or four values for left, top, right, and bottom padding.	EdgeInsets.zero	Yes	No
color	String	Color	The color of the component.	Theme default color	Yes	No
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
margin	List<num>	EdgeInsets	Margin to be applied around the padding widget. Expects a list of numbers representing margin values (e.g., [left, top, right, bottom] or [horizontal, vertical] or [all]).	None	Yes	No
alignment	String	AlignmentGeometry	How the padding widget should be aligned within its allocated space. Accepts alignment keywords like 'topLeft', 'center', 'bottomRight', etc. Refer to Flutter's Alignment documentation.	Defaults to topLeft	Yes	No

Note:

• Inherited Parameters: color, alignment, width, height, and margin are inherited parameters from MiStatelessWidget and allow for styling and positioning of the MiPadding component within its parent.
• Padding Configuration: The padding parameter is crucial for controlling the spacing around the child widget. It leverages EdgeInsetsHelper.get for flexible configuration using different list lengths which are as follows:
  • A single value for uniform padding. Eg: [18]
  • Two values for vertical and horizontal padding. Eg: [12, 16] -> (Horizontal: 12, Vertical: 16)
  • Four values for left, top, right, and bottom padding. Eg [2, 4, 2, 8] -> (Left: 2, Top: 4, Right: 2, Bottom: 8)
• Helper Classes: EdgeInsetsHelper.get is used internally to assist in converting JSON values to the correct Flutter types for padding.
• Child Widget: The child parameter accepts any other component.

Example JSON Configurations

Example 1: Padding with a single value

{
  "component": "padding",
  "padding": [16],
  "child": {
    "component": "text",
    "text": "This text has padding of 16 on all sides."
  }
}

Explanation of Example 1:

• component: "padding" - Identifies this configuration as being for a MiPadding component.
• padding: [16] - Sets the padding to 16 on all sides of the child. The numeric JSON value is converted to a Flutter double within the EdgeInsetsHelper and then applied to all sides. See the "padding" parameter description in the table for details.
• child - Defines a MiText component as the child of the MiPadding component. The padding will be applied around this text.

Example 2: Padding with vertical and horizontal values

{
  "component": "padding",
  "padding": [20, 40],
  "child": {
    "component": "text",
    "text": "This text has vertical padding of 20 and horizontal padding of 40."
  }
}

Explanation of Example 2:

• component: "padding" - Identifies this configuration as being for a MiPadding component.
• padding: [20, 40] - Sets the vertical padding to 20 and the horizontal padding to 40. The numeric JSON values are converted to Flutter double within the EdgeInsetsHelper and then applied as vertical and horizontal padding, respectively. See the "padding" parameter description in the table for details.
• child - Defines a MiText component as the child of the MiPadding component. The padding will be applied around this text.

Example 3: Padding with left, top, right, and bottom values

{
  "component": "padding",
  "padding": [10, 20, 30, 40],
  "child": {
    "component": "text",
    "text": "This text has custom padding on each side (L=10, T=20, R=30, B=40)."
  }
}

Explanation of Example 3:

• component: "padding" - Identifies this configuration as being for a MiPadding component.
• padding: [10, 20, 30, 40] - Sets the padding to 10 on the left, 20 on the top, 30 on the right, and 40 on the bottom. The numeric JSON values are converted to Flutter double within the EdgeInsetsHelper and then applied to the corresponding sides. See the "padding" parameter description in the table for details.
• child - Defines a MiText component as the child of the MiPadding component. The padding will be applied around this text.