MiFlexible

The MiFlexible component is a Flutter widget that allows for flexible sizing of its child widget within a Row or Column, configurable via JSON.

Overview

MiFlexible extends MiStatelessWidget (defined in MiStatelessWidget.dart), providing a way to control how a child widget occupies space in a flex container. It is particularly useful when combined with MiRow or MiColumn, allowing developers to specify how much space a widget should take relative to its siblings. The flex parameter determines the proportion of available space the child should occupy, enabling responsive layouts.

Component Name: flexible

JSON key: "component": "flexible".

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
child	Map	Widget	The child widget to be wrapped in a Flexible widget. This should be a JSON configuration for a widget.	None	No	No
flex	int	int	The flex factor for the child, determining how much space it occupies relative to other flexible children. A higher value means more space.	1	Yes	No
color	String	Color	The background color of the component. (Inherited from MiStatelessWidget)	Theme default color	Yes	No
width	num (Number)	double	The width of the component. (Inherited from MiStatelessWidget)	None (Intrinsic width)	Yes	No
height	num (Number)	double	The height of the component. (Inherited from MiStatelessWidget)	None (Intrinsic height)	Yes	No
padding	List<num>	EdgeInsets	Padding to be applied around the child. Expects a list of numbers representing padding values. (Inherited from MiStatelessWidget)	None	Yes	No
margin	List<num>	EdgeInsets	Margin to be applied around the child. Expects a list of numbers representing margin values. (Inherited from MiStatelessWidget)	None	Yes	No
alignment	String	AlignmentGeometry	How the child should be aligned within its allocated space. Accepts alignment keywords like 'topLeft', 'center', etc. (Inherited from MiStatelessWidget )	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 MiFlexible. **Refer to MiStatelessWidget.dart` for more details on these inherited parameters.**
• Flex Behavior: The flex parameter is crucial for determining how much space the child occupies relative to other MiFlexible components. For example, if one child has a flex of 1 and another has a flex of 2, the second child will take up twice as much space as the first within the same parent Row or Column.
• Helper Classes: The MiFlexible component utilizes helper classes like DoubleHelper and EdgeInsetsHelper for converting JSON values to the appropriate Flutter types for width, height, padding, and margin.

Example JSON Configurations

Example 1: Flexible Child in a Row

{
    "component": "row",
    "children": [
        {
            "component": "flexible",
            "flex": 1,
            "child": {
                "component": "text",
                "text": "Child 1",
                "color": "blue"
            }
        },
        {
            "component": "flexible",
            "flex": 2,
            "child": {
                "component": "text",
                "text": "Child 2",
                "color": "green"
            }
        }
    ]
}

Explanation of Example 1:

• component: "row" - Identifies this configuration as a MiRow component, which will contain flexible children.
• children - An array of child components within the MiRow.
  • The first child is a MiFlexible component with:
    • flex: 1 - This child will occupy 1 part of the available space.
    • child - A nested MiText component displaying "Child 1" in blue.
  • The second child is another MiFlexible component with:
    • flex: 2 - This child will occupy 2 parts of the available space, effectively taking up twice as much space as the first child.
    • child - A nested MiText component displaying "Child 2" in green.

Example 2: Flexible Child in a Column

{
    "component": "column",
    "children": [
        {
            "component": "flexible",
            "flex": 3,
            "child": {
                "component": "text",
                "text": "Top Child",
                "color": "red"
            }
        },
        {
            "component": "flexible",
            "flex": 1,
            "child": {
                "component": "text",
                "text": "Bottom Child",
                "color": "orange"
            }
        }
    ]
}

Explanation of Example 2:

• component: "column" - Identifies this configuration as a MiColumn component, which will contain flexible children.
• children - An array of child components within the MiColumn.
  • The first child is a MiFlexible component with:
    • flex: 3 - This child will occupy 3 parts of the available vertical space.
    • child - A nested MiText component displaying "Top Child" in red.
  • The second child is another MiFlexible component with:
    • flex: 1 - This child will occupy 1 part of the available vertical space, taking up less space than the first child.
    • child - A nested MiText component displaying "Bottom Child" in orange.