MiText

The MiText component is a Flutter widget designed to display text with various styling options. It is configured using JSON.

Overview

MiText extends MiStatelessWidget and is used to render text content within your Flutter application. It supports customization of font size, weight, font family, maximum lines, and whether the text should be collapsible.

Component Name: text

JSON key: "component": "text"

MiText Parameters

The following parameters can be configured for the MiText component through JSON. These parameters include those specific to MiText as well as parameters inherited from its superclass, MiStatelessWidget:

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
text	String	String	The text content to be displayed. If not provided, the component will render as an empty SizedBox.	None (renders as empty SizedBox if missing)	Yes	No
size	num (Number)	double	The font size of the text.	16.0	Yes	No
weight	int	FontWeight	The font weight (boldness) of the text. Accepts integer values which are converted to FontWeight enum values. Refer to Flutter's FontWeight documentation for valid integer values (e.g., 400 for normal, 700 for bold).	None	Yes	No
maxLines	int	int	The maximum number of lines the text can occupy before being truncated. If collapsible is set to true, this defines the number of lines before the text is collapsed.	1 (for collapsible text), Unlimited (for non-collapsible text, if not specified)	Yes	No
collapsible	bool	bool	Determines whether the text should be displayed as collapsible using ReadMoreText. If true, text exceeding maxLines will be collapsed with a "show more" option. If false, standard Text widget will be used.	false	Yes	No
fontFamily	String	String	The font family to be used for the text. If a font family name from Google Fonts is provided, it will attempt to use that font via GoogleFonts.getFont. If not provided, the default system font will be used.	None	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.	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 MiText component within its parent.
• Layout Parameters: width, height, padding, and margin control the size and spacing of the MiText component.
• Conditional Rendering: If the text parameter is not provided or resolves to null, the MiText component will render an empty SizedBox, effectively displaying nothing.
• Helper Classes: While not listed in the table, DoubleHelper.get and FontWeightHelper.get are used internally to assist in converting JSON values to the correct Flutter types for size and weight respectively.

Example JSON Configuration

{
    "component": "text",
    "text": "This is a longer text example to demonstrate the MiText component. It showcases the use of size, weight, maxLines, collapsible, and fontFamily parameters. When collapsible is true, you will see a 'show more'/'show less' toggle.",
    "size": 18,
    "weight": 700,
    "maxLines": 2,
    "collapsible": true,
    "fontFamily": "Roboto",
    "color": "blue",
    "alignment": "center"
}

Explanation of Example:

• component: "text": Identifies this configuration as being for a MiText component.
• text: Sets the text to be displayed.
• size: 18: Sets the font size to 18.0.
• weight: 700: Sets the font weight to bold (700).
• maxLines: 2: Limits the text to a maximum of 2 lines before collapsing (due to collapsible: true).
• collapsible: true: Enables the collapsible text functionality.
• fontFamily: "Roboto": Sets the font family to Roboto (make sure Google Fonts or similar is set up to use Google Fonts).
• color: "blue": Sets the text color to blue.
• alignment: "center": Sets the text alignment to center.