CardWithBgPageLayout

The CardWithBgPageLayout component is a stateless Flutter widget that extends PageLayout to provide a page structure with a distinct card-like appearance on a styled background. It wraps the page content in a rounded card with a white background, placed on a customizable background color or a special 'circles' background.

Overview

CardWithBgPageLayout offers a visually appealing alternative to the standard DefaultPageLayout, providing a more contained and card-like presentation for page content. It's suitable for scenarios where you want to emphasize content within a card visually separated from the page background. Key features include:

• Card-Style Layout: Presents the page content within a rounded, white card, creating a visually distinct content area.
• Customizable Background: Allows setting a background color for the entire page, or using a unique 'circles' background style.
• Responsiveness: Inherits responsiveness from PageLayout, adapting to different screen sizes.
• Layout Configuration for Body: The body content is structured using MiColumn and can be configured using layoutConfig.

Component Name: cardWithBgPageLayout

JSON key: "component": "cardWithBgPageLayout".

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
bgColor	String	Color	Background Color: Background color of the entire page. Can be a theme color key or the special value "circles". If set to "circles", a stylized circles background is rendered. Otherwise, a solid color background is used. Inherited from PageLayout.	Theme's bgColor	Yes	No
header	Map	Widget	Header (Parameter - Not Implemented): This parameter is defined in CardWithBgPageLayout as part of the PageLayout structure but is currently not used to render a header within this component. It is present for potential future implementation or consistency with other page layouts.	SizedBox.shrink()	Yes	Yes
body	List<Map>	List<Widget>	Body: List of JSON configurations for widgets to be displayed in the main card body. These widgets are arranged within a MiColumn inside the card.	null	Yes	Yes
bodySpacing	num	double	Body Spacing: Vertical spacing (in logical pixels) between elements within the body column inside the card.	20.0	Yes	No
footer	Map	Widget	Footer (Parameter - Not Implemented): This parameter is defined in CardWithBgPageLayout as part of the PageLayout structure but is currently not used to render a footer within this component. It is present for potential future implementation or consistency with other page layouts.	SizedBox.shrink()	Yes	Yes
canRefresh	bool	bool	Can Refresh (Parameter - Not Implemented): This parameter is defined in CardWithBgPageLayout as part of the PageLayout structure but is currently not used to enable pull-to-refresh functionality or for any other purpose within this component. It is present for potential future implementation or consistency with other page layouts.	false	Yes	No
crossAxisAlignment	String	CrossAxisAlignment	Cross Axis Alignment: Defines the cross-axis alignment for the MiColumn that structures the body content within the card. Values are Flutter CrossAxisAlignment enum string values (e.g., "start", "center", "end").	"center"	Yes	No
mainAxisAlignment	String	MainAxisAlignment	Main Axis Alignment: Defines the main-axis alignment for the MiColumn that structures the body content within the card. Values are Flutter MainAxisAlignment enum string values (e.g., "start", "center", "end").	"start"	Yes	No
layoutConfig	String	String	Layout Config: Configuration string passed down to the MiColumn used to structure the body content within the card. Refer to DefaultPageLayout and MiColumn documentation for layoutConfig options.	'3-1'	Yes	No
padding	List<num>	EdgeInsets	Page Padding: Padding applied to the main content area (body) within the card. Inherited from MiStatelessWidget.	null	Yes	No
margin	List<num>	EdgeInsets	Page Margin: Margin applied to the entire page layout widget. Inherited from MiStatelessWidget.	null	Yes	No
alignment	String	AlignmentGeometry	Page Alignment: Alignment of the page content within its available space. Inherited from MiStatelessWidget.	"topLeft"	Yes	No
color	String	Color	Container Color: Color of the outermost container of the page layout. Inherited from MiStatelessWidget.	null	Yes	No
width	num	double	Page Width: Sets a fixed width for the page's content area. Inherited from MiStatelessWidget.	null	Yes	No
height	num	double	Page Height: Sets a fixed height for the page layout. Inherited from MiStatelessWidget.	null	Yes	No

Note:

• Card Visual Style: CardWithBgPageLayout is characterized by its rounded white card container that encapsulates the body. This provides a visually distinct and contained content area on the page. Currently, header, footer, and pull-to-refresh functionalities are not implemented in this component, even though parameters for them are defined.
• Background Options (bgColor parameter):
  • Theme Colors: You can set bgColor to any theme color key (e.g., "primary", "accent", "greyLight") to apply a solid background color from your application's theme.
  • "circles" Value: Setting bgColor to the special string value "circles" will render a unique background with layered, partially transparent circles in varying shades of purple. This provides a visually rich and distinctive background style.
  • Default Background: If bgColor is not specified, it defaults to the theme's bgColor or a default background color defined in your application's theme.
• Responsiveness and Card Width: Like DefaultPageLayout, CardWithBgPageLayout inherits responsive behavior from PageLayout. The card's width is constrained responsively using responsiveSizedBox to ensure readability and appropriate layout on different screen sizes.
• Content Structure (Body): The body parameter functions similarly to those in DefaultPageLayout. You configure widgets for this section using JSON. The body content is laid out using a MiColumn within the card. Header and Footer content and Pull-to-Refresh are not implemented in this component.
• MiColumn Configuration: The body section uses a MiColumn component to arrange its child widgets vertically. You can further configure the layout of this MiColumn using parameters like bodySpacing, crossAxisAlignment, mainAxisAlignment, and layoutConfig, just as you would with a standalone MiColumn component. Refer to the MiColumn and DefaultPageLayout documentation for details on layoutConfig and MiColumn layout parameters.

Example JSON Configuration

Example 1: Basic Card Layout with Solid Color Background

{
  "component": "cardWithBgPageLayout",
  "bgColor": "greyLight",
  "body": [
    {
      "component": "text",
      "text": "Content inside the card.",
      "fontSize": 16
    },
    {
      "component": "text",
      "text": "This content is visually contained within a card on a light grey background.",
      "fontSize": 14
    }
  ]
}

Explanation of Example 1:

• This JSON defines a CardWithBgPageLayout with a solid background color.
• "component": "cardWithBgPageLayout" specifies the component.
• "bgColor": "greyLight" sets the page background to a light grey theme color. The content card will be rendered on top of this background.
• "body" defines the content within the card, similar to DefaultPageLayout examples, but without header or footer or pull-to-refresh configurations as they are not used in this component.

Example 2: Card Layout with 'Circles' Background and Body Layout Configuration

{
  "component": "cardWithBgPageLayout",
  "bgColor": "circles",
  "body": [
    {
      "component": "text",
      "text": "This page uses the 'circles' background style.",
      "fontSize": 16
    },
    {
      "component": "text",
      "text": "The body content below will be laid out in a responsive 2-column grid on larger screens.",
      "fontSize": 14
    },
    {
      "component": "button",
      "label": "Button 1"
    },
    {
      "component": "button",
      "label": "Button 2"
    },
    {
      "component": "button",
      "label": "Button 3"
    },
    {
      "component": "button",
      "label": "Button 4"
    }
  ],
  "layoutConfig": "2",
  "bodySpacing": 25
}

Explanation of Example 2:

• This example demonstrates using the "circles" background and configuring the body layout.
• "bgColor": "circles": Sets the page background to the special circles style.
• "body": Contains MiText and MiButton components to showcase content within the card.
• "layoutConfig": "2": Sets the layoutConfig to "2" for the MiColumn in the body, demonstrating responsive layout within the card.
• "bodySpacing": 25: Increases the spacing between elements in the body's MiColumn. Note that there are no header, footer, or pull-to-refresh configurations in this example, as they are not used by CardWithBgPageLayout.