MiColumn

The MiColumn component is a Flutter widget that arranges its children vertically, with configurable spacing, alignment, and responsiveness via JSON.

Overview

MiColumn extends MiStatelessWidget and provides a way to create vertical layouts. It leverages the ResponsiveBuilder to adapt its layout based on screen size and can render its children in a single column or a dynamic height grid.

Component Name: column

JSON key: "component": "column".

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
`children`	`List`	`List<Widget>`	A list of JSON configurations, each representing a child widget to be rendered within the column.	None	Yes	Yes
`spacing`	`num` (Number)	`double`	The vertical space between each child widget in the column.	`20.0`	Yes	No
`mainAxisAlignment`	`String`	`MainAxisAlignment`	How the children should be aligned along the main axis (vertical axis). Accepts string values which are converted to `MainAxisAlignment` enum values using `MainAxisAlignmentHelper.get`. Valid values include 'start', 'center', 'end', 'spaceBetween', 'spaceAround', and 'spaceEvenly'. Refer to Flutter's `MainAxisAlignment` documentation.	`"start"`	Yes	No
`crossAxisAlignment`	`String`	`CrossAxisAlignment`	How the children should be aligned along the cross axis (horizontal axis). Accepts string values which are converted to `CrossAxisAlignment` enum values using `CrossAxisAlignmentHelper.get`. Valid values include 'start', 'center', 'end', 'stretch', and 'baseline'. Refer to Flutter's `CrossAxisAlignment` documentation.	`"start"`	Yes	No
`layoutConfig`	`String`	`String`	A string that defines how many columns should be rendered for different screen sizes. It is used by the `ResponsiveBuilder` to determine the number of columns.	`"max"`	Yes	No
`color`	`String`	`Color`	The color of the component. Can be a color name or hex code.	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
`padding`	`List<num>`	`EdgeInsets`	Padding to be applied around the text. Expects a list of numbers representing padding values (e.g., `[left, top, right, bottom]` or `[horizontal, vertical]` or `[all]`).	None	Yes	No
`margin`	`List<num>`	`EdgeInsets`	Margin to be applied around the text. 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 text 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, padding, and margin are inherited parameters from MiStatelessWidget and allow for styling and positioning of the MiColumn component.
Layout Parameters: width, height, padding, and margin control the size and spacing of the MiColumn.
Responsive Layout: The component uses the ResponsiveBuilder widget, as defined in ResponsiveBuilder.dart, to adapt to different screen sizes. The layoutConfig parameter determines the number of columns displayed based on the screen width.
Helper Classes: DoubleHelper.get, MainAxisAlignmentHelper.get, and CrossAxisAlignmentHelper.get are used internally to assist in converting JSON values to the correct Flutter types for spacing, mainAxisAlignment, and crossAxisAlignment respectively.
Conditional Rendering: The MiColumn component checks if the children is an instance of MiCondition, and if so checks if it is null. If both these things are true, then the component will not be rendered..

Example JSON Configurations

Example 1: Simple Column with Two Text Children

{
  "component": "column",
  "children": [
    {
      "component": "text",
      "text": "First Text"
    },
    {
      "component": "text",
      "text": "Second Text"
    }
  ]
}

Explanation of Example 1:

component: "column" - Identifies this configuration as being for a MiColumn component.
children - A list containing two MiText components. These components are defined as JSON objects.
- component: "text" - Specifies the use of a MiText component.
- text: "First Text" - Sets the text content of the first MiText component.
- component: "text" - Specifies the use of a MiText component.
- text: "Second Text" - Sets the text content of the second MiText component.

Example 2: Column with Spacing and Alignment

{
  "component": "column",
  "mainAxisAlignment": "center",
  "crossAxisAlignment": "center",
  "spacing": 30,
  "children": [
    {
      "component": "text",
      "text": "First Text"
    },
    {
      "component": "text",
      "text": "Second Text"
    }
  ]
}

Explanation of Example 2:

component: "column" - Identifies this configuration as being for a MiColumn component.
mainAxisAlignment: "center" - Aligns the children to the center along the vertical axis. The string "center" is converted to Flutter's MainAxisAlignment.center using MainAxisAlignmentHelper.get. See the "mainAxisAlignment" parameter description in the table and MainAxisAlignmentHelper.dart.
crossAxisAlignment: "center" - Aligns the children to the center along the horizontal axis. The string "center" is converted to Flutter's CrossAxisAlignment.center using CrossAxisAlignmentHelper.get. See the "crossAxisAlignment" parameter description in the table and CrossAxisAlignmentHelper.dart.
spacing: 30 - Sets the space between children to 30 logical pixels. The numeric JSON value is converted to a Flutter double using DoubleHelper.get. See the "spacing" parameter description in the table and DoubleHelper.dart.
children - A list containing two MiText components. These components are defined as JSON objects.
- component: "text" - Specifies the use of a MiText component.
- text: "First Text" - Sets the text content of the first MiText component.
- component: "text" - Specifies the use of a MiText component.
- text: "Second Text" - Sets the text content of the second MiText component.

Example 3: Responsive Column with Layout Configuration

{
  "component": "column",
  "layoutConfig": "1-2",
  "spacing": 10,
  "children": [
    {
      "component": "text",
      "text": "Item 1"
    },
    {
      "component": "text",
      "text": "Item 2"
    },
    {
      "component": "text",
      "text": "Item 3"
    },
    {
      "component": "text",
      "text": "Item 4"
    }
  ]
}

Explanation of Example 3:

component: "column" - Identifies this configuration as being for a MiColumn component.
layoutConfig: "1-2" - This configures the column to display 1 column on extraLarge, large and expanded screens, and 2 columns on medium and compact screens.
spacing: 10 - Sets the space between children to 10 logical pixels. The numeric JSON value is converted to a Flutter double using DoubleHelper.get. See the "spacing" parameter description in the table and DoubleHelper.dart .
children - A list containing four MiText components. These components are defined as JSON objects.
- component: "text" - Specifies the use of a MiText component.
- text: "Item 1" - Sets the text content of the first MiText component.
- component: "text" - Specifies the use of a MiText component.
- text: "Item 2" - Sets the text content of the second MiText component.
- component: "text" - Specifies the use of a MiText component.
- text: "Item 3" - Sets the text content of the third MiText component.
- component: "text" - Specifies the use of a MiText component.
- text: "Item 4" - Sets the text content of the fourth MiText component.

Overview​

Parameters​

Example JSON Configurations​

Overview

Parameters

Example JSON Configurations