Quickstart
As you begin working with FlexDash, there are several customization options you might want to review and adjust to tailor the template to your needs. In this section, we'll walk you through each of these options, explaining their purpose and how they can be used to fine-tune the template's behavior and appearance.
App States
These App States were created specifically for this template to give you control over the behavior of various components. You can set default values or modify these variables later through actions, allowing for flexible customization of the template’s functionality.
darkSidebar
The darkSidebar variable controls whether the sidebar remains in dark mode. When set to true, all elements of the sidebar, including the background, will stay in a fixed dark theme, regardless of the user's device or platform settings.
Please note that the colors used in the dark version of the sidebar must be adjusted individually within the widgets that make up the sidebar. These colors are separate from the general theme settings available in the platform's Theme Settings section.
sidebarExpanded
The sidebarExpanded variable is a boolean that determines whether the sidebar is collapsed or expanded. You can set a default value based on how you want the sidebar to appear when the app loads.
Additionally, you can modify the persistence attribute to control whether the sidebar returns to its default state every time the platform is restarted. This means that even if the user left the sidebar expanded or collapsed before closing the app, it will revert to the default setting upon reopening.
expandedSection
The expandedSection variable stores the name of the accordion that is currently expanded in the sidebar navigation menu. When an accordion is expanded, its name is saved in this variable, ensuring that only the section matching the stored name remains expanded at any given time.
This is an optional variable used if your navigation menu includes accordions or subpages within the sidebar. If your page structure doesn't include subpages, this variable can remain empty. You can also set a default value to determine which section will be expanded when the app first loads.
For more details on how the accordion system is implemented in the navigation menu, click here
Theme Widgets
FlexDash comes with a set of pre-built Theme Widgets, designed to save you time by offering ready-to-use components such as buttons, text fields, and more. These widgets allow you to apply consistent styles—like color, typography, size, borders, and shadows—without the need to manually design each element from scratch.
Make sure to explore this section to see which Theme Widgets are available and how they can streamline your design process.
Custom Alert Action
FlexDash includes a Custom Action to display beautifully designed alerts that replace FlutterFlow’s default snack bar. These alerts allow users to continue interacting with the platform while the message is visible, providing a more professional experience.
The type argument controls the alert style:
1 (Success) → Green with success icon
2 (Info) → Blue with info icon
3 (Error) → Red with error icon
You can find the full explanation of parameters and customization in the Custom Alerts section.
Each alert stays on screen for 4 seconds, and if you wish to adjust its design or behavior, simply edit the corresponding component.
Last updated