MiAspectRatio

The MiAspectRatio component is a Flutter widget that maintains a specific aspect ratio for its child widget, configurable via JSON.

Overview

MiAspectRatio extends MiStatelessWidget, providing a way to enforce a specific width-to-height ratio for its child widget. This is particularly useful for responsive designs where maintaining proportions is essential. The aspect ratio can be dynamically set through JSON configuration, allowing for flexible UI designs.

Component Name: aspectRatio

JSON key: "component": "aspectRatio".

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
child	Map	Widget	The child widget to be displayed within the aspect ratio container. This can be any widget, and if not provided, the component will render nothing.	None (renders nothing if missing)	Yes	No
aspectRatio	num	double	The aspect ratio of the child widget, defined as width divided by height. Converted from JSON num to Flutter double using DoubleHelper.get (defined in DoubleHelper.dart).	None	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

Note:

• Inherited Parameters: width, height are inherited parameters from MiStatelessWidget, providing essential styling and positioning capabilities.
• Conditional Rendering: If the aspectRatio parameter is not provided or resolves to null, the MiAspectRatio component will render the child widget directly without enforcing any aspect ratio.
• Helper Classes: The aspectRatio parameter is processed using DoubleHelper.get to ensure correct type conversion from JSON to Flutter's double.

Example JSON Configurations

Example 1: Basic Aspect Ratio Container

{
    "component": "aspectRatio",
    "aspectRatio": 16/9,
    "child": {
        "component": "text",
        "text": "This is a 16:9 aspect ratio container.",
        "color": "white"
    }
}

Explanation of Example 1:

• component: "aspectRatio" - Identifies this configuration as being for a MiAspectRatio component.
• aspectRatio: 16/9 - Sets the aspect ratio of the container to 16:9, ensuring that the width is 16 units for every 9 units of height. This value is processed by DoubleHelper.get to convert from JSON num to Flutter double.
• child - Specifies the child widget to be displayed within the aspect ratio container. In this case, it is a MiText component.
  • component: "text" - Indicates that the child is a text component.
  • text: "This is a 16:9 aspect ratio container." - Sets the text content to be displayed.
  • color: "white" - Sets the text color to white.

Example 2: Aspect Ratio with Custom Child Widget

{
    "component": "aspectRatio",
    "aspectRatio": 1,
    "child": {
        "component": "image",
        "src": "https://example.com/image.png"
    },
    "width": 200,
    "height": 200
}

Explanation of Example 2:

• component: "aspectRatio" - Identifies this configuration as being for a MiAspectRatio component.
• aspectRatio: 1 - Sets the aspect ratio to 1:1, making the container a square.
• child - Specifies the child widget to be displayed within the aspect ratio container. In this case, it is an image component.
  • component: "image" - Indicates that the child is an image component.
  • src: "https://example.com/image.png" - Specifies the source URL for the image to be displayed.
• width: 200 - Sets a fixed width of 200 units for the aspect ratio container.
• height: 200 - Sets a fixed height of 200 units for the aspect ratio container.