Blup Menu Bar

Menu Button

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

1. File Button

2. Edit Button

3. View Button

4. Export Button

5. Import Button

6. Help Button

7. Account Settings Button

8. 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.

1. 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.

2. Open: This option helps you to open an existing Blup project from local storage.

3. 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.

1. Undo (Design): This option undoes the changes in the BLUP designer.

2. Redo (Design): This option redoes the changes in the BLUP designer.

3. Undo (Logics): This option undoes the changes in the BLUP logic panel.

4. Redo (Logics): This option redoes the changes in the BLUP logic panel.

5. Copy (Design): It is used to copy the currently selected component in the BLUP designer.

6. Paste (Design): It is used to paste the copied component in the BLUP designer at the current location.

7. Delete (Design): It is used to delete the currently selected component in the BLUP designer.

8. Copy Page (Design): It is used to copy the currently selected page in the BLUP designer.

9. Paste Page (Design): It is used to paste the copied page in the BLUP designer.

10. Delete Page (Design): It is used to delete the currently selected page in the BLUP designer.

11. Copy Node (Logics): It is used to copy the currently selected node in the BLUP logics panel.

12. Paste Node (Logics): It is used to paste the copied node in the BLUP logics panel.

13. Delete Node (Logics): It is used to delete the currently selected node in the BLUP logics panel.

14. 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.

1. Full Screen: It is used to enter Blup into full-screen mode.

2. Minimize Screen: It is used to minimize the app.

3. Show/Hide UI: It is used to toggle between showing or hiding the UI.

4. Zoom In/Out/100% (Design): These options are used to zoom in, zoom out, or set the zoom to 100% in the Design.

5. 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.

Help Button

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

1. 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.

2. Keyboard Shortcuts: Opens a widget displaying keyboard shortcuts.

3. Video Tutorials: Plays all available videos on the Blup YouTube channel directly in the app.

4. 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.

1. Manage Account: It opens the Account Details widget where the user can view and update their details.

2. 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.

1. 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.

2. 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.

Developers Menu Button

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.

Analyzer Button

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

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

• Stop button - this button helps you to stop the apps running on your phone instantly.

Select Device Button

Allows the user to switch between the available devices.

Publish Button

It allows the user to publish the app.

Users can publish their apps in AppStore or PlayStore or generate web builds for deploying.

By clicking on it, It will show a dialog showing generate build for Android/iOS/Web.

We will get to the specifics of publishing the app in publish-to-stores-ship.

Blup Docs Button

This button opens the link to the Blup Documentation where users can get in-depth documentation about Blup and learn more about Blup.

Learn Button

This button opens the YouTube channel of Blup where users can view all the YouTube videos and learn more about Blup.

Music to go with.