Status Bar
Top Panel In Blup

Status Bar

The status bar is the panel that is present on the top of blup. This panel consisted of some of the most important features that help you quickly build UI.
In the centre of the Status bar, you can see the name of the project that you are building. Now let’s see all other options available on the panel.

File Button

This button helps you to start a new blup project or open an existing blup project that is present on your devices.
As soon as you click on this file button a dialog opens up which shows you a couple of options


this option helps you to create a new blup project from the beginning.


this option helps you to open an existing project that is previously created with the help of blup and is present on the system.


this option helps you to find the navigate to the blup community. Where you can help find answers to any problem that you are facing or you can share what you are building with blup and other thoughts that you discovered about blup. We have developed the blup with a community-driven approach.

Add new page

This button helps you to create a new page [Mobile canvas] screen, on which you can create the UI. As soon as you click on the button a new page is created and added in the blup designer section. By default, one page [mobile canvas] is present on the designer.

Show Page Hooks

This button helps you to show all the page hooks that are present on the different pages in the blup designer.
This functionality also helps you to create new Page Hooks with the help of page hooks you can easily navigate to another page with one click of some button [this can be achieved with the helo go a couple of nodes from blup lightning] but from page hooks, it is quite easy.
As soon as you activate the option it shows you all the Page hooks person in the designer, if you want to create a new page that navigates you to another page on click of widgets like rectangle or text present on the page, just hover above the widget on click of which you want to navigate to another page and stretch and drag the node point and drop on the page on which you wan to navigate.

UnHide Widget of the Current Page

this button helps you to shows all the widgets [rectangle/text/input box] that are hidden by their properties from the properties panel. This feature comes in handy when you wanted to see all the widgets present on the screen whether they are hidden or not.
Note - To hide any widget see the documentation of properties panel.

Show guiding Lines

Guiding lines are the helping lines that helo you; align your widget in the pages at the correct place.
There are two major types of guiding lines that are present in the blup.

Center guiding Lines

This type of guiding line only helps you to align the widget in either centre horizontally or vertically or both at the same time. These types of guiding lines are only shoes when you are near to centre either horizontally or centre vertically.
These types of guiding lines are always enabled by the designer.

Always on Guiidnfg lines

As the name suggests these types of guides are always visible and they show distance from all direction in realtime which help you laugh the widget in the screen.
These types of guiding lines are only activated when you press the show guiding lines button in the status bar panel.

Export Code – Flutter/dart

this functionality provides you with all the code that is generated while creating the project either by UI or logic in blup lightning.
The code that is generated by blup is available in a flutter because blup is also built on top of the flutter framework.
Note - whatever you have created with the help of blup always belongs to you, We don't own anything either the code generated by blup. There is No-Lock In in blup.

Run On Device

This functionality helps you to run your project that is created with blup into the mobile phone directly with the help of a USB cable.
Note - To use the phone directly for testing purposes there are few changes that you need to do to your phone that first, you have to enable the developer option in your phone and then you also need to enable the USB debugging mode inside the developer phone. If these options are not enabled then you are not able to install apps on your mobile phone.
Using Run on Device Functionality for First Time
If you are using or installed blup for the first time then first you have to download the required components that blup need to run apps on your mobile phone via USB cable. To download these components just click on the download button icon as shown on the dialog box when you hove above the run button [dialog box is only shown if the required components do not enable].
If you have already installed the necessary components the button shows you a couple of options.
  1. 1.
    Restart Button - this button helps you to restart the app with all the new changes that you have done. You can use this button when you have done some changes in the logics that you have kept in the init state node.
  2. 2.
    Hot reload Button –this button helps you to hot reload your apps instantly with all the new changes that you have done in your project. This functionality is so fast that it takes a fraction of a second to reflect the changes.
    Note - Hot reload functionality works only after the apps build is run on the phone for the first time.
  3. 3.
    Stop button - this button helps you to sop the apps running on your phone instantly.

Edit Setting

This button provides you extra functionality which can be used to change the several functionalities available in blup like changing the apps name.
As soon as you click on the edit setting icon it shows you a dialog box that consists of two options.
This option helps you to change the app name and app logo of your app that is developed through flutter.
If you choose this option it will open up a dailog box which consists of several other input boxes where you provide the required information like organization name and app name and in order, to change the icon just click on the blup images it shows you a file explorer windows from where you can choose any image for your icon.

Remove All SDK’s and Binaries

This option helps you to delete all the SDKs and binaries which you have installed while you wanted to run your app development with blup onto your mobile phone via USB cable.
If you delete these components you won’t be able to run apps for testing on yoit mobile phone via USB cable.
To delete them click on the option it will show you a dialog box in the centre of the screen and then click on delete.

Publish Button

This button is used to generate the signed apk [in case of androd] which you can put on the play store so that your app can be highly available, and downloaded from anywhere.
Note – the blup generate a debug apk when you run it through the run button this ap is not accepted into play store as it is only used to development purpose.

Music to go with.

Lofi music