MiLargeCard

The MiLargeCard component is a stateful Flutter widget designed to display content in a visually prominent card format. It is highly customizable, allowing for highlighted lines, structured sections, actions, and various styling options, all defined through JSON configuration.

Overview

MiLargeCard provides a flexible container for presenting key information in a clear and organized manner. It's ideal for summary displays, dashboards, or any UI element requiring a visually distinct card layout with interactive elements. The card's content is divided into sections, each configurable to display different types of information like text, lists, buttons, or even nested collapsible sections. The overall appearance, including borders, radius, and shadow, is also customizable via JSON parameters.

Component Name: largeCard

JSON key: "component": "largeCard".

Parameters

The MiLargeCard component offers a rich set of customization options through these JSON parameters, in addition to the base styling parameters inherited from MiStatelessWidget:

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
`highlightLine1`	`String`	`String`	Highlight Line 1: The primary highlight text displayed at the top of the card, usually in a larger and bolder font. Supports state variable resolution using the `$` symbol.	`null`	Yes	No
`highlightLine2`	`String`	`String`	Highlight Line 2: A secondary highlight text, typically displayed below `highlightLine1` with slightly less emphasis. Supports state variable resolution using the `$` symbol.	`null`	Yes	No
`sections`	`List`	`List<Map>`	Sections: A list of section configurations defining the content within the card. Each item in the list is a JSON map describing a section. See "Sections Parameter Details" below.	`null`	Yes	No
`action`	`dynamic`	`dynamic`	Action: Action to be executed when the card itself is tapped. JSON object with `actionType` and parameters. For navigation purposes, always use "Navigation Action" (`actionType: "navigate"`, `"navigationType": "push"`, `"pageUrl": "/your-target-url"`). Triggers collapse/expand if `collapsible` is true.	`null`	Yes	No
`borderRadius`	`num`	`double`	Border Radius: Corner radius of the card.	`16.0`	Yes	No
`borderWidth`	`num`	`double`	Border Width: Width of the card's border.	`0.0`	Yes	No
`borderColor`	`String`	`Color`	Border Color: Color of the card's border. Accepts Flutter color names or hex codes. Defaults to theme's `"primary"` color or `Colors.black` if `borderWidth > 0` and `borderColor` is null.	`null`	Yes	No
`print`	`bool`	`bool`	Printable: If `true`, a "Print" button is displayed at the bottom-right of the card, enabling PDF printing functionality.	`false`	Yes	No
`collapsible`	`bool`	`bool`	Collapsible: If `true`, the card can be collapsed to show only "pinned" sections and expanded to reveal all sections. Tapping the card toggles collapse state.	`false`	Yes	No
`printAction`	`dynamic`	`dynamic`	Print Action: Action to be executed when the "Print" button is tapped. JSON object with `actionType` and parameters. Required if `print` is `true`.	`null`	Yes	No
`uniqueId`	`String`	`String`	Unique ID: A unique identifier for the card. Used for state management and keying.	`null`	Yes	No
`collapsibleText`	`String`	`String`	Collapsible Text: Text used for the "Show/Hide" collapsible summary link. Defaults to "Summary" if null. Supports state variable resolution using the `$` symbol.	`"Summary"`	Yes	No
`padding`	`List<num>`	`EdgeInsets`	Inner Padding: Sets padding within the card container. Inherited from `MiStatelessWidget`.	`null`	Yes	No
`margin`	`List<num>`	`EdgeInsets`	Outer Margin: Defines the margin surrounding the card widget. Inherited from `MiStatelessWidget`.	`null`	Yes	No
`alignment`	`String`	`AlignmentGeometry`	Alignment: Specifies how the card should be aligned within its parent. Inherited from `MiStatelessWidget`.	`"topLeft"`	Yes	No
`color`	`String`	`Color`	Background Color: Background color of the card container. Inherited from `MiStatelessWidget`. Defaults to theme's `"white"` color.	`"white"`	Yes	No
`width`	`num`	`double`	Fixed Width: Defines a fixed width for the card component. Inherited from `MiStatelessWidget`.	`null`	Yes	No
`height`	`num`	`double`	Fixed Height: Defines a fixed height for the card component. Inherited from `MiStatelessWidget`.	`null`	Yes	No

Note:

Navigation Actions: For all navigation purposes within MiLargeCard, ensure you are using Navigation Actions by setting "actionType": "navigate", "navigationType": "push", and specifying the "pageUrl" in the action parameter of the card or within button sections. This is the standard and recommended way to handle navigation.
State Variable Placeholders ($): Parameters like highlightLine1, highlightLine2, and collapsibleText support state variable placeholders using the $ symbol (e.g., "${STATE_KEY}"). These placeholders are resolved at runtime by the DataUtil.getValue method to fetch values from the application's state.
Sections Parameter: The sections parameter is a list of maps, each defining a section within the card. See "Sections Parameter Details" for available section types and their configurations.
Collapsible Behavior: When collapsible is true, the card is initially collapsed, showing only sections marked with "pin": true and highlight lines. Tapping the card expands it to show all sections. Tapping again collapses it.
Printing Functionality: When print is true, a "Print" button appears. Tapping this button triggers the printAction, typically configured to generate and print a PDF document based on the card's content. The printAction needs to be defined separately to handle the PDF generation and printing logic.
Styling Inheritance: MiLargeCard inherits styling and layout parameters like padding, margin, alignment, color, width, and height from MiStatelessWidget, allowing for consistent styling across your application.

Sections Parameter Details

