MiNetworkImage

The MiNetworkImage component is a Flutter widget for displaying images from network URLs or local assets.

Overview

MiNetworkImage extends MiStatelessWidget, and is used to render images from network URLs or local assets. It supports displaying images from a network URL, caching for improved performance, or from a local asset path. The component handles loading and error states and integrates with the framework's theme and parameter resolution systems. It seamlessly uses FastCachedNetworkImage package for caching the network images.

Component Name: image

JSON key: "component": "image".

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
imageUrl	String or List<String>	String	The URL of the image to be displayed from the network. If a list of URLs is provided, the first URL in the list will be used. The URL can be a key to access the state (e.g. ${items}). Refer to Key. This URL is resolved using ImageUrlUtil.resolve by prepending the baseUrl from the APIRepository if it's not an absolute URL (starts with http).	None	Yes	No
assetPath	String	String	The path to the image asset in the application's assets folder. The assetPath parameter takes precedence over imageUrl if both are provided.	None	Yes	No
borderRadius	num (Number)	double	The border radius to be applied to the image, creating rounded corners. Converted from JSON num to Flutter double using DoubleHelper.get	0.0	Yes	No
color	String	Color	The color of the component.	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 image. 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 image. 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 image 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:

• ImageUrl Resolution: The imageUrl can be a string or a list. If it is a list, the first element will be used as the URL.
• Base URL: The imageUrl is resolved using ImageUrlUtil.resolve, which prepends the baseUrl from the APIRepository if the imageUrl does not start with http.
• Platform-Specific Rendering: The component uses FastCachedImage for non-web platforms to provide image caching and Image.network for web platforms.
• Loading and Error Handling: The component displays a loading indicator while the image is loading and an error image if the image fails to load.
• Asset vs Network: If both imageUrl and assetPath are provided, the assetPath will take precedence.
• Inherited Parameters: color, alignment, width, height, padding, and margin are inherited parameters from MiStatelessWidget and allow for styling and positioning of the MiNetworkImage component within its parent.
• Helper Classes: DoubleHelper.get and EdgeInsetsHelper.get are used internally to assist in converting JSON values to the correct Flutter types for borderRadius, padding and margin respectively.

Example JSON Configurations

Example 1: Displaying a Network Image with Border Radius

{
  "component": "image",
  "imageUrl": "https://example.com/image.jpg",
  "borderRadius": 10
}

Explanation of Example 1:

• component: "image" - Identifies this configuration as being for a MiNetworkImage component.
• imageUrl: "https://example.com/image.jpg" - Specifies the URL of the image to be displayed. The component will attempt to load and display this image from the network.
• borderRadius: 10 - Sets the border radius of the image to 10.0. This numeric JSON value is converted to a Flutter double using DoubleHelper.get

Example 2: Displaying a Local Asset Image

{
  "component": "image",
  "assetPath": "assets/my_image.png",
  "width": 200,
  "height": 150
}

Explanation of Example 2:

• component: "image" - Identifies this configuration as being for a MiNetworkImage component.
• assetPath: "assets/my_image.png" - Specifies the path to the local asset image to be displayed.
• width: 200 - Sets the width of the image to 200.0. This numeric JSON value is converted to a Flutter double using DoubleHelper.get
• height: 150 - Sets the height of the image to 150.0. This numeric JSON value is converted to a Flutter double using DoubleHelper.get