Docs
BlupLearnSupportDownload
  • Home 🏠
  • Wiki
    • Design (UI) ✏️
      • Blup Top Bar
      • Blup Menu Bar
      • Pages/Layers Panel
      • Toolkit
      • Insert Panel
        • TextField Widget
        • Progress Widget
        • FAB Widget
        • Icon Widget
        • Lottie Animation Widget
        • Text Button Widget
        • Appbar Widget
        • Checkbox Widget
        • Switch Widget
        • Slider Widget
        • Radio Widget
        • Progress bar Widget
        • Multi choice dialog Widget
        • Web View Widget
        • Camera View Widget
        • Map View Widget
        • Date Picker Widget
        • Time Picker Widget
        • IOS Date Picker Widget
        • IOS Timer Widget
        • Alert Dialog box Widget
        • Dropdown Menu Widget
      • Properties Panel
        • Pages Properties
        • Text Properties
        • List Properties
        • Rectangle Properties
      • Page Canvas
      • Choose from Assets
      • Right-Click Menu in Design
      • How to use navigate page in Blup
    • Logics ⚡
      • UI Nodes
        • Rectangle UI Node
        • Text UI Node
        • Group UI Node
        • List UI Node
        • Page ListView UI Node
      • Helper Nodes
        • Boolean Nodes
        • Date Time Nodes
        • Double Nodes
        • Duration Nodes
        • Integers Nodes
        • Json Nodes
        • List Nodes
        • Map Nodes
        • String Nodes
      • Variables Node Section
      • Function Node Section
      • Maths Node Section
      • Flow Control Section
      • Relational Operators Section
      • Logical Operators Section
      • System Node Section
      • SDK Library Section
      • Blup Sheet API Node Section
    • Backend 🔗
      • Sheets
      • SQL
    • Blup Code Editor
      • File Explorer
      • Editor Area
    • Publish to stores 🚀(Ship)
      • iOS Cloud Build 😮‍💨
        • Configure ⚙️
        • Run ▶️
      • Play Store
    • Build Your First App
      • TODO App
  • Blup Settings
  • Import from Figma
  • How to use WebView in Blup
  • How to use Google Maps in Blup
  • How to use the camera in blup?
  • How to add Splash screen in Blup?
  • How to know Debug prints in blup
  • How to use Google sign in in Blup
  • Creating sign up/ sign in in Blup
Powered by GitBook
On this page
  • Menu Button
  • File Button
  • Edit Button
  • View Button
  • Export Button
  • Import Button
  • Help Button
  • Account Settings Button
  • Blup Button
  • New Page Button
  • Insert Button
  • Import from Figma Button
  • Developers Menu Button
  • Edit Code
  • Download Code
  • Analyzer Button
  • Run Button
  • Select Device Button
  • Publish Button
  • Blup Docs Button
  • Learn Button
  • Music to go with.

Was this helpful?

Edit on GitHub
  1. Wiki
  2. Design (UI) ✏️

Blup Menu Bar

Menu Bar in Blup

PreviousBlup Top BarNextPages/Layers Panel

Last updated 1 year ago

Was this helpful?

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

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.

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.

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

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.

You can import all your designs using .

Import yourdirectly in Blup.

We will get to the specifics of publishing the .

Import from Figma
app in publish-to-stores-ship
Figma Designs
Lofi music
Blup Menu Bar
Menu Button
File Button
Edit Button
View Button
Export Button
Import Button
Help Button
Account Settings
Blup Button
New Page Button
Insert Button
Import From Figma
Developers Menu
Analyzer Button
Run Button
select a device
Blup Docs
Learn Button
Blup Menu Bar
menu button
File Button
Edit Button
View Button
Export Button
Import Button
Help Button
Account Settings
Blup Button
New Page Button
Insert Button
Import from Figma
Developers Menu
analyzer button
Run Button
select a device
Blup Docs
learn button