MiContainer

The MiContainer component is a Flutter widget that serves as a customizable container for other widgets, allowing for padding, margin, alignment, and background color configuration via JSON.

Overview

MiContainer extends MiStatelessWidget, providing a flexible container that can hold a child widget while allowing for various styling options such as padding, margin, alignment, and border radius.

Component Name: container

JSON key: "component": "container".

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
child	Map	Widget	The child widget to be displayed inside the container. This can be any widget, including other mEye components. If not provided, the container will render as an empty SizedBox.	None (renders as empty SizedBox if missing)	Yes	No
borderRadius	num	double	The radius of the container's corners. Converted from JSON num to Flutter double using DoubleHelper.get (defined in DoubleHelper.dart).	Defaults to 0 (no rounding)	Yes	No
color	String	Color	The background color of the container. Can be a color name or hex code.	Theme default color	Yes	No
width	num (Number)	double	The width of the container.	None (Intrinsic width)	Yes	No
height	num (Number)	double	The height of the container.	None (Intrinsic height)	Yes	No
padding	List<num>	EdgeInsets	Padding to be applied inside the container. Expects a list of numbers representing padding values (e.g., [left, top, right, bottom]).	None	Yes	No
margin	List<num>	EdgeInsets	Margin to be applied outside the container. Expects a list of numbers representing margin values (e.g., [left, top, right, bottom]).	None	Yes	No
alignment	String	AlignmentGeometry	How the child should be aligned within the container. 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 provide essential styling and layout capabilities.
• Conditional Rendering: If the child parameter is not provided or resolves to null, the MiContainer component will render an empty SizedBox, effectively displaying nothing.
• Helper Classes: DoubleHelper.get is used internally to assist in converting JSON values to the correct Flutter types for borderRadius.

Example JSON Configurations

Example 1: Basic Container with Child Widget

{
  "component": "container",
  "child": {
    "component": "text",
    "text": "Hello, World!",
    "size": 20,
    "color": "white"
  },
  "color": "blue",
  "padding": [10, 10, 10, 10],
  "borderRadius": 8
}

Explanation of Example 1:

• component: "container" - Identifies this configuration as being for a MiContainer component.
• child - Specifies a nested MiText component as the child of the container.
  • component: "text" - Indicates that the child is a MiText component.
  • text: "Hello, World!" - Sets the text content of the MiText component.
  • size: 20 - Sets the font size of the MiText label to 20.
  • color: "white" - Sets the text color to white, demonstrating color customization.
• color: "blue" - Sets the background color of the container to blue.
• padding: [10, 10, 10, 10] - Applies uniform padding of 10 pixels on all sides of the container.
• borderRadius: 8 - Sets the corner radius of the container to 8, giving it slightly rounded corners.

Example 2: Container with Margin and Custom Alignment

{
  "component": "container",
  "child": {
    "component": "text",
    "text": "Welcome to mEye Framework!",
    "size": 18,
    "color": "black"
  },
  "color": "lightGrey",
  "margin": [20, 10, 20, 10],
  "alignment": "center",
  "borderRadius": 12
}

Explanation of Example 2:

• component: "container" - Identifies this configuration as being for a MiContainer component.
• child - Specifies a nested MiText component as the child of the container.
  • component: "text" - Indicates that the child is a MiText component.
  • text: "Welcome to mEye Framework!" - Sets the text content of the MiText component.
  • size: 18 - Sets the font size of the MiText label to 18.
  • color: "black" - Sets the text color to black.
• color: "lightGrey" - Sets the background color of the container to light grey.
• margin: [20, 10, 20, 10] - Applies a margin of 20 pixels on the left and right, and 10 pixels on the top and bottom, spacing the container from surrounding elements.
• alignment: "center" - Centers the child widget within the container, demonstrating the alignment capabilities of the MiContainer.