MiSmallCard

The MiSmallCard component is a versatile Flutter widget for creating small, rich cards to display info and actions, configurable with JSON.

Overview

MiSmallCard is a compact way to show key information in your Flutter app. Built on MiStatelessWidget and using MiAction, it's great for lists or grids. Each card can have an image, up to four text lines, and two buttons, all set in JSON. Customize its look with borders, background, and text styles.

Component Name: smallCard

JSON key: "component": "smallCard".

Parameters

The MiSmallCard component is highly customizable with these JSON parameters:

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
`action`	`dynamic`	`dynamic`	Card Action: Action when the card is tapped (outside buttons). JSON object with `actionType` and parameters. No tap action if omitted.	`null`	Yes	No
`line1`	`dynamic`	`Widget`	Line 1 Text: Topmost text line. String (default style) or `MiText` JSON (rich style).	`null`	Yes	Yes
`line2`	`dynamic`	`Widget`	Line 2 Text: Second text line, below Line 1. String or `MiText` JSON.	`null`	Yes	Yes
`line3`	`dynamic`	`Widget`	Line 3 Text: Third text line, below Line 2. String or `MiText` JSON.	`null`	Yes	Yes
`line4`	`dynamic`	`Widget`	Line 4 Text: Fourth text line, below Line 3. String or `MiText` JSON.	`null`	Yes	Yes
`button1`	`dynamic`	`Widget`	Button 1: First button, bottom right. `MiButton` JSON config.	`null`	Yes	Yes
`button2`	`dynamic`	`Widget`	Button 2: Second button, left of Button 1, bottom right. `MiButton` JSON config.	`null`	Yes	Yes
`image`	`dynamic`	`Widget`	Leading Image: Image on the left. String or `List<String>` (URL(s) for `MiNetworkImageWithDialog`). Opens dialog on tap.	`null`	Yes	Yes
`borderRadius`	`num`	`double`	Corner Radius: Card corner roundness.	`16.0`	Yes	No
`borderWidth`	`num`	`double`	Border Width: Card border thickness.	`0.0`	Yes	No
`borderColor`	`String`	`Color`	Border Color: Card border color. Defaults to primary color if `borderWidth > 0` and color is null.	`null`	Yes	No
`color`	`String`	`Color`	Background Color: Card background fill color.	`"white"`	Yes	No
`padding`	`List<num>`	`EdgeInsets`	Inner Padding: Padding inside the card. List of numbers for [left, top, right, bottom], etc.	`EdgeInsets.all(12)` or `EdgeInsets.all(8)`	Yes	No
`margin`	`List<num>`	`EdgeInsets`	Outer Margin: Margin around the card. List of numbers for [left, top, right, bottom], etc.	`null`	Yes	No
`alignment`	`String`	`AlignmentGeometry`	Alignment: Card alignment within parent.	`"topLeft"`	Yes	No
`width`	`num`	`double`	Fixed Width: Card width. Fills parent width if not set.	`null`	Yes	No
`height`	`num`	`double`	Fixed Height: Card height. Content-based if not set.	`null`	Yes	No

Note:

Action-Driven: Card and buttons use MiAction for interactivity.
Flexible Text: Lines 1-4 can be simple text or styled with MiText JSON. Build Required: line1, line2, line3, and line4 parameters require build as they utilize factory.resolve to create Widget instances from JSON or Strings.
Image Dialog: image uses MiNetworkImageWithDialog for loading and dialog on tap.
Default Text Styles: Lines have default text styles for quick setup. Build Required: Default text styles are applied during the build process within _processLine function.
Border Style: Customize border with radius, width, and color.
Action Process: Taps trigger actions processed by the app's action system. Build Required: Actions are resolved and attached during the build process.

Example JSON Configurations

Example 1: Simple Product Card with Image Dialog and One Button

{
  "component": "smallCard",
  "image": "[https://placekitten.com/100/100](https://placekitten.com/100/100)",
  "line1": "Kitten Plush Toy",
  "line2": "Tap to see larger image",
  "button1": {
    "component": "button",
    "type": "filled",
    "label": "View",
    "action": {
      "actionType": "navigate",
      "navigationType": "push",
      "pageName": "productDetails",
      "pageArgs": {
        "productId": "123"
      }
    }
  }
}

Explanation of Example 1:

component: "smallCard": This is a MiSmallCard.
image: "https://placekitten.com/100/100": Uses MiNetworkImageWithDialog. Image opens in dialog on tap.
line1: "Kitten Plush Toy": Product name (default text style).
line2: "Tap to see larger image": Hint about image dialog (default text style).
button1: "View" button, performs Navigation Type: push to "productDetails" page.

Example 2: Detailed Event Card with Image Gallery, Styled Text Lines and Two Buttons

{
  "component": "smallCard",
  "image": [
    "[https://placekitten.com/200/300](https://placekitten.com/200/300)",
    "[https://placekitten.com/250/350](https://www.google.com/search?q=https://placekitten.com/250/350)"
  ],
  "line1": {
    "component": "text",
    "text": "Tech Conference 2024",
    "size": 18,
    "weight": 700,
    "color": "primary"
  },
  "line2": {
    "component": "text",
    "text": "Image Gallery Available",
    "size": 16,
    "color": "grey"
  },
  "line3": {
    "component": "text",
    "text": "October 26-28",
    "size": 14,
    "color": "grey"
  },
  "line4": {
    "component": "text",
    "text": "Tap image to view",
    "size": 15,
    "weight": 600,
    "color": "secondary"
  },
  "button1": {
    "component": "button",
    "type": "outlined",
    "label": "Details",
    "action": {
      "actionType": "navigate",
      "navigationType": "push",
      "pageName": "eventDetails",
      "pageArgs": {
        "eventId": "TC2024"
      }
    }
  },
  "button2": {
    "component": "button",
    "type": "filled",
    "label": "Register",
    "action": {
      "actionType": "openUrl",
      "url": "[https://example.com/tech-conference-registration](https://www.google.com/search?q=https://example.com/tech-conference-registration)"
    }
  }
}

Explanation of Example 2:

component: "smallCard": This is a MiSmallCard.
image: [...]: Uses MiNetworkImageWithDialog with image gallery (multiple URLs). Image area opens gallery dialog on tap.
line1 - line4: Styled text lines using MiText JSON for title, details, and hint about image gallery. Build Required: These lines are built into Widgets during the build process.
button1: "Details" button, performs Navigation Type: push to "eventDetails" page. Build Required: Button is built into a Widget during the build process.
button2: "Register" button, opens registration URL. Build Required: Button is built into a Widget during the build process.

Overview​

Parameters​

Example JSON Configurations​

Overview

Parameters

Example JSON Configurations