Skip to main content

Customize Your App

This guide shows you how to customize your app UI using the standard FluxBuilder workflow:

Design App UI​

Video guide:

Manual guide:

  1. DESIGN A TAB OR SCREEN

(1) Select Design → (2) Click the + icon to add a new Tab/Screen → (3) Click a Tab/Screen to customize it → (4) Edit the items on the selected Tab/Screen → (5) Change it to a different screen type → (6) Click the Duplicate or Delete icon to manage the selected Tab/Screen:

  1. DYNAMIC TAB/SCREEN TYPE

You can create a beautiful Tab/Screen with the Dynamic layout type. With Dynamic layout, you have the flexibility to design a screen with rich and diverse content, such as beautiful images, Instagram Stories, logos, stories, testimonials, videos, and even Web Embed.

(1) Select Design → (2) Choose a Tab/Screen or create a new one → (3) Click the Dynamic layout type → (4) Add or edit items in the Dynamic Tab/Screen → (5) Choose how to display the Dynamic Tab/Screen on the Tab Bar:

At (4), select Add New Layout to choose from a variety of widgets to add to the Dynamic Tab/Screen:

Or, select Layouts to add widgets quickly and intuitively: (1) Select Layouts → (2) Drag each item into the Preview area to add it to the Dynamic Tab/Screen → (3) Drag items from the Preview area to this Trash icon to delete it out of the Dynamic Tab/Screen:

  1. TAB MENU SCREEN TYPE

The Tab Menu layout displays multiple Dynamic Tabs/Screens on a single screen. Each Dynamic Tab/Screen becomes a tab in the menu.

Precondition: Create at least 2 Dynamic Tabs/Screens (see the guide above). For each one, check the GROUP LAYOUTcheckbox and enter a MENU NAME to be displayed as the tab label in the Tab Menu:

Then, create a new Tab/Screen with the Tab Menu layout. Now you see 2 Dynamic Tabs/Screens become 2 tabs in the Tab Menu:

  1. SCROLLABLE TAB/SCREEN TYPE

The Scrollable layout displays multiple Dynamic Tabs/Screens on a single screen, allowing users to scroll through them.

Precondition: Create at least 2 Dynamic Tabs/Screens (see the guide above). For each one, check the GROUP LAYOUTcheckbox and enter a MENU NAME to be displayed as the tab label in the Tab Menu:

Then, create a new Tab/Screen with the Scrollable layout. Now you see 2 Dynamic Tabs/Screens can be scrolled up and down in the Scrollable Screen:

  1. DESIGN THE APP BAR:

(1) Select App Bar → (2) Click the Layout Preview icon to display all App Bar layouts → (3) Select a layout → (4) Check the Enable AppBar checkbox and Select at least one tab/screen to display the App Bar in the app simulator (required) → (5) Edit the items on the App Bar:

  1. DESIGN THE TAB BAR:

(1) Select Tab Bar → (2) Click the Layout Preview icon to display all Tab Bar layouts → (3) Select a layout → (4) Choose how to display the Tab Bar:

  1. DESIGN THE SIDE MENU (LEFTMENU)

(1) Select Side Menu → Go to the editing area on the right to customize the Side Menu → (2) Enable or disable Zoom Style → (3) Add or hide items in the Side Menu:

Configure App Features​

To customize other app screens or features, simply select the item you’d like to customize under Features:

✨ If you're not sure which essential UI and features need to be configured before submitting your app for approval, click Task Progress:

Your Task List is now open and shows the essential tasks to complete:

tip

If you want to update your app without republishing it to the App Store and Google Play, configure this feature before building your app.

Tips​

🤖 AI Assistant​

Use AI Assistant to create beautiful UIs and much more:

  • Design app screens and layouts.
  • Configure app features and settings.
  • Build and update your app automatically.
  • Explain FluxBuilder features and workflows.
  • Answer documentation and user guide questions instantly.

Whether you're creating a new app or improving an existing one, AI Assistant helps you complete tasks in minutes instead of hours.

Open your app on FluxBuilder → click AI Assistant, type your request, and press Enter to customize your app UI, configure app features, or build your Android/iOS app:

Update App Without Republishing​

If you want to update your app without republishing it to the App Store and Google Play, configure this feature before building your app.

Follow the Task List​

✨ If you're not sure which essential UI and features need to be configured before submitting your app for approval, click Task Progress:

Your Task List is now open and shows the essential tasks to complete:

Search Shortcut​

Quickly find any feature you want to customize with the Search shortcut. Press and hold Command + F on Mac, or Ctrl + F on Windows.

Example: If you want to find the Smart Chat feature to customize on iMac, simply press Command + F, then enter “chat”:

Add Version History​

Add a new version while editing your app and easily switch between previous versions. This makes it easy to save your progress and return to previous versions whenever needed.

(1) Click V1 to open Version History → (2) Click the + icon to add a new version, or use Command + Shift + S for quick add. → (3) Select any version to switch to and use that version:

Undo and Redo​

Easily undo or redo your changes while designing your app UI and features.

  • Undo: Quickly revert your most recent changes.
  • Redo: Restore changes you’ve previously undone.
  • Use Command + Z to undo and Command + Shift + Z to redo.

Import and Export​

After designing your app with FluxBuilder, you can Export your custom design and feature setting (2 Flutter code files) to save them on your local device for backup or further use.

You can also Import these files back into FluxBuilder to continue customizing your app anytime.

For more details, check out the Import & Export Guide.