Blup Menu Bar

Menu Bar in Blup

As soon as you click or hover on the menu button, a drop-down list pops up containing the following options:

File Button
Edit Button
View Button
Export Button
Import Button
Help Button
Account Settings Button
Blup Button

Now, when click or hover on any of the 8 buttons, a right menu containing available options appears.

File Button

When clicked on the File button, a menu with options for new, open, save as, and duplicate appears.

New: The users can create a new Blup project using this option. Once you click on the New, you will redirected to the Create New Project screen.
Open: This option helps you to open an existing Blup project from local storage.
Save As: This option helps you to save the current project as a Blup file and save it at your desired location.

Edit Button

When clicked on the Edit button, a menu with options for undo, redo (Design), undo, redo (Logics), copy, paste, delete, copy page, paste page, delete page (Design), copy node, paste node, delete node (Logics), and select all appears.

Undo (Design): This option undoes the changes in the BLUP designer.
Redo (Design): This option redoes the changes in the BLUP designer.
Undo (Logics): This option undoes the changes in the BLUP logic panel.
Redo (Logics): This option redoes the changes in the BLUP logic panel.
Copy (Design): It is used to copy the currently selected component in the BLUP designer.
Paste (Design): It is used to paste the copied component in the BLUP designer at the current location.
Delete (Design): It is used to delete the currently selected component in the BLUP designer.
Copy Page (Design): It is used to copy the currently selected page in the BLUP designer.
Paste Page (Design): It is used to paste the copied page in the BLUP designer.
Delete Page (Design): It is used to delete the currently selected page in the BLUP designer.
Copy Node (Logics): It is used to copy the currently selected node in the BLUP logics panel.
Paste Node (Logics): It is used to paste the copied node in the BLUP logics panel.
Delete Node (Logics): It is used to delete the currently selected node in the BLUP logics panel.
Select All: It is used to select all the components/nodes in a single click.

View Button

When clicked on the View button, a menu with options for full screen, minimize screen, show/hide UI, zoom in/out/100% (Design), and zoom in/out/100% (Logics) appears.

Full Screen: It is used to enter Blup into full-screen mode.
Minimize Screen: It is used to minimize the app.
Show/Hide UI: It is used to toggle between showing or hiding the UI.
Zoom In/Out/100% (Design): These options are used to zoom in, zoom out, or set the zoom to 100% in the Design.
Zoom In/Out/100% (Logics): These options are used to zoom in, zoom out, or set the zoom to 100% in the Logics panel.

Export Button

The Export Button in Blup creates a .blupx file, preserving project assets and configurations. It facilitates easy sharing and transfer of projects while maintaining integrity.

Import Button

When clicked on the Import from Figma button, it allows users to import their Figma files directly into Blup.

You can import all your designs using Import from Figma.

Help Button

When clicked on the Help button, a menu with options for the Help Center, Keyboard Shortcuts, Video Tutorials, and Support appears.

Help Center: This option helps you to make the most of the exponentially growing Blup community. You can find answers to any problem that you are facing, or you can share what you are building with Blup and other thoughts on something you discovered about Blup. Blup prides itself on being a community-driven platform.
Keyboard Shortcuts: Opens a widget displaying keyboard shortcuts.
Video Tutorials: Plays all available videos on the Blup YouTube channel directly in the app.
Support: Facilitates collaboration with fellow Blup users on Discord.

Account Settings Button

When clicked on the Account Settings button, a menu with options for Manage Account and Logout appears.

Manage Account: It opens the Account Details widget where the user can view and update their details.
Logout: It logs out the user from Blup.

Blup Button

When clicked on the Blup button, a menu with the option to Remove SDK Binaries appears.

Remove SDK Binaries: It removes all the SDK binaries installed within Blup, that you had installed when the app was run on a physical device through a USB cable.
If you delete these components you will no longer be able to run apps for testing on your mobile phone via USB cable.
To delete them click on Remove All SDKs and Binaries then a dialog box pops up at the center of the screen. Click on delete and you are done.
Settings: It opens the Settings widget where users can customize app settings, splash screen, Google Maps API key, and more.

New Page Button

As the name suggests, the user can add new pages to their project using this button. By default, one page [mobile canvas] will be present on the designer.

Insert Button

It opens the Insert widget which has pre-built Blup widgets and templates ready to go that can be directly used by the user to enhance the user experience.

Import from Figma Button

Import your Figma Designs directly in Blup.

As soon as you click on the Dev menu button, a drop-down list pops up containing the following options:

Edit Code

It allows the user to edit the code directly in the inbuilt code editor of BLUP.

Download Code

This feature allows the user to download this project as a Flutter project.

It allows users to edit that code and update it as a Flutter project.

Analyzer Button

This allows the users to view the warnings and errors in the app.

To enable the app to run or build successfully, it is essential to address all errors.

Run Button

This functionality enables the user to run the app on their physical/virtual devices.

To run your app on a physical device you have to enable the developer option in your phone and also enable the USB debugging mode inside the settings of the phone.

If you are using or installed blup for the first time then first you have to download the required components that blup needs to run the app on your mobile phone via USB cable. To download these components hover over the run button, and a dialog box pops up having a download button, click on the download button to start downloading [dialog box is only shown if the required components are not enabled].

If you have already installed the necessary components the button shows you a couple of options.

Restart Button - This button restarts the app with all the new changes. You can use this button when you have made some changes in the logic that you have kept in the init state node.
Hot Reload Button –This button hot reloads your apps instantly with all the new changes. This functionality is extremely fast and takes only a fraction of a second to reflect the changes

Hot reload functionality works only after the app's build is run on the phone at least once.