MiNetworkImageWithDialog

The MiNetworkImageWithDialog component is a Flutter widget that displays a network image and, upon tapping, opens it in a full-screen dialog.

Overview

MiNetworkImageWithDialog extends MiStatelessWidget and displays a network image that, when tapped, opens a dialog showing the image in full screen. It leverages MiNetworkImage to render the initial image and ImageViewDialog to display the image in a full-screen dialog. It supports displaying a single image or opening a dialog with multiple images if a list of URLs is provided.

Component Name: networkImageWithDialog

JSON key: "component": "networkImageWithDialog"

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 for the initial image. Tapping the image will open a dialog displaying all URLs provided in the list. The URL can be a key to access the state (e.g. ${items}). Refer to Key.	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. This border radius is applied to the initial MiNetworkImage.	None	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 for the initially displayed image. If the image is tapped, all URLs in the list will be displayed in the ImageViewDialog.
• Dialog Presentation: Tapping the image triggers the display of a full-screen dialog (ImageViewDialog) showing the image(s).
• Component Composition: The component utilizes MiNetworkImage for displaying the initial image and ImageViewDialog for the full-screen display, showcasing the mEye Framework's component composition capabilities.
• Inherited Parameters: color, alignment, width, height, padding, and margin are inherited parameters from MiStatelessWidget and allow for styling and positioning of the MiNetworkImageWithDialog 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 Single Network Image with a Dialog

{
  "component": "networkImageWithDialog",
  "imageUrl": "https://example.com/image.jpg",
  "borderRadius": 10,
  "width": 200,
  "height": 150
}

Explanation of Example 1:

• component: "networkImageWithDialog" - Identifies this configuration as being for a MiNetworkImageWithDialog component.
• imageUrl: "https://example.com/image.jpg" - Specifies the URL of the image to be displayed. Tapping the image will open a dialog showing this image in full screen.
• 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.
• 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.

Example 2: Displaying Multiple Images in a Dialog

{
  "component": "networkImageWithDialog",
  "imageUrl": [
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg",
    "https://example.com/image3.jpg"
  ],
  "width": 200,
  "height": 150
}

Explanation of Example 2:

• component: "networkImageWithDialog" - Identifies this configuration as being for a MiNetworkImageWithDialog component.
• imageUrl: [...] - Specifies a list of URLs for the images to be displayed in the dialog. The first image in the list ("https://example.com/image1.jpg") will be displayed initially, and tapping the image will open a dialog displaying all three images in a carousel.
• 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.