Page structure
Each page in FlexDash follows a consistent structure designed for flexibility and responsiveness. The main layout is composed of two primary areas (Side A and Side B), arranged using a Flex widget that adapts to different devices:
Web/Desktop: Content is displayed in two columns (horizontal).
Mobile: Content is stacked in one column (vertical).
Main Layout
Row Container: The root of the page is a row containing:
Sidebar (visible on larger screens).
Main Column (scrollable content of the page).
Drawer: On smaller screens, the sidebar is replaced by a drawer. For more details, see the Sidebar documentation.
Main Column
Inside the main column:
Sticky Header
This widget keeps the template header fixed at the top of the screen.
Inside the
StickyHeaderContent, you can place any content you want directly below the header.
MaxWidthContainer
Ensures the page content does not expand excessively on large screens.
Keeps the layout clean and centered for a professional appearance.
Flex Layout (Side A and Side B)
Provides the main two-part layout of the page.
Web/Desktop: Both sides are displayed horizontally.
Mobile: Both sides are stacked vertically.
Inside each side, you can place any widgets or structures required.
Blank Page Template
FlexDash also includes a Blank Page that you can use as a clean starting point. This is often a better choice than modifying the main template pages directly, since it allows you to build layouts from scratch using existing components without losing the option to reset the original template later.
Note on Flex Layout Testing When working with Flex, it is highly recommended to run tests frequently. Due to current FlutterFlow limitations (this may change in the future), some layout issues with nested widgets inside a Flex are not visible in the editor and only appear during testing.
Always run tests both in mobile and web modes separately.
Some layout errors (e.g., blank pages) may only appear when opening a page directly in one mode (web or mobile), and not when switching modes inside the editor.
Last updated