MiDivider

The MiDivider component is a Flutter widget that creates a customizable divider line, configurable via JSON.

Overview

MiDivider extends MiStatelessWidget, serving as a visual separator in user interfaces. It supports both solid and dotted styles, with customizable thickness, direction, and dash properties.

Component Name: divider

JSON key: "component": "divider".

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
direction	String	Axis	Specifies the direction of the divider. Accepts values "horizontal" or "vertical", determining the orientation of the divider line. Defaults to Axis.horizontal.	Axis.horizontal	Yes	No
thickness	num	double	Sets the thickness of the divider line. Converted from JSON num to Flutter double using DoubleHelper.get.	1.0	Yes	No
dotted	bool	bool	Determines whether the divider should be displayed as a dotted line. If true, a DottedLine widget is used; otherwise, a standard Divider is rendered.	false	Yes	No
dashLength	num	double	Specifies the length of each dash in the dotted line. Converted from JSON num to Flutter double using DoubleHelper.get.	4.0	Yes	No
dashGapLength	num	double	Specifies the gap length between dashes in the dotted line. Converted from JSON num to Flutter double using DoubleHelper.get.	4.0	Yes	No
color	String	Color	The color of the divider. Can be a color name or hex code. (Inherited from MiStatelessWidget)	None (Intrinsic height)	Yes	No
padding	List<num>	EdgeInsets	Padding to be applied around the divider. Expects a list of numbers representing padding values (e.g., [left, top, right, bottom]). (Inherited from MiStatelessWidget)	None	Yes	No
margin	List<num>	EdgeInsets	Margin to be applied around the divider. Expects a list of numbers representing margin values (e.g., [left, top, right, bottom]). (Inherited from MiStatelessWidget)	None	Yes	No
alignment	String	AlignmentGeometry	How the divider should be aligned within its allocated space. Accepts alignment keywords like 'topLeft', 'center', 'bottomRight', etc. (Inherited from MiStatelessWidget)	Defaults to topLeft	Yes	No

Note:

• Inherited Parameters: color, alignment, width, height, padding, and margin are inherited parameters from MiStatelessWidget (defined in MiStatelessWidget.dart), providing essential styling and positioning capabilities.
• Dotted Line Behavior: When dotted is set to true, the MiDivider uses the DottedLine widget, which requires dashLength and dashGapLength to define the appearance of the dotted line. If dotted is false, a standard Divider is rendered with the specified thickness and color.
• Helper Classes: The DoubleHelper.get is used for converting JSON values to the appropriate Flutter types for thickness, dashLength, and dashGapLength.

Example JSON Configurations

Example 1: Basic Horizontal Divider

{
    "component": "divider",
    "direction": "horizontal",
    "thickness": 2,
    "color": "grey"
}

Explanation of Example 1:

• component: "divider" - Identifies this configuration as being for a MiDivider component.
• direction: "horizontal" - Specifies that the divider should be horizontal. This is the default behavior, but explicitly setting it clarifies intent.
• thickness: 2 - Sets the thickness of the divider to 2.0. This numeric JSON value is converted to a Flutter double using DoubleHelper.get.
• color: "grey" - Sets the color of the divider to grey. This string value is resolved to a Flutter Color object.

Example 2: Dotted Vertical Divider

{
    "component": "divider",
    "direction": "vertical",
    "dotted": true,
    "dashLength": 6,
    "dashGapLength": 3,
    "color": "blue"
}

Explanation of Example 2:

• component: "divider" - Identifies this configuration as being for a MiDivider component.
• direction: "vertical" - Specifies that the divider should be vertical, creating a vertical separation in the layout.
• dotted: true - Enables the dotted line style for the divider. This will render a DottedLine widget instead of a standard Divider.
• dashLength: 6 - Sets the length of each dash in the dotted line to 6.0. This value is converted to a Flutter double using DoubleHelper.get.
• dashGapLength: 3 - Sets the gap between dashes to 3.0, also converted to a Flutter double.
• color: "blue" - Sets the color of the dotted line to blue, demonstrating color customization.