The sections parameter is a list of JSON maps, where each map defines a section within the MiLargeCard. The sectionType key within each map determines the type of section to be rendered. Available sectionType options are:

button Section: Displays a row with text lines and an optional button on the right side.
- sectionType: "button"
- line1: String or dynamic (resolvable to String) - The primary text line for the section. Supports state variable resolution.
- line2: String, Map, or dynamic - A secondary text line or a nested component configuration for the section's description below line1. If String, supports state variable resolution. If Map, must be a valid component configuration.
- button: Map (optional) - JSON configuration for a button component to be displayed on the right side of the section. Must be a valid button component configuration. For navigation within button sections, ensure the button's action is a Navigation Action (actionType: "navigate", "navigationType": "push", "pageUrl": "/your-target-url").
- pin: bool (optional) - If true, the section remains visible even when the card is collapsed (if collapsible is true). Defaults to true.
list Section: Displays a section with a title and a list of items, each potentially with lines and right-aligned text.
- sectionType: "list"
- title: String or dynamic (resolvable to String) - Title of the list section. Supports state variable resolution.
- listKey: String or dynamic (resolvable to List) - Key to resolve a List from the application state, which will be used as the data source for the list items.
- childComponent: Map (optional) - JSON configuration for a component to be rendered for each item in the list. If provided, this component will be built for each list item, overriding line1, line2, and rightText.
- line1: String or dynamic (resolvable to String) - Text line for each list item. Resolved within the context of each list item's data. Supports state variable resolution.
- line2: String, Map, or dynamic - Secondary text line or a nested component for each list item's description below line1. Resolved within the context of each list item's data. If String, supports state variable resolution. If Map, must be a valid component configuration.
- rightText: String or dynamic (resolvable to String) - Text to be displayed on the right side of each list item. Resolved within the context of each list item's data. Supports state variable resolution.
- spacing: num (optional) - Vertical spacing between list items. Defaults to 8.0.
- titleSpacing: num (optional) - Vertical spacing below the section title. Defaults to 8.0.
textMatrix Section: Displays a section with text items arranged in a row, with spacing between them.
- sectionType: "textMatrix"
- array: String or dynamic (resolvable to List) - Key to resolve a List of text items (String or Maps) from the application state.
- size: num (optional) - Default font size for text items. Defaults to 16.0.
- weight: num (optional) - Default font weight for text items. Defaults to 400.
- color: String (optional) - Default text color for text items. Defaults to "onSurface".
collapsible Section: Creates a nested collapsible section within the card.
- sectionType: "collapsible"
- sections: List<Map> - A list of section configurations to be displayed within the collapsible section. This is recursive, meaning collapsible sections can be nested.

In addition to sectionType, sections can also define other standard component properties directly, like "component": "image", "component": "text", etc. These allow embedding other Mi components directly within a card section for maximum flexibility.

Example JSON Configurations

Example 1: Simple Large Card with Highlight Lines and Button Sections (Navigation Action)

{
  "component": "largeCard",
  "highlightLine1": "Order #12345",
  "highlightLine2": "Placed on 2023-12-18",
  "sections": [
    {
      "sectionType": "button",
      "line1": "Customer Details",
      "line2": "John Doe - [email address removed]",
      "button": {
        "component": "button",
        "text": "View Profile",
        "action": {
          "actionType": "navigate",
          "navigationType": "push",
          "pageUrl": "/customer-profile"
        }
      }
    },
    {
      "sectionType": "button",
      "line1": "Delivery Address",
      "line2": "123 Main Street, Anytown, USA"
    }
  ]
}

Explanation of Example 1:

component: "largeCard": Identifies this as a MiLargeCard component.
highlightLine1, highlightLine2: Sets the prominent highlight lines at the top.
sections: [...]: Defines two sections within the card.
- First section (sectionType: "button"): Displays "Customer Details" and "John Doe..." with a "View Profile" button. The button is configured to navigate to the /customer-profile page using a Navigation Action ("actionType": "navigate", "navigationType": "push", "pageUrl": "/customer-profile").
- Second section (sectionType: "button"): Displays "Delivery Address" with a simple text line.

Example 2: Large Card with List Section and Text Matrix Section

{
  "component": "largeCard",
  "highlightLine1": "Product Inventory Summary",
  "sections": [
    {
      "sectionType": "list",
      "title": "Top Selling Products",
      "listKey": "${INVENTORY.TOP_PRODUCTS}",
      "line1": "${ITEM.PRODUCT_NAME}",
      "rightText": "${ITEM.SALES_COUNT}"
    },
    {
      "sectionType": "textMatrix",
      "array": ["In Stock", "Low Stock", "Out of Stock"],
      "size": 18,
      "weight": 600
    }
  ]
}

Explanation of Example 2:

component: "largeCard": Identifies this as a MiLargeCard component.
highlightLine1: Sets the highlight line.
sections: [...]: Defines two sections.
- First section (sectionType: "list"): Displays a list of top-selling products.
  - listKey: "${INVENTORY.TOP_PRODUCTS}": Fetches the list data from state variable INVENTORY.TOP_PRODUCTS.
  - line1: "${ITEM.PRODUCT_NAME}": Displays the PRODUCT_NAME from each item in the list as the primary line.
  - rightText: "${ITEM.SALES_COUNT}": Displays the SALES_COUNT from each item on the right.
- Second section (sectionType: "textMatrix"): Displays "In Stock", "Low Stock", "Out of Stock" text items in a row with custom styling.

Overview​

Parameters​

Sections Parameter Details​

Example JSON Configurations​

Overview

Parameters

Sections Parameter Details

Example JSON Configurations