PageLayout

The PageLayout component is an abstract Flutter widget that serves as a base class for creating page layouts in applications. It provides a foundational structure for consistent page presentation, responsiveness, and common page functionalities. PageLayout is designed to be extended by concrete page layout implementations like DefaultPageLayout, CardWithBgPageLayout, MapPageLayout, and ChatPageLayout.

Overview

PageLayout offers a blueprint for building application pages, enforcing a standardized structure and providing built-in features that are common to most pages. Key aspects of PageLayout include:

• Abstract Base Class: PageLayout itself is not directly used for rendering UI. Instead, you create concrete page layout widgets by extending PageLayout and implementing the abstract buildPageLayout method.
• Consistent Page Structure: Ensures that all page layouts within the application adhere to a common base structure, promoting UI consistency and maintainability.
• Responsive Design Foundation: Provides the basis for responsive page layouts that adapt to different screen sizes. It defines visual breakpoints and logic to calculate the page body width for various screen constraints.
• SafeArea and Form Integration: Automatically wraps the page content within a SafeArea to avoid overlapping with device status bars or notches, and within a Form widget, providing form management capabilities to extending classes.
• Background Color Customization: Allows setting a background color for the page.
• Extensibility: Designed to be extended by specialized page layout widgets, each implementing a specific visual style and potentially adding page-specific functionalities.

Component Name: pageLayout (Abstract Class)

JSON key: While PageLayout itself is abstract and not directly instantiated from JSON, concrete subclasses like DefaultPageLayout are. The type key for factory-based creation is 'pageLayout'.

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
bgColor	String	Color	Background Color: Background color of the page container. Can be a theme color key.	Theme's bgColor or default theme background color	Yes	No
padding	List<num>	EdgeInsets	Page Padding: Padding applied to the main page content area. 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:

• Abstract Class Nature: You cannot directly use PageLayout in a JSON configuration. You must use one of its concrete subclasses (e.g., DefaultPageLayout, CardWithBgPageLayout, etc.) by specifying the appropriate "component" and "typeLayout" keys for those subclasses.
• Responsiveness Foundation: PageLayout sets up the responsive behavior by defining visualBreakpoints and the getPageBodyWidth function. Concrete subclasses inherit and utilize this foundation to build responsive layouts.
• Visual Breakpoints: The visualBreakpoints list ([600, 720, 840, 960, 1080, 1200, 1400, 1600]) defines screen width breakpoints (in pixels) that are used to determine the maximum width of the page content on different screen sizes. The getPageBodyWidth function ensures that the page content does not become excessively wide on very large screens, improving readability.
• buildPageLayout Method (Abstract): The core of any concrete PageLayout subclass is the buildPageLayout(BuildContext context) method. This abstract method must be implemented by subclasses to define the specific layout and content of the page. It is within this method that you would arrange the header, body, footer, and other page elements as needed for the particular page type.
• responsiveWrapper Method (Overridable): The responsiveWrapper method is designed to allow subclasses to further customize the responsive behavior of the page, for example, by adding platform-specific wrappers or scroll behaviors. In PageLayout itself, it simply returns the page widget without any additional wrapping. DefaultPageLayout overrides this to add web-specific scrolling.
• responsiveSizedBox Widget: This widget uses LayoutBuilder and the getPageBodyWidth function to create a SizedBox that constrains the width of its child based on the available screen width and the defined visual breakpoints, effectively making the page content responsive.
• Form and SafeArea: PageLayout automatically includes a Form widget (using cubit?.formKey if a cubit is available) and a SafeArea. This is a common requirement for many pages and is handled centrally in the base class.

Example JSON Configuration (Conceptual - for a Concrete Subclass)

Since PageLayout is abstract, you don't directly configure it in JSON. However, you configure its concrete subclasses. Here's a conceptual example of how you might configure a DefaultPageLayout which extends PageLayout, demonstrating how bgColor (inherited from PageLayout) is used:

{
  "component": "defaultPageLayout",
  "bgColor": "greyLight",
  "header": {
    "component": "container",
    "color": "primary",
    "child": {
      "component": "text",
      "text": "My Page",
      "color": "white"
    }
  },
  "body": [
    {
      "component": "text",
      "text": "Page content here."
    }
  ]
}

Explanation of Conceptual Example:

• "component": "defaultPageLayout": Specifies a concrete subclass of PageLayout.
• "bgColor": "greyLight": Sets the background color of the DefaultPageLayout (inherited from PageLayout). This demonstrates how parameters defined in PageLayout are used by its subclasses.
• The rest of the JSON configures the header and body, which are specific to DefaultPageLayout and illustrate how concrete subclasses extend the base PageLayout functionality.