# Home 🏠 Welcome to Blup docs, your comprehensive resource for all things related to the inner workings of Blup!
/pages/-Me5_S67IXvLwRr770Xa
/pages/-MhYdsdEjMkCRj9xn7jG
/pages/-Me5_K2kjbnFNmLkDYHK
/pages/kcJjhTzkLLol9Lc8LcKC
/pages/vaJs0prwYQz0efHstPW5
Youtube Tutorials ▶️
Download Blup ⬇️
## Guide to Blup documentation This section is an overview of Blup docs. Blup consists of three major sections that are as follows: 1. **Design:** This is where the magic happens! In **Design**, you create stunning user interfaces (UIs) for your apps. With complete flexibility, you can design and customize every aspect of your app’s look and feel. It’s the heart of your Blup applications. 2. **Logics:** Once you’ve crafted your UI, it’s time to add logic. Logics is a powerful logic system where you create interactions and backend functionality. You’ll find a wide range of [nodes](/wiki/logics/ui-nodes), from simple variables to SDKs hosted on [pub.dev](https://pub.dev). Build dynamic and responsive apps by connecting your designs to logic seamlessly. 3. **Backend:** Need a backend? **Backend** has got you covered. Built on top of AWS, it provides a pre-built backend system with SQL-like queries. You can create real-time applications like chat apps or collaboration tools effortlessly. **Backend** is fast, reliable, and easy to use. 4. **Code Editor:** Wants more customization? Let’s dive into the **Code Editor** – your gateway to more customization and fine-tuning in Blup. With the Code Editor, you can write code, edit native files, and seamlessly connect with your app’s UI. To make the most of Blup, follow this order: 1. [**Design**](/wiki/design-ui): Master the art of UI design. 2. [**Logics**](/wiki/logics): Dive into logic creation. 3. [**Backend**](/wiki/backend): Explore the backend capabilities. ### YouTube: Complete Beginners Series to Blup. \[Playlist] If you prefer video tutorials, check out our **Complete Beginners Series to Blup** on YouTube. {% embed url="" %} Beginners Series to Blup. \[Playlist] {% endembed %} We’re also planning to release videos featuring full production-ready apps, so stay tuned! Happy Blupping! 🚀🎨🔌 # Design (UI) ✏️ User Interface Designer for your app. {% tabs %} {% tab title="Video" %} {% embed url="" %} {% endtab %} {% tab title="Music" %} {% embed url="" %} Lofi music {% endembed %} {% endtab %} {% endtabs %} **Design** helps you to design stunning & creative user interfaces of the pages for your applications seamlessly. ![Deign](/files/Gqvc2AmmMO3tUco4WM7e) Certainly! Let’s take a closer look at the different panels in **Design**: 1. [**Blup Top Bar**](/wiki/design-ui/blup-top-bar): Located at the top of the interface, the Blup Top Bar provides essential functions and tools. It often includes options for saving, exporting, and managing your project. 2. [**Blup Menu Bar**:](/wiki/design-ui/blup-menu-bar) Positioned just below the Blup Top Bar, the Blup Menu Bar offers additional commands and settings. You’ll find various menus related to file management, editing, and preferences here. 3. [**Pages/Layers Panel**](/wiki/design-ui/pages-layers-panel): This panel resides on the left side of the workspace. It allows you to manage pages, layers, and other organizational elements. You can create, rename, and rearrange pages or layers as needed. 4. [**Toolkit**](/wiki/design-ui/tools-section): The Toolkit is situated on the pasteboard (the main working area). It contains tools for drawing, selecting, and manipulating objects. You’ll find tools like pens, shapes, and text here. 5. [**Properties Panel**](/wiki/design-ui/properties-panel): On the right side, the Properties panel displays the properties and attributes of selected objects. Adjustments related to color, stroke, opacity, and other properties can be made here. 6. [**Page Canvas**](/wiki/design-ui/page-canvas): The central area of the workspace is the Page Canvas. This is where you create and arrange your designs. It’s the canvas where your artistic vision comes to life! Feel free to explore each section further, and if you have any specific questions about any of these panels, feel free to ask! 😊 If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with {% embed url="" %} Lofi music {% endembed %} # Blup Top Bar It serves as a crucial component in product interfaces. Let’s delve into its composition and purpose: ### **Home** * Navigate to the Blup dashboard. * Access projects, tutorials, community, favorite projects, bin (deleted projects), support and settings.
home button

Home

### **Design** The core engine for your Blup applications, enabling you to craft designs and user interfaces with unparalleled flexibility.
design

Design

### **Logics** A logic system for creating logic around designs and interactions. Supports a variety of nodes, including variables and SDKs hosted on pub.dev.
logics

Logics

### **Backend** A pre-built backend system built on AWS. Provides powerful SQL-type queries for building real-time applications.
backend

backend

### **Project Info** As soon as you click on the project info button a drop-down list pops up containing the following options: * **Project Details:** Streamline app control: manage settings, access profile details, subscriptions, invoices, and plans from one place. * **Rename:** Rename the current project. * **Export:** Export the project as BlupX for easy sharing. * **Delete:** Delete the current project.
project info

Project Info

### **Project Plan** Displays the current subscribed plan (free, basic, or pro).
project plan

Project Plan

### **Help Button** As soon as you click on the help button a drop-down list pops up containing the following options: * **Help Center:** Opens the website URL to help users understand Blup. * **Submit Feedback:** Takes users to the Blup Discord to submit feedback. * **Ask the Community:** Facilitates collaboration with fellow Bluppers on Discord. * **YouTube Videos:** Plays all available videos on the Blup YouTube channel directly in the app. * **Keyboard Shortcut:** Opens a widget displaying keyboard shortcuts. * **Tutorial Discover:** Opens a widget to revisit tutorials anytime. * **Dark Mode:** Toggles between dark mode and light mode. * **Enable Auto Build:** The user can enable auto-build. * **Build in Profile Mode:** To build the app in profile mode.
help

Help

If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ### Music to go with. {% embed url="" %} Lofi music {% endembed %} # Blup Menu Bar Menu Bar in Blup
Blup Menu Bar

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
menu button

Menu 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.
File Button

File Button

### 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.
Edit Button

Edit Button

### 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.
View Button

View Button

### 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.
Export Button

Export Button

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

Import Button

{% hint style="info" %} You can import all your designs using [Import from Figma](/import-from-figma). {% endhint %} ### 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.
Help Button

Help Button

### 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.
Account Settings

Account Settings

### 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.
Blup Button

Blup Button

## **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.
New Page Button

New Page Button

## **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.
Insert Button

Insert Button

## **Import from Figma Button** Import your[ Figma Designs ](#import-from-figma-button)directly in Blup.
Import from Figma

Import From Figma

## **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. {% hint style="info" %} It allows users to edit that code and update it as a Flutter project. {% endhint %}
Developers Menu

Developers Menu

## **Analyzer Button** This allows the users to view the warnings and errors in the app.
analyzer button

Analyzer Button

{% hint style="info" %} To enable the app to run or build successfully, it is essential to address all errors. {% endhint %} ## **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 {% hint style="info" %} Hot reload functionality works only after the app's build is run on the phone at least once. {% endhint %} * Stop button - this button helps you to stop the apps running on your phone instantly.
Run Button

Run Button

## **Select Device Button** Allows the user to switch between the available devices.
select a device

select a device

## **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](/wiki/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.
Blup Docs

Blup Docs

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

Learn Button

## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Pages/Layers Panel Efficiently manage your app's pages and layers in Blup with the Pages & Layers Panel. Layer/Panel consists of: * **Search bar** * **Tabbar** * **Tabbar view** ### Search Bar When you click on the search icon located on the right side, it activates an input box. This input box allows you to filter through pages and layers. In other words, you can easily search for specific pages or layers by typing keywords or names into the input box, helping you quickly locate and manage the desired elements within the interface.
Search Layer or page
### Tabbar The tabbar serves as a navigation tool for toggling between pages and the layer view. Clicking on the "layers" option reveals the layers view, displaying all widgets/components on the selected page or screen. Conversely, clicking on "pages" displays a list of all available pages. This functionality improves usability by offering a straightforward and intuitive method for navigating different sections of the interface and accessing specific features, ultimately enhancing the overall user experience.
### **Tabbar view** The view showcases either all components or all pages available i.e. layer panel or pages panel. #### Layers Panel

Layers Panel

Blup employs a layering approach, where each widget is constructed with multiple layers stacked atop one another. Every page or canvas has its own unique set of layers, visible within this designated section. These layers represent the composition of the current page. To view the layers of a different page, click on the respective page name in the pages tab within this section. Layers prove invaluable when designing widgets that require stacking. To rearrange the order of any layer, select it and drag it to the desired position. Any Groups or Objects you add to the canvas will be visible in the **Layers** panel. You can determine if a Layer is a Frame, Group, or a specific type of Object by the icon next to it: * Rectangle * Text * Group * Scroll * List View * Page View Blup nests any child objects within their parent group. This allows you to collapse and expand layers within a group. New layers will be added to the top of the list, or the top of the group or frame it is contained within. Or, just above the layer you currently have selected.\ \ If your layers are inside a section, the section will always be the parent-level layer. There are lots of interactions you can have * Select layers, groups, and frames * Adjust the z-index with layer order * Rename layers individually. * Toggle layer visibility #### Pages Panel

Pages Panel

The pages section is essentially a list of all the pages or screens you have built for your project or app. You can add new pages by clicking the "**Add Page"** button. You can also view all pages or screens by clicking the "View All Pages" CheckBox or checking it and vice-versa for a selected page or screen. If you have any ideas to make Blup better you can share them through our [Discord community channel ](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} # Toolkit Our versatile draggable toolkit is designed to elevate your experience by providing effortless access to tools like the selection cursor, rectangle, etc, enabling you to create with precision & ease. ## Toolkit

Toolkit

This segment encompasses all the necessary tools for constructing the UI. We'll delve into each tool individually, providing detailed explanations for features like the selection cursor, rectangle, text, and more. ### Selector Cursor

Selection Cursor

The Selector Cursor within the Blup is your precision powerhouse. With a click, the standard cursor transforms into a selector cursor, tailored for picking and modifying components seamlessly. Empowering you to apply diverse properties from the panel, optimizes your workflow. Press '**V'** or 'Escape' for a smooth transition back to the selector cursor. ### Rectangle Toggle

Rectangle Toogle

The versatile Rectangle Toggle is utilized to generate rectangular shapes within the canvas or pages. When hovering over the rectangle button, a GIF showcasing the various functionalities achievable with the rectangle toggle Upon clicking the button and shifting the cursor to the pages section, it transforms into a cross cursor, facilitating the drawing of rectangular shapes on the screens akin to other designer tools on the market. The dimensions of the rectangle can be adjusted during its creation. Additionally, the properties panel located to the right of the screen offers the option to modify various other properties of the selected rectangle. Thanks to Blup's seamless integration with Windows/Mac OS, any images, GIFs, or videos present in your file explorer can be effortlessly dragged and dropped into any rectangle. ### Text Toggle

Text Toggle

Crucial for textual components, the Text Toggle feature within the Blup tool serves as your creative ally. Hover over it for a demonstration, and Click to switch the cursor to a text cursor, enabling typing anywhere on the page. Easily adjust the font size by switching back to the selector cursor and click-dragging the bottom of the text cell. Delve into advanced customization options in the right-side panel. {% hint style="info" %} Note: Text is used to show information to the user {% endhint %} ### EYE - Dynamic Content Visibility

Eye - Dynamic Content Visibility

The EYE tool in the Blup tool dynamically controls content visibility. Toggle elements based on runtime criteria, enhancing adaptability and interactivity in your design. It's a key player in crafting responsive and user-centric interfaces. ### Toolkit Tact - Flexible Palette Placement Toolkit Tact is your tool for personalized workspace within the Blup tool. Move the toolkit palette across the canvas as per your preferences and workflow needs. It offers flexibility for an adaptable and efficient design experience.

toolkit tact

This toolkit ensures your UI designs are not just functional but visually compelling and user-friendly. Dive in and unleash your creativity within the Blup tool! If you have any ideas to make Blup better you can share them through our [Discord community channel ](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Insert Panel Learn how to insert and configure a variety of widgets in Blup to enhance your application's functionality.
Insert Widgets

Insert Widgets

Widgets are tools you can use to improve the appearance and user-friendliness of your UI, making it more attractive and readable. To enhance your UI, simply select a widget from the options provided, then drag and drop it onto your screen. Customize its components, such as size and color, to tailor it to your needs and preferences. Now, let's explore the available widgets. [TextField Widget](/wiki/design-ui/insert-widgets/textfield-widget) The Textfield widget is crucial for capturing user input. It can be customized with attributes such as placeholder text, input type (e.g., email, password), and validation rules. This widget is vital for forms, search bars, and any feature that requires user text input. [Alert DialogBox Widget](/wiki/design-ui/insert-widgets/alert-dialogbox-widget) The Alert Dialog Box widget displays important messages or prompts to the user. It is essential for alerts, confirmations, or any message requiring user acknowledgment. [AppBar Widget](/wiki/design-ui/insert-widgets/appbar-widget) The AppBar widget is a staple in app design, providing a consistent navigation experience. It usually includes the title of the screen, action icons, and sometimes menus. Customizations include background color, elevation, and additional leading/trailing widgets. [CameraView Widget](/wiki/design-ui/insert-widgets/cameraview-widget) The CameraView widget integrates camera functionality into your app, allowing users to capture photos or videos. It is essential for applications that require media input, such as social media or document-scanning apps. [CheckBox Widget](/wiki/design-ui/insert-widgets/checkbox-widget) The Checkbox widget allows users to select multiple options from a list. It is commonly used in forms and surveys. Customization options include altering the appearance of the checkbox and the accompanying text. [Date Picker Widget](https://github.com/BlupGithub/blup-docs/blob/main/wiki/design-ui/insert-widgets/date_picker-widget.md) The Date-Picker widget allows users to select dates from a calendar interface. It is essential for applications involving scheduling or date input. Customizable features include the appearance of the calendar and the date format. [FAB Widget](/wiki/design-ui/insert-widgets/fab-widget) The FAB widget is a circular button used for primary actions. Commonly placed at the bottom corner of the screen, it is highly visible and encourages user interaction. Use it for actions like adding a new item, composing a message, or starting a task. [Icon Widget](/wiki/design-ui/insert-widgets/icon-widget) Icons play a significant role in making an app's interface intuitive and attractive. The Icon widget lets you add various icons, which can be resized and recolored to match your design. Icons help users quickly understand functionalities and navigate the app. [IOS DatePicker Widget](/wiki/design-ui/insert-widgets/textfield-widget) The iOS Date-Picker widget provides a familiar interface for iOS users, mimicking the native iOS date picker. It is perfect for apps targeting the iOS platform. [IOS Timer Widget](/wiki/design-ui/insert-widgets/ios-timer-widget) The iOS Timer widget provides a timer interface familiar to iOS users, suitable for apps needing countdown or time-tracking features. [Lottie Widget](/wiki/design-ui/insert-widgets/lottie-widget) The TextButton widget provides a simple button with a text label. It is versatile, used for actions where a textual label is sufficient. You can customize the text color, font, and background to fit your app’s theme. [MapView Widget](/wiki/design-ui/insert-widgets/mapview-widget) The MapView widget integrates map functionalities, providing geographical context to users. It is perfect for applications needing location-based services, such as travel or delivery apps. [Multi Choice Widget](/wiki/design-ui/insert-widgets/multi-choice-widget) The Multi-Choice widget is similar to the Checkbox widget but is designed for selecting multiple options from a larger list. It is ideal for forms and surveys requiring multiple selections. [Progress Bar Widget](/wiki/design-ui/insert-widgets/progress-bar-widget) The Progress Bar widget provides a linear progress indicator. It is suitable for tasks like loading data or completing a multi-step process. You can customize the progress bar's color, size, and orientation. [Progress Wheel Widget](/wiki/design-ui/insert-widgets/progress-wheel-widget) The Progress Wheel widget visually indicates the progress of a task, such as file uploads or data processing. You can customize its color, size, and progress percentage to align with your app's design, ensuring a consistent user experience. [Radio Widget](/wiki/design-ui/insert-widgets/radio-widget) The Radio widget allows users to select one option from a set. It is typically used in forms where a single choice is necessary. Customization includes the appearance of the radio button and the accompanying text. [Slider Widget](/wiki/design-ui/insert-widgets/slider-widget) The Slider widget is perfect for selecting a value from a defined range, such as volume or brightness settings. Customizable features include the range, appearance of the thumb, and the track’s color. [Switch Widget](/wiki/design-ui/insert-widgets/switch-widget) The Switch widget is used for binary choices, offering a more modern alternative to checkboxes. It is ideal for settings where toggling between two states is needed. You can customize its color, size, and interaction behavior. [TextButton Widget](/wiki/design-ui/insert-widgets/textbutton-widget) The TextButton widget provides a simple button with a text label. It is versatile, used for actions where a textual label is sufficient. You can customize the text color, font, and background to fit your app’s theme. [Time Picker Widget](/wiki/design-ui/insert-widgets/timepicker-widget) The Time-Picker widget complements the Date-Picker by allowing users to select times. It is ideal for scheduling apps or any feature requiring time input. [Web View Widget](/wiki/design-ui/insert-widgets/web-view-widget) The WebView widget enables you to embed web content directly into your app. It is useful for displaying web pages, online documents, or any web-based content. Customizations include controlling the appearance and behavior of the embedded content. By leveraging these widgets, developers can create interactive, user-friendly applications that meet modern standards and user expectations. This comprehensive suite of widgets allows you to build robust, scalable apps efficiently, enhancing both the development process and user experience. ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # TextField Widget Learn how to insert and configure text fields in Blup for seamless user input and interaction in your applications. TextField Widget is highly customizable and supports various features such as input validation, text formatting, and keyboard types.
TextField

TextField

To integrate a TextField Widget into your UI, follow these steps: **1.** Drag the TextField widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the TextField by adjusting its properties in the editing section on the right. **3.** Additionally, you can enhance the TextField by adding error text, specifying the keyboard type, applying text overflow ellipsis, or configuring it as a password field to hide the entered text. **-** To add error text, you can set the errorText property to display error messages when validation fails. **-** To specify the keyboard type, you can set the keyboardType property to TextInputType to define the type of keyboard layout. **-** To apply text overflow ellipsis, you can set the maxLines property to limit the number of lines displayed and set the overflow property to TextOverflow\.ellipsis. **-** To configure it as a password field, you can set the obscureText property to true to hide the entered text. ### Components of TextField Widget | Component | Description | | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align components of the TextField Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align TextField Widget. | | **Postitions** | Set TextField Widget positions on the X-axis and Y-axis of the mobile canvas. | | **TextField Widget Size** | Specify the width and height of the TextField by providing values for width (w) and height (h). | | **Z rotation** | Rotate the TextField Widget by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the TextField Widget from any of the four directions by specifying the margin value. | | **Font Type** | Choose the preferred font type for selected text. | | **Font Style** | Select font styles from a dropdown menu. | | **Font Size** | Define the font size of the selected text. | | **Letter spacing** | Specify spacing between letters of the selected text. | | **Line Height** | Define the height between lines of text. | | **Max Line** | Define the maximum number of lines the selected text can specify. For example, if you define the value as 2, then the text can only take up 2 lines. | | **Left Align** | This option aligns the text from the left. | | **Centre Align** | This option aligns the text to the centre. | | **Right Align** | This option aligns the text to the right. | | **Font color** | Change the color of the text using color picker, hex code, or RGB sliders. | | **Appearance** | Here in appearance you give the color to the textfield according to your need. | | **Label Properties** | Modify Label text directly in the provided field, and changes will reflect on the mobile canvas. | | **Font Type** | Choose the preferred font type for selected text. | | **Font Style** | Select font styles from a dropdown menu. | | **Font Size** | Define the font size of the selected text. | | **Letter spacing** | Specify spacing between letters of the selected text. | | **Line Height** | Define the height between lines of text. | | **Max Line** | This property helps you to define the maximum number of lines the selected text can specify for example, if you define the value as 2 then the text can only take up 2 lines. | | **Font color** | Change the color of the text using color picker, hex code, or RGB sliders. | | **Hint Properties** | Modify Hint text directly in the provided field, and changes will reflect on the mobile canvas. | | **Font Type** | Choose the preferred font type for selected text. | | **Font Style** | Select font styles from a dropdown menu. | | **Font Size** | Define the font size of the selected text. | | **Letter spacing** | Specify spacing between letters of the selected text. | | **Line Height** | Define the height between lines of text. | | **Max Line** | This property helps you to define the maximum number of lines the selected text can specify for example, if you define the value as 2 then the text can only take up 2 lines. | | **Font color** | Change the color of the text using color picker, hex code, or RGB sliders. | | **Error Properties** | Modify error text directly in the provided field, and changes will reflect on the mobile canvas. Error text will be displayed when conditions are not met in the text field, and those conditions will be set by Blup Logics. | | **Font Type** | Choose the preferred font type for selected text. | | **Font Style** | Select font styles from a dropdown menu. | | **Font Size** | Define the font size of the selected text. | | **Letter spacing** | Specify spacing between letters of the selected text. | | **Line Height** | Define the height between lines of text. | | **Max Line** | This property helps you to define the maximum number of lines the selected text can specify for example, if you define the value as 2 then the text can only take up 2 lines. | | **Font color** | Change the color of the text using color picker, hex code, or RGB sliders. | | **Text Padding** | Here you give the padding to your text inside the textfield according to your need. | | **Border when typing text** | Here you give the textfield border a color which will be refelect when user try to type something on that textfield. | | **Border when not focused** | Here you give the color to the textfield border when user does not select that textfield. | | **Input Type** | Define which value should be filled in that text field, such as number, email, URL, or anything else. | | **Password Field** | When checking this box, the text field will hide the input from the user. It is basically used for password inputs. | | **Ellipsis, on text overflow** | Show "..." if text overflows the specified max line limit. | | **Adjust With Keyboard** | When checking this box, it will adjust the keyboard according to the text fields. This allows the content to resize when the keyboard is displayed, ensuring that the TextField remains visible and is not covered by the keyboard. | | **Paragraph Editor** | When checking this box, it allows scrolling for longer paragraphs so that you can edit any paragraph easily. | | **Visible** | By checking the checkbox the entire Textifield widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Progress Widget Add and customize progress wheels in Blup to visually represent task completion and progress in your app. Progress widgets are used to display progress indicators that visually represent the progress of a task.
Progress Wheel

Progress Wheel

To utilize an Progress Wheel in your Flutter UI, adhere to these steps: **1.** Drag the Progress Wheel widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the Progress Wheel by adjusting its properties in the editing section on the right. ### Components of Progress Wheel Widget | Component | Description | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align Progress Wheel. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Progress Wheel. | | **Postitions** | Set Progress Wheel positions on the X and Y axis of the mobile canvas. | | **Margin** | Adjust the Progress Wheel margin from the top, bottom, left, or right by specifying margin values. | | **Progress Indicator color** | Set the color of the progress indicator according to your need. | | **Indicator backgroung color** | Give the indicator a background color. | | **Value** | Set the value to determine how much progress you want to show in the indicator. If you want the loading progress, set it to -1. | | **Stroke Width** | Define the width of the indicator's stroke according to your need. | | **Visible** | By checking the checkbox the entire selected Progress wheel will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # FAB Widget Implement floating action buttons in Blup to enhance user interactions and improve app accessibility.
FAB

FAB

To utilize an FAB(FloatingActionButton) in your UI, adhere to these steps: **1.** Drag the FAB widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the FAB by adjusting its properties in the editing section on the right. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ### Components of FAB Widget | Component | Description | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align FAB Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align FAB Widget. | | **Postitions** | Set FAB positions on the X and Y axis of the mobile canvas. | | **FAB Size** | Specify the width and height of the FAB widget by providing values for width (W) and height (H). | | **Z rotation** | Rotate the FAB by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the FAB widget from any of the four directions by specifying the margin value. | | **FAB Button Color** | This section will give FAB Button a selected color. | | **Splash Color** | This section will give FAB a splash color. Splash color is the color displayed when the FAB is tapped. | | **Hover Color** | This section will give FAB a hover color. The hover color is the color displayed when the mouse cursor hovers over the FAB. | | **Focus Color** | This section will give FAB a focus color. The focus color is the color displayed when the FAB receives focus, typically via keyboard navigation | | **Tooltip** | Give it a tooltip according to your usage. A tooltip provides a brief description or hint about the function of a widget when the user long-presses or hovers over it. | | **Padding** | Give the padding to the FAB widget from inside. | | **Elevation** | Give it a required Elevaition by entering a value. | | **Disabled Elevation** | Give it a required Disabled Elevaition by entering a value. | | **Focus Elevation** | Give it a required Focus Elevaition by entering a value. so that when user focus over it it will get elevated that much. | | **Hover Elevation** | Give it a required Hover Elevaition by entering a value. so that when user Hover over it it will get elevated that much. | | **Highlight Elevation** | Give it a required Highlight Elevaition by entering a value. when the FAB is highlighted it get the elevation. | | **Icon** | Select the Icon according to your need that you want to show on to you FAB widget. | | **Icon Color** | Change the icon color according to your need. | | **Icon Size** | Change the size of icon according to your need. | | **Visible** | By checking the checkbox the entire selected FAB Widget will be hidden. | ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Icon Widget Insert and customize icons in Blup to enhance your app's visual appeal and improve user experience.
Icons

Icons

To utilize an Icon in your UI, adhere to these steps: **1.** Drag the Icon widget from the Insert menu and drop it into your desired location within your UI. **2.** Select the Icon according to your need. **3.** Customize the appearance and behavior of the Icon by adjusting its properties in the editing section on the right. ### Components of Icon Widget | Component | Description | | --------------- | --------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align Icon. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Icon. | | **Postitions** | Set Icon positions on the X and Y axis of the mobile canvas. | | **Margin** | Adjust Icon margin from top, bottom, left, or right by specifying margin values. | | **Icon Edit** | Select the icon of your need from the pop up icons menu there you can get and coustomise icons also according to your need, | | **Icon color** | From here you can give icon a color according to your need. | | **Icon Size** | From here you can give icon size according to your need. | | **Visible** | By checking the checkbox the entire selected icon widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Lottie Animation Widget Integrate Lottie animations in Blup for engaging and interactive user experiences with seamless animations.
Lottie

Lottie

Integrating a Lottie animation into your UI is straightforward. Follow these steps to make it happen: **1.** Drag the Lottie widget from the Insert menu and drop it into your desired location within your UI. \*\*2.\*\*Provide the URL of the Lottie animation file in the URL section of the editing panel. This URL should point to the location of the Lottie animation file. **3.** Customize the appearance and behavior of the Lottie animation by adjusting its properties in the editing section on the right. You can modify properties such as size, position, Border to match your UI design and requirements. ### Components of Lottie Widget | Component | Description | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align Lottie Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Lottie Widget. | | **Postitions** | Set Lottie positions on the X and Y axis of the mobile canvas. | | **Lottie Size** | Specify the width and height of the Appbar widget by providing values for width (W) and height (H). | | **Z rotation** | Rotate the Lottie by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the Lottie from any of the four directions by specifying the margin value. | | **Lottie Properites** | Here you provide the Lottie files assets according to your need. | | **Repeat** | When checking the repeat option, it will keep on repeating the Lottie animation. | | **Reverse** | When checking the reverse option, it will reverse the animation. | | **Fill color** | By fill color, you can provide the background color to the Lottie widget. | | **Border Color** | Choose a color to set the widget border color. Adjust the border color from inside, outside, or center of the widget by selecting it from the drop-down. | | **Border Width** | Adjust the border width by providing a value. Select specific sides for border width by clicking the checkboxes. | | **Shadow** | Apply a shadow effect to the widget by selecting either a normal or inner shadow type. | | **Visible** | By checking the checkbox the entire selected Lottie widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Text Button Widget Add customizable text buttons in Blup for effective user interactions and navigation within your application. TextButton widget is used to create a text-based button that responds to user taps. It provides a simple, flat button style with text and optional icons.
Text Button

Text Button

To integrate a TextButton Widget into your UI, follow these steps: **1.** Drag the TextButton widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the TextButton by adjusting its properties in the editing section on the right. You can modify properties such as text, style, color, and onPressed callback to define its appearance and behavior. **3.** Also you can give Ellipsis on over flow of the text, or can add selectable text. ### Components of Text Button Widget | Component | Description | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align Text Button. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Text Button. | | **Postitions** | Set Text Button positions on the X-Position and Y-Position of the mobile canvas. | | **Margin** | Adjust Text Button margin from top, bottom, left, or right by specifying margin values. | | **Text Button property** | Modify text directly in the provided field, and changes will reflect on the mobile canvas. | | **Font Type** | Choose the preferred font type for selected text on Text Button. | | **Font Style** | Select font styles from a dropdown menu. | | **Font Size** | Define the font size of the selected text. | | **Letter spacing** | Specify spacing between letters of the selected text. | | **Line Height** | Define the height between lines of text. | | **Left Align** | This option aligns the text from the left. | | **Centre Align** | This option aligns the text to the centre. | | **Right Align** | This option aligns the text to the right. | | **Text Size Adjustment** | Choose between Auto Width, Auto Height, or Fixed Size to adjust the dimensions of the text. | | **Max Line** | Define the maximum number of lines the selected text can take up. for example, if you define the value as 2 then the text can only take up 2 lines. | | **Font color** | Change the color of the text using color picker, hex code, or RGB sliders. | | **Fill color** | Change the color of the text button using color picker, hex code, or RGB sliders. | | **Border Color** | Choose a color to set the container's border color. Adjust the border color from inside, outside, or center of the container by selecting it from the drop-down. | | **Border Width** | Adjust the border width by providing a value. Select specific sides for border width by clicking the checkboxes. | | **Ellipsis, on text overflow** | Show "..." if text overflows the specified max line limit. | | **Selectable Text** | Allow users to select text for toolbar operations by checking this field. | | **Visible** | By checking the checkbox, the entire selected Textbutton widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Appbar Widget Create intuitive navigation bars using the AppBar widget in Blup to enhance your app's user interface. AppBar widget is a fundamental component used to create the top app bar, which typically contains the application's title, navigation icons, action buttons, and other relevant information.
App Bar

App Bar

To utilize an AppBar in your UI, adhere to these steps: **1.** Drag the AppBar widget from the Insert menu and drop it into top of the desired Page. **2.** Customize the appearance and behavior of the AppBar by adjusting its properties in the editing section on the right. **3.** Enhance the AppBar by adding different icons to make your header more visually appealing. ### Components of AppBar Widget | Component | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Align Icons** | Click icons or use shortcut keys to align AppBar Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align AppBar Widget. | | **Postitions** | Set AppBar positions on the X and Y axes of the mobile canvas. | | **Appbar Size** | Specify the width and height of the Appbar widget by providing values for width (W) and height (H). | | **Z rotation** | Rotate the AppBar by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the Appbar from any of the four directions by specifying the margin value. | | **Color** | This section will give Appbar a selected color. | | **Shadow Color** | This section will give Appbar a shadow color. | | **Elevation** | Specify the elevation that you want to give to the AppBar. | | **Title** | Specify the title of the AppBar if you want to make the title centre, or specify the spacing by giving the value. | | **Toolbar** | Specify the height of the toolbar and opacity by give the value to it. | | **Text property** | Modify AppBar text directly in the provided field, and changes will reflect on the mobile canvas. | | **Font Type** | Choose the preferred font type for selected AppBar text. | | **Font Style** | Select font styles from a dropdown menu. | | **Font Size** | Define the font size of the selected AppBar text. | | **Letter spacing** | Specify spacing between letters of the selected AppBar text. | | **Line Height** | Define the height between lines of AppBar text. | | **Left Align** | This option aligns the AppBar text from the left. | | **Centre Align** | This option aligns the AppBar text to the centre. | | **Right Align** | This option aligns the AppBar text to the right. | | **Auto Width** | The width of the text will be adjusted automatically depending on the size of the container housing the selected AppBar text. | | **Auto heiight** | The height of the text will be adjusted automatically depending on the size of the container housing the selected AppBar text. | | **Fixed size** | The dimensions of the text will remain fixed regardless of the size of the container housing the selected AppBar text. | | **Max Line** | This property helps you to define the maximum number of lines the selected text can specify for example, if you define the value as 2 then the AppBar text can only take up 2 lines. | | **Font color** | Change the color of the text using color picker, hex code, or RGB sliders. | | **Ellipsis, on text overflow** | Show "..." if AppBar text overflows the specified max line limit. | | **Selectable Text** | Allow users to select AppBar text for toolbar operations by checking this field. | | **Visible** | By checking the checkbox the entire selected list will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Checkbox Widget Incorporate checkboxes in Blup to allow users to make selections and set preferences within your app. Checkbox widget is used to represent a toggleable option with two states: checked and unchecked. Users can tap the checkbox to toggle its state.
Check Box

Check Box

To utilize an CheckBox in your UI, adhere to these steps: **1.** Drag the CheckBox widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the CheckBox by adjusting its properties in the editing section on the right. ### Components of CheckBox Widget | Component | Description | | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align CheckBox Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align CheckBox Widget. | | **Postitions** | Set CheckBox Widget positions on the X and Y axis of the mobile canvas. | | **CheckBox Widget Size** | Specify the width and height of the CheckBox by providing values for width (w) and height (h). | | **Z rotation** | Rotate the CheckBox Widget by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the CheckBox Widget from any of the four directions by specifying the margin value. | | **Checkbox Value** | On selecting the value you get the tick and on unselecting it will remove the tick. | | **Checkbox Tristate** | On UnSelecting tristate meaning the checkbox can only be checked or unchecked. However, when checking the tristate, it enables the third state, where the checkbox can be in an indeterminate state. | | **Icon Color** | Select the color of the icon that you want to put in check. | | **Active Color** | It will give checkbox the color according to your need. | | **Focus Color** | It will represents the color that is displayed when a widget gains focus | | **Hover Color** | It will represent the color that is displayed when a widget is hovered over by the cursor. | | **Visible** | By checking the checkbox the entire selected checkbox widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Switch Widget Implement toggle switches in Blup for users to easily switch settings and features within your application. Switch widget is used to create a toggle switch that allows users to toggle between two states: on and off. It's commonly used to represent binary options such as enabling/disabling a feature or setting.
Switch

Switch

To integrate a Switch Widget into your UI, follow these steps: **1.** Drag the Switch widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the Switch by adjusting its properties in the editing section on the right. You can modify properties such as color, size, and shape to match your UI design. Change the color according to your needs by adjusting the activeColor and inactiveTrackColor properties. ### Components of Switch Widget | Component | Description | | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align Switch Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Switch Widget. | | **Postitions** | Set Switch Widget positions on the X and Y axis of the mobile canvas. | | **Margin** | Adjust Switch Widget margin from top, bottom, left, or right by specifying margin values. | | **Swtich value** | Make the Switch on and off by marking the checkbox. | | **Thumb Color** | It will give color to the round thumb inside the Switch Widget. | | **Focus Color** | Give it a color according to your need when switch is Focused | | **Hover Color** | Give it a color according to your need when the user hovers a cursor on the Switch; it will change color. | | **Active Color** | This will give the color to your track of Switch when it is active. | | **Inactive Track Color** | This will give the color to your track of Switch when it is inactive. | | **Inactive Thumb Color** | This will give the color to your thumb of Switch when it is inactive. | | **Visible** | By checking the checkbox the entire selected Switch widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Slider Widget Add sliders in Blup to enable users to select values within a specified range for various app features. Slider widget is used to allow users to select a value from a range by dragging a thumb along a track. It's commonly used for selecting a value within a range, such as volume control or brightness adjustment.
Slider

Slider

To utilize an Slider in your Flutter UI, adhere to these steps: **1.** Drag the Slider widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the Slider by adjusting its properties in the editing section on the right. ### Components of Progress Slider Widget | Component | Description | | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align Slider Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Slider Widget. | | **Postitions** | Set Slider Widget positions on the X and Y axis of the mobile canvas. | | **Margin** | Adjust Slider Widget margin from top, bottom, left, or right by specifying margin values. | | **Slider value** | Set the slider value to determine the range shown in the slider according to your needs. | | **Label** | Assign a label text to the slider according to your needs. | | **Min & Max** | Set the minimum and maximum range in the slider to represent your data progress. | | **Divisions** | Set the number of divisions you want to show in your slider. | | **Slider Color** | This will give the color to your slider according to your needs. | | **Slider Background Color** | This will give the background color to your slider according to your needs. | | **Visible** | By checking the checkbox, the entire selected slider widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Radio Widget Use radio buttons in Blup for single-choice selections, enhancing forms and surveys in your application. Radio widget is used to create radio buttons, which allow users to select one option from a set of mutually exclusive options. Radio buttons are typically used when there are a limited number of choices and only one selection is allowed at a time.
Radio Button

Radio Button

To utilize an Radio Widget in your Flutter UI, adhere to these steps: **1.** Drag the Radio widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the Radio Widget by adjusting its properties in the editing section on the right. You can modify properties such as color, size, and shape to match your UI design. **3.** Implement logic to dynamically control the value of the Radio widget. You can achieve this by binding the value property of the Radio widget to a boolean variable in your code. Based on user interactions or application state changes, update the boolean variable to true or false accordingly. This will dynamically reflect the selected state of the Radio widget. ### Components of Radio Widget | Component | Description | | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align Radio Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Radio Widget. | | **Postitions** | Set Radio Widget positions on the X and Y axis of the mobile canvas. | | **Radio Widget Size** | Specify the width and height of the CheckBox by providing values for width (w) and height (h). | | **Z rotation** | Rotate the Radio Widget by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the Radio Widget from any of the four directions by specifying the margin value. | | **Radio Value** | Set the value to true to mark the radio widget, and false to unmark it. | | **Radio Group Value** | Here you can track the radio value when it is in group. | | **Toggleable** | When checked, combines a Radio with text. | | **Appearance** | Give the radio widget a color according to your needs. | | **Focus Color** | Represents the color displayed when a widget gains focus. | | **Hover Color** | Represents the color displayed when a widget is hovered over by the cursor. | | **Visible** | By checking the checkbox, the entire selected radio widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Progress bar Widget Customize progress bars in Blup to visually display task completion and progress to your users. Progress bar widget to create a progress bar, which visually represents the progress of a task with a horizontal bar.
Progress Bar

Progress Bar

Integrating a Progress Bar into your UI is essential for indicating progress or loading states to the user. Follow these steps to utilize it effectively: **1.** Drag the Alert Progress bar widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the Progress Bar by adjusting its properties in the editing section on the right. You can modify properties such as size, position, color, and style to match your UI design and convey the desired visual representation of progress. **3.** Use the Progress Bar to display progress or loading status to the user. You can update the progress value dynamically based on the progress of a task or operation in your application. ### Components of Progress bar Widget | Component | Description | | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align Progress bar Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Progress bar Widget. | | **Postitions** | Set Progress bar Widget positions on the X and Y axis of the mobile canvas. | | **Margin** | Adjust the Progress Bar Widget margin from the top, bottom, left, or right by specifying margin values. | | **Progress bar value** | Set the Progress Bar value to determine the range shown in the Progress Bar according to your needs. If you want to show it as a loading indicator, use the value -1. | | **Progress bar Color** | This will give the color to your Progress Bar according to your need. | | **Progress bar Background Color** | This will give the background color to your Progress Bar according to your need. | | **Visible** | By checking the checkbox the entire selected Progress bar widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Multi choice dialog Widget Enable multiple-choice selections in Blup with this versatile widget for enhanced user input options. A multi-choice widget allows users to select multiple options from a list. It enhances user interaction by providing flexibility and efficiency in data input.
Multi Choice

Multi Choice

Integrating a Multi Choice Dialog into your UI provides users with a convenient way to select multiple options. Follow these steps to utilize it effectively: **1.** Drag the Multi Choice dialog widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the Multi Choice Dialog by adjusting its properties in the editing section on the right. **3.** Enable users to select multiple options from the dialog box. You can specify the options available for selection and handle the selected options accordingly in your code. ### Components of Multi-Choice Dialog Widget | Component | Description | | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align Multi Choice Dialog Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Multi Choice Dialog Widget. | | **Postitions** | Set Multi Choice Dialog Widget positions on the X and Y axis of the mobile canvas. | | **Multi-Choice Dialog Widget Size** | Specify the width and height of the Multi Choice Dialog Widget by providing values for width (w) and height (h). | | **Z rotation** | Rotate the Multi Choice Dialog Widget by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the Multi-Choice Dialog Widget from any of the four directions by specifying the margin value. | | **Preview** | Clicking on preview allows you to see the preview of the Multi-Choice Dialog Box. | | **Title** | Set the title of the Multi-Choice Dialog widget from inside. | | **Confirm Text** | Enter your own confirmation text here when the user confirms the selected item. | | **Cencel Text** | Provide the cancel text here for closing the dialog box. | | **Item Selection** | When the user checks the box of "is only one selection allowed," then the user can select only one item from the dialog box. | | **Fill** | Give the Multi-Choice Dialog widget a color of your choice. | | **Border Color** | Choose a color to set the Dialog widget border color. Adjust the border color from inside, outside, or center of the Dialog widget by selecting it from the drop-down. | | **Shadow** | Apply a shadow effect to the Dialog by selecting either a normal or inner shadow type. | | **Visible** | By checking the checkbox, the entire selected Multi-Choice Dialog widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Web View Widget Embed web content seamlessly within your Blup application using the Web View widget.
WebView

WebView

To integrate a WebView into your UI, follow these steps: **1.** Drag the Web View widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the Web View by adjusting its properties in the editing section on the right. **3.** Provide the URL of the web page you want to display in the WebView by setting the initialUrl property in the editing panel. ### Components of WebView Widget | Component | Description | | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align the WebView Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align WebView Widget. | | **Postitions** | Set WebView Widget positions on the X and Y axes of the mobile canvas. | | **WebView Widget Size** | Specify the width and height of the WebView Widget by providing values for width (w) and height (h). | | **Z rotation** | Rotate the WebView Widget by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the WebView Widget from any of the four directions by specifying the margin value. | | **Web view link** | Give it a custom Url for the webview. | | **Visible** | By checking the checkbox the entire WebView will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Camera View Widget Integrate camera functionalities in Blup to capture photos and videos directly within your app.
Camera View

Camera View

To utilize an Camera View in your UI, adhere to these steps: **1.** Drag the Camera View widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the Camera view by adjusting its properties in the editing section on the right. **3.** Enhance the Camera View by adding additional features such as zoom in, zoom out, recent files, and camera direction controls. These features can be implemented using single tick. ### Components of Camera View Widget | Component | Description | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Align Icons** | Click icons or use shortcut keys to align Camera View Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Camera View Widget. | | **Postitions** | Set Camera View Widget positions on the X and Y axis of the mobile canvas. | | **Camera View Widget Size** | Define the width and height of the Camera View Widget by providing values for width (w) and height (h). | | **Z rotation** | Rotate the Camera View Widget by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the Camera View Widget from any of the four directions by specifying the margin value. | | **Camera type** | Specify whether the camera should be used for photos, videos, or both. | | **Camera Direction** | Specify the direction of the camera: front, back, or external. | | **Camera Checkbox** | Check the checkboxes according to your requirements. For example, enable zoom in/out, select recent files, or show camera direction selector. | | **Colors** | Specify the color of the camera by selecting it from the toottip or by giving hex color code. | | **Icons Color** | Specify the colors of the icons according to your need. | | **Text Color** | Specify the color of the text in the camera. | | **Selected Text Color** | Specify the text color on selected text. | | **Video Record Color** | Give the color of the icon of record when recording a video according to your need. | | **Visible** | By checking the checkbox the entire selected list will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Map View Widget Add interactive maps to your Blup application to provide location-based features and services.
Map View

Map View

Integrating a MapView into your UI is a great way to add interactive maps to your application. Follow these steps to utilize it effectively: **1.** Drag the MapView widget from the Insert menu and drop it into your desired location within your UI. **2.** Obtain a Map API key from the Google Maps API and add it to the edit section. This key is necessary for accessing Google Maps services. **3.** Customize the appearance and behavior of the MapView by adjusting its properties in the editing section on the right. You can enable functionalities such as zoom in, zoom out, and zoom gestures to enhance user interaction with the map. ### Components of MapView Widget | Component | Description | | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align MapView Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align MapView Widget. | | **Postitions** | Set MapView positions on the X and Y axis of the mobile canvas. | | **Container Size** | Specify the width and height of the MapView widget by providing values for width (W) and height (H). | | **Z rotation** | Rotate the MapView Widget by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the MapView Widget from any of the four directions by specifying the margin value. | | **Initial Location** | Provide the initial coordinates of the X-axis and Y-axis so when the map loads it shows that location at the starting. | | **Google Map Properties** | Add the key that you get from Google Maps here. | | **Map Type** | Specify which type of map you want to show from the drop-down i.e. Normal, Satellite, Terrain, and Hybrid. | | **Zoom** | Specify the zoom level you want to provide to the map when it loads. | | **Zoom Controls and Zoom Gestures Enabled** | By checking Zoom Controls Enabled, you can allow the user to enable zoom functionality, and by checking Zoom Gestures, it will enable gestures on the map for shifting by hand gestures. | | **Visible** | By checking the checkbox the entire selected MapView Widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Date Picker Widget Implement date pickers in Blup for users to easily select dates within your application's forms. DatePicker Widget from the Insert is used to display a date picker dialog. This allows users to select a date from a calendar-style interface.
Date Picker

Date Picker

Integrating a DatePicker widget into your UI is simple. Follow these steps to make it happen: **1.** Drag the DatePicker widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the Alert dialog by adjusting its properties in the editing section on the right. **3.** Additionally, you can enhance the DatePicker by specifying properties such as initial date, minimum date, and maximum date. These properties allow you to control the range of dates available for selection and set a default date. ### Components of DatePicker Widget | Component | Description | | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align DatePicker Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align DatePicker Widget. | | **Postitions** | Set DatePicker Widget positions on the X and Y axis of the mobile canvas. | | **DatePicker Widget Size** | Specify the width and height of the DatePicker Widget by providing values for width (w) and height (h). | | **Z rotation** | Rotate the DatePicker Widget by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the DatePicker Widget from any of the four directions by specifying the margin value. | | **DatePicker Show Preview** | Clicking on it will display the view of the date picker. | | **Initial Date** | Set the initial date for the date picker. | | **First Date** | Specify the starting date for the calendar, defining the range of selectable dates. | | **Last Date** | Specify the ending date for the calendar, defining the range of selectable dates. | | **Fill** | It apply the date picker a color from inside. | | **Border Color** | Choose a color to set the border color of the DatePicker. Adjust the border color from inside, outside, or center of the DatePicker by selecting it from the drop-down. | | **Shadow** | Apply a shadow effect to the DatePicker by selecting either a normal or inner shadow type. | | **Visible** | By checking the checkbox the entire DatePicker will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Time Picker Widget Add time pickers in Blup to allow users to select specific times within your application.
TimePicker

TimePicker

To utilize an Time Picker in your Flutter UI, adhere to these steps: **1.** Drag the Time Picker widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the Time Picker by adjusting its properties in the editing section on the right. ### Components of TimePicker Widget | Component | Description | | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align the TimePicker Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align TimePicker Widget. | | **Postitions** | Set TimePicker Widget positions on the X and Y axis of the mobile canvas. | | **Margin** | Adjust TimePicker Widget margin from top, bottom, left, or right by specifying margin values. | | **TimePicker Show** | Show the preview of the clock for selecting the time. | | **TimePicker Initial Time** | Set the time that you want to show initially. | | **Fill color** | Give color to the TimePicker widget. | | **Border Color** | Choose a color to set the widget border color. Adjust the border color from inside, outside, or center of the widget by selecting it from the drop-down. | | **Border Width** | Adjust the border width by providing a value. Select specific sides for border width by clicking the checkboxes. | | **Shadow** | Apply a shadow effect to the widget by selecting either a normal or inner shadow type. | | **Visible** | By checking the checkbox the entire selected TimePicker Widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # IOS Date Picker Widget Customize iOS-style date pickers in Blup to provide a native and familiar user experience.
IOS DatePicker

IOS DatePicker

Integrating an iOS-style DatePicker widget into your UI is simple. Follow these steps to make it happen: **1.** Drag the IOS DatePicker widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the IOS DatePicker by adjusting its properties in the editing section on the right. **3.** Additionally, you can select the mode and theme type of the DatePicker. The mode determines whether the DatePicker displays dates, times, or both, while the theme type controls the visual style of the DatePicker. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ### Components of IOS DatePicker Widget | Component | Description | | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align IOS DatePicker Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align DatePicker Widget. | | **Postitions** | Set IOS DatePicker Widget positions on the X and Y axis of the mobile canvas. | | **IOS DatePicker Widget Size** | Specify the width and height of the IOS DatePicker Widget by providing values for width (w) and height (h). | | **Z rotation** | Rotate the IOS DatePicker Widget by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the IOS DatePicker Widget from any of the four directions by specifying the margin value. | | **DatePicker-IOS format** | Check the box to allow your widget to use 24-hour format. | | **Mode** | Select the mode for your date-picker: date only, time only, or both. | | **Theme Type** | Choose a theme to make your date-picker lighter or darker. | | **Fill** | It give the date picker a color from inside. | | **Border Color** | Choose a color to set the border color of the DatePicker. Adjust the border color from inside, outside, or center of the DatePicker by selecting it from the drop-down. | | **Shadow** | Apply a shadow effect to the DatePicker by selecting either a normal or inner shadow type. | | **Visible** | By checking the checkbox the entire IOS DatePicker will be hidden. | ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # IOS Timer Widget Implement iOS-style timers in Blup for countdowns and timing features in your application.
IOS Timer

IOS Timer

Integrating an iOS-style Timer widget into your UI is simple. Follow these steps to make it happen: **1.** Drag the IOS Timer widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the IOS Timer by adjusting its properties in the editing section on the right. **3.** Additionally, you can select the mode and theme type of the Timer. The mode determines whether the Timer displays HoursMinutes, MinutesSeconds or HourMinuteSecond, while the theme type controls the visual style of the Timer. ### Components of IOS Timer Widget | Component | Description | | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align Timer Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Timer Widget. | | **Postitions** | Set Timer Widget positions on the X and Y axis of the mobile canvas. | | **Timer Widget Size** | Specify the width and height of the Timer Widget by providing values for width (w) and height (h). | | **Z rotation** | Rotate the Timer Widget by specifying a rotation value. | | **Border Radius** | Adjust corner curvature to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the Timer Widget from any of the four directions by specifying the margin value. | | **Time picker IOS Mode** | Select the mode of the timer in which you want to show the Timer widget: Hm (HourMinute), Ms (MinuteSecond), or both. | | **Theme type** | Choose between light or dark theme for your Timer widget. | | **Fill** | Apply a color to the Timer widget. | | **Border Color** | Choose a color to set the border color of the Timer widget. Adjust the border color from inside, outside, or center of the Timer widget by selecting it from the drop-down. | | **Shadow** | Apply a shadow effect to the Timer by selecting either a normal or inner shadow type. | | **Visible** | By checking the checkbox the entire Timer widget will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Alert Dialog box Widget Add alert dialog boxes in Blup to notify and prompt users with important messages. Alert dialog pops up on the screen to provide important information or to prompt the user for a decision. Alert dialogs are commonly used to display critical messages, warnings, or to confirm an action from the user. Here, By incorporating an alert dialog widget within your application, you can seamlessly integrate prompts or warnings to engage users and guide their interactions.
Alert Dialog

Alert Dialog

To utilize an Alert Dialog in your UI, adhere to these steps: **1.** Drag the Alert dialog widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the Alert dialog by adjusting its properties in the editing section on the right. **3.** Preview the Alert dialog by checking the Dialog box in the preview section to ensure it appears as expected in your UI. ### Components of Alert Dialog Widget | Component | Description | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align Alert Dialog. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Alert Dialog. | | **Postitions** | Set Alert-Dialog box positions on the X and Y axis of the mobile canvas. | | **Container Size** | Specify the width and height of the Dialog box by providing values for width (w) and height (h). | | **Z rotation** | Rotate the Dialog box by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the text from any of the four directions by specifying the margin value. | | **Show Preview** | It will show the preview of the dialog box. | | **Fill** | This section will give dialog box a decoration. | | **Elevation** | Specify the elevation that you want to give to the dialog box. | | **Title** | Specify the title of the Alert dialog box | | **Content** | Specify the content inside the dialog box that you want to show. | | **Cancel Text** | Provide the cancel text for canceling the Alert dialog box. If you don't want to show the cancel text then you hide it by checking the checkbox Is show Cancel text. | | **Ok Text** | Provide the Ok text of the Alert dialog box for confirming it. | | **Fill** | Specify the color of the box from here either by picking or giving the hex code of the color. | | **Border Color** | Choose a color to set the dialog box border color. Adjust the border color from inside, outside, or center of the dialog box by selecting it from the drop-down. | | **Border Width** | Adjust the border width by providing a value. Select specific sides for border width by clicking the checkboxes. | | **Shadow** | Apply a shadow effect to the container by selecting either a normal or inner shadow type. | | **Visible** | By checking the checkbox the entire selected list will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Dropdown Menu Widget Use dropdown menus in Blup for selection lists, enhancing the user input experience in your app. Dropdown widget is used to display a dropdown menu with a list of selectable options. Users can choose one option from the list by tapping on the dropdown button, and the selected option is displayed as the current value of the dropdown.
Drop Down

Drop Down

Integrating a DropDown Menu widget into your UI is straightforward. Follow these steps to make it happen: **1.** Drag the DropDown widget from the Insert menu and drop it into your desired location within your UI. **2.** Customize the appearance and behavior of the DropDown dialog by adjusting its properties in the editing section on the right. **3.** Populate the DropDown Menu with the list of data from the edit section that you want to show. You can provide a list of items to be displayed in the menu, and users can select an item from the list. ### Components of DropDown Menu Widget | Component | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Align Icons** | Click icons or use shortcut keys to align DropDown Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align DropDown Widget. | | **Postitions** | Set DropDown Widget positions on the X and Y axis of the mobile canvas. | | **DropDown Menu Widget Size** | Specify the width and height of the DropDown Menu Widget by providing values for width (w) and height (h). | | **Z rotation** | Rotate the DropDown Widget by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the DropDown Menu Widget from any of the four directions by specifying the margin value. | | **DropDown Menu show preview** | On clicking on it you will get the view of the dropdown menu. | | **Value** | On giving the value it will corresponds to the currently selected value in the dropdown menu. | | **List of values** | Here you will specify the options that you want to show in the drop down menu. | | **Border Radius** | When giving the border radius it will be displayed in the dropdown menu. | | **Elevation** | Adjust the elevation of drop down menu by passing the value in it. | | **Text style** | Choose the preferred font type for selected text. | | **Font Style** | Select font styles from a dropdown menu. | | **Font Size** | Define the font size of the selected text. | | **Letter spacing** | Specify spacing between letters of the selected text. | | **Line Height** | Define the height between lines of text. | | **DropDown Icon Properties** | Change the icon color according to the need. | | **DropDown Icon Size** | Change the size of the icon according to the need. | | **Hint Properties** | It will give the drop down menu a hint text. | | **Font Style** | Select hint text a font styles from a dropdown menu. | | **Font Size** | Define the hint text a font size of the selected text. | | **Letter spacing** | Specify spacing between letters of the selected text. | | **Line Height** | Define the height between lines of text. | | **Hint Color** | It will give color to your hint text. | | **Fill** | It will give color to your drop down menu. | | **Border Color** | Choose a color to set the Dropdown menu border color. Adjust the border color from inside, outside, or center of the container by selecting it from the drop down. | | **Border Width** | Adjust the border width by providing a value. Select specific sides for border width by clicking the checkboxes. | | **Visible** | By checking the checkbox the entire Dropdown menu will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Properties Panel Right Hand Side Panel Of Blup ## Properties Panel The properties panel enables the users to change the various properties associated with the selected widget in Blup Designer. Advanced properties like elevation, shadow, color, etc. can easily be altered using the Properties panel. The properties displayed in the panel at any given time is dependent on the selected widget and can change according to the type of widget selected. Now, let's go over the properties of each type of widget. | | | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Pages Properties](/wiki/design-ui/properties-panel/pages-properties) | [Text Properties](/wiki/design-ui/properties-panel/text-properties) | | In Blup, the Pages Properties section within the Properties Panel allows for comprehensive customization of page attributes. Users can adjust settings such as page dimensions, orientation (portrait or landscape), and background color or image. This panel is essential for configuring the foundational aspects of each screen in your application, ensuring consistency and user-friendly navigation. | Text Properties within the Properties Panel enable users to tailor text elements to fit specific design requirements. This includes selecting font families, adjusting font size and weight, setting text color, alignment (left, center, right), and applying styles such as bold, italic, or underline. These options ensure that text within your application is not only readable but also visually cohesive with the overall design. | | [List Properties](/wiki/design-ui/properties-panel/list-properties) | [Rectangle Properties](/wiki/design-ui/properties-panel/rectangle-properties) | | For applications requiring organized data display, the List Properties section in the Properties Panel offers vital customization capabilities. Users can define the layout and style of list items, including spacing between items (padding), margins around the list (margin), and the appearance of separators between items. These properties help maintain clarity and usability within list-based interfaces. | Rectangles serve as fundamental building blocks in UI design, and the Rectangle Properties section in the Properties Panel provides essential controls for their appearance. Users can adjust dimensions (width and height), position (X and Y coordinates), corner radius for rounded edges, background color or image, border properties (width, color), and apply effects such as elevation and shadows. | | | | ### **Advanced Customization in the Properties Panel** Blup’s Properties Panel provides advanced customization options, enhancing the visual and interactive aspects of your widgets beyond basic properties. * **Elevation and Shadow** Adjust depth and shadow intensity for widgets to add visual hierarchy, creating a more immersive and intuitive interface. * **Color Customization** Use a color picker or hex codes to control colors precisely. Maintain consistency with your brand or design theme across all elements. * **Dynamic State Management** Define how widgets react to user interactions like hover effects or state changes. This boosts interactivity and user engagement. * **Animation Settings** Implement entrance and exit animations to offer visual feedback, enhancing user experience. Smooth transitions make your application more appealing and usable. ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Pages Properties Customize page properties in Blup to enhance the functionality and design of your app's pages.
Page UI

Page UI

## Background colour The background color of the entire page can be altered. You can pick a colour by using the eyedropper, entering the hex code or from the manually adjusting the RGB scroller and selecting the appropriate saturation and lighting. ## Grid You can view the selected page in the grid format of your choice using this option. This enables the user to position the widgets more efficiently. # Text Properties Adjust text properties in Blup for better readability and visual appeal within your application.
Text UI

Text UI

### Components of Text UI | Component | Description | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align text. For example, click "Align Left" or use Ctrl+Shift+Left to left-align text. | | **Postitions** | Set Text positions on the X and Y axis of the mobile canvas. | | **Margin** | Adjust text margin from top, bottom, left, or right by specifying margin values. | | **Text property** | Modify text directly in the provided field, and changes will reflect on the mobile canvas. | | **Font Type** | Choose the preferred font type for selected text. | | **Font Style** | Select font styles from a dropdown menu. | | **Font Size** | Define the font size of the selected text. | | **Letter spacing** | Specify spacing between letters of the selected text. | | **Line Height** | Define the height between lines of text. | | **Left Align** | This option aligns the text from the left. | | **Centre Align** | This option aligns the text to the centre. | | **Right Align** | This option aligns the text to the right. | | **Auto Width** | The width of the text will be adjusted automatically depending on the size of the container housing the selected text. | | **Auto height** | The height of the text will be adjusted automatically depending on the size of the container housing the selected text. | | **Fixed size** | The dimensions of the text will remain fixed regardless of the size of the container housing the selected text. | | **Max Line** | This property helps you to define the maximum number of lines the selected text can specify. For example, if you define the value as 2, then the text can only take up 2 lines. | | **Font color** | Change the color of the text using the color picker, hex code, or RGB sliders. | | **Ellipsis, on text overflow** | Show "..." if text overflows the specified max line limit. | | **Selectable Text** | Allow users to select text for toolbar operations by checking this field. | | **Visible** | By checking the checkbox the entire selected list will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # List Properties Manage list properties in Blup to display data effectively within your app's user interface.
List UI

List UI

| Component | Description | | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align text. For example, click "Align Left" or use Ctrl+Shift+Left to left-align text. | | **Postitions** | Set List positions on the X and Y axis of the mobile canvas. | | **List Size** | Specify the width and height of the List by providing values for width (W) and height (H). | | **Margin** | Provide margin to the List view from any of the four directions by specifying the margin value. | | **List Type** | Select the layout of the list: simple list, wheel list, or one item list. | | **Scroll Physics** | Adjust the scrollable effect: always scrollable, bouncing, clamping, or never scrollable scroll physics. | | **Internal Scroll Margin** | Adjust the margin of the list from inside. Provide a fixed margin for all sides or set individual margins by clicking on the icon. | | **Space Between Items** | Adjust the spacing between the items inside the list. Set item spacing to adjust space between items or grid space for equal horizontal and vertical spacing between items. | | **Visible** | By checking the checkbox the entire selected list will be hidden. | | **Horizontal Scroll** | Check the checkbox to hide horizontal scroll and show only one item. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Rectangle Properties Customize rectangle properties in Blup to suit your design needs and improve app aesthetics.
Rectangle UI

Rectangle UI

### Components of Text UI | Component | Description | | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Align Icons** | Click icons or use shortcut keys to align text. For example, click "Align Left" or use Ctrl+Shift+Left to left-align text. | | **Positions** | Set Container positions on the X and Y axis of the mobile canvas. | | **Container Size** | Specify the width and height of the container by providing values for width (w) and height (h). | | **Z rotation** | Rotate the container by specifying a rotation value. | | **Border Radius** | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. | | **Margin** | Provide margin to the container from any of the four directions by specifying the margin value. | | **Fill Color** | Choose a color to fill the container's interior. | | **Border Color** | Choose a color to set the container's border color. Adjust the border color from inside, outside, or center of the container by selecting it from the drop down. | | **Border Width** | Adjust the border width by providing a value. Select specific sides for border width by clicking the checkboxes. | | **Shadow** | Apply a shadow effect to the container by selecting either a normal or inner shadow type. | | **Visible** | By checking the checkbox the entire selected list will be hidden. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Page Canvas Design your app's layout effectively using the Page Canvas tool in Blup for a better user experience. Page Canvas serves as a digital workspace for designing your app's interface. It provides a clear visual representation of your screens, allowing for easy arrangement and adjustment of elements. ### Key Features of Page Canvas * **Drag-and-Drop Interface:** Easily place and rearrange UI elements with an intuitive drag-and-drop interface. This flexibility supports quick adjustments and layout experimentation. * **Grid System:** Align elements precisely using the built-in grid system. Grids ensure consistent spacing and alignment across screens, enhancing the overall visual appeal. * **Layers Management:** Organize elements hierarchically with effective layer management. Control visibility and stacking order to manage complex designs seamlessly. * **Responsive Design:** Design interfaces that adapt to different screen sizes and orientations. Page Canvas supports responsive design principles, allowing you to preview layouts across devices within Blup. * **Interactive Prototyping:** Prototype user interactions directly on the canvas to simulate app functionality early in the design phase. This feature aids in gathering feedback and refining user flows efficiently. ### Best Practices for Using Page Canvas * **Plan Your Layout:** Sketch out your app's structure and navigation flow beforehand to streamline design on Page Canvas. * **Utilize Components:** Leverage Blup's library of pre-built components and widgets to save time designing common UI elements. * **Iterate and Test:** Continuously iterate based on user feedback and testing. Page Canvas facilitates rapid prototyping and agile development practices. * **Optimize for Performance:** Consider performance implications, especially for complex layouts. Page Canvas allows for optimizing designs for speed and efficiency. ### **Integrating with Other Blup Features** * **Design Consistency**: Seamlessly integrate designs created on Page Canvas with other Blup features such as widget libraries, logic nodes, and data management tools. * **Collaboration**: Collaborate with team members by sharing designs directly from Page Canvas. Real-time collaboration features ensure all stakeholders are aligned throughout the design and development phases * **Design Consistency**: Seamlessly integrate designs created on Page Canvas with other Blup features such as widget libraries, logic nodes, and data management tools. * **Collaboration**: Collaborate with team members by sharing designs directly from Page Canvas. Real-time collaboration features ensure all stakeholders are aligned throughout the design and development phases. Start using Page Canvas today to bring your app design ideas to life with clarity and efficiency. # Choose from Assets Select and use assets from your library in Blup to enrich your app's content and design. Blup's robust asset management system makes it simple to select and apply images from your project assets to enhance the visual appeal of your app. Follow these steps to seamlessly integrate images into your components: ### How to select images from project assets 1. **Select the Component:**\ Start by selecting the component in your project where you want to apply an image. This could be a button, background, or any other element that supports image filling. 2. **Open the Fill Property:**\ Click on the **Fill** property to open the color picker and, select an image from the top of the color picker. 3. **Choose From Assets:**\ When you click the Choose From Assets button, you can access the Assets widget, which displays all previously added images for a quick overview of available assets. 4. **Browse the Assets:**\ Browse through the list of assets, and when you find the desired image, click on it to select. The selected image will be applied to the selected component in your project.
Choose from assets

Choose from assets

{% hint style="info" %} Ensure that you have added images to your project by importing from Figma or selecting images. Once your images are added, click the "Choose From Assets" button. {% endhint %} {% hint style="info" %} The **Choose from Assets** feature is especially advantageous for projects involving repeated use of images, eliminating the need for redundant images. {% endhint %} ### Tips for Effective Image Selection * **Organize Your Assets:**\ Keeping your assets organized by categorizing them into folders can save you time when searching for specific images. Group similar images together for quick access. * **Use High-Quality Images:**\ Ensure that the images you upload to your assets library are high-resolution and suitable for your app's design. High-quality images enhance the overall appearance and professionalism of your app. * **Optimize Image Sizes:**\ To maintain optimal performance, use appropriately sized images. Large images can slow down your app, while images that are too small might appear pixelated. Strike a balance between quality and performance. * **Consistent Style:**\ Maintain a consistent visual style across your app by selecting images that align with your design theme. This consistency helps in creating a cohesive and professional-looking app. ### Managing Your Assets * **Adding New Assets:**\ To add new images to your assets library, click on the "Add Asset" button in the Assets widget. You can upload images from your computer or import them from other sources. Make sure to use descriptive names for your assets to easily identify them later. * **Editing Assets:**\ If you need to edit an existing asset, such as resizing, you can do so directly within the Blup interface. Click on the asset you want to edit, and use the provided tools to make your adjustments. * **Deleting Assets:**\ To keep your assets library clutter-free, periodically review and delete any unused or outdated images. Select the asset you want to remove and click the "Delete" button. ### Enhancing App Design with Assets Using assets effectively can significantly enhance your app's design and user experience. Here are some additional tips for leveraging assets in your app: * **Background Images:**\ Use background images to create visually appealing screens. For example, a well-chosen background image can set the tone for a welcome screen or provide context for a specific section of your app. * **Icons and Illustrations:**\ Incorporate icons and illustrations to make your app more intuitive and engaging. These visual elements can guide users through your app and highlight important features or actions. * **Product Images:**\ If your app includes an e-commerce component, using high-quality product images is crucial. Ensure that your product images are clear, detailed, and showcase your products in the best light. * **Promotional Graphics:**\ Utilize promotional graphics to advertise new features, special offers, or important updates. These assets can capture users' attention and drive engagement with your app. Start exploring your assets library today and transform your app's design! # Right-Click Menu in Design Utilize the right-click menu in Blup for quick access to essential design tools and options. The Right-Click Menu in **Design** provides a comprehensive set of functionalities for efficiently managing and manipulating components within your project. You just have to right-click in Design, the menu will appear.
right-click menu

right-click menu

### **Add Logic** Opens the Logic Panel, a robust system enabling the creation of logical workflows around designs and interactions. The Logic Panel supports a diverse range of nodes, including variables (e.g., strings, integers) and SDKs hosted on **pub.dev.**
add logics

Add Logics

### **Copy, Paste, and Delete** #### Copy Duplicates the selected component, including its entire structure such as containers, texts, and widgets. This feature is handy for replicating existing components within your design. #### **Paste** Inserts the previously copied component as a new independent instance. This allows for the creation of duplicates without affecting existing components, fostering flexibility in design. #### **Delete** Removes the selected component from the UI, deleting it entirely—a crucial function for component management and cleanup.

Copy, Paste and Delete

### **Copy and Paste Properties** #### **Copy Properties** Copies all properties of the selected component, excluding height, width, and widget-specific properties. This feature is useful for transferring styles and settings between components. #### **Paste Properties** Applies the copied properties to the selected component. This allows for the efficient transfer of styling and configuration settings.

Copy Paste Properties

### **Copy Page, Paste Page, and Delete Page** #### **Copy Page** Duplicates the current page, facilitating the replication of entire layouts or structures. #### **Paste Page** Inserts the copied page as a new page, allowing for the seamless duplication of entire pages within your project. #### **Delete Page** Removes the current page and opens the last page before it. Useful for page management and navigation. ### **Sent Backward/Forward** #### **Sent Forward** Brings the selected component one layer above its current position in the layer hierarchy, adjusting the visual stacking order. #### **Send Backward** Pushes the selected component one layer below its current position in the layer hierarchy.

Sent Backward/Forward

### **Sent to Front/Back** #### **Sent to Front** Brings the selected component to the top layer of the UI, making it visually the foremost element. #### **Sent to Back** Pushes the selected component to the bottom layer of the UI, making it the visually rearmost element.

Sent to Front/Back

### **Group/Un-group** #### **Group** Groups one or more components together, creating a single top-level layer. Grouping facilitates the management of related elements as a unified entity. #### **Ungroup** Removes layers from the selected group, allowing for the disassociation of components within a group.
Group Un-group

Group Un-group

### **ScrollView/Un-ScrollView** #### **ScrollView** Converts the currently selected component into a ScrollView—a view group used to make vertically scrollable views. Useful for creating scrollable sections within your design. #### **Un-ScrollView** Undo the ScrollView operation, reverting the selected component to its original state.
ScrollView-UnScrollView

ScrollView-UnScrollView

### **ListView/Un-ListView** #### **ListView** Converts the selected components into a ListView widget, a versatile component for displaying a scrollable list of items. #### **Un-ListView** Undo the ListView operation, reapplying the conversion of selected components into a ListView.
ListView-UnListView

ListView-UnListView

### **PageListView/Un-PageListView** #### **PageListView** Creates a ListView of pages, allowing you to map indexes of the pages to different components. Users can navigate through these pages using the designated components. #### **Un-PageListView** Undoes the PageListView operation, reverting the selected component to its original state before the ListView of pages is applied.

PageListView-UnPageListView

#### Happy Learning!! {% embed url="" %} Lofi music {% endembed %} # How to use navigate page in Blup Learn to navigate between pages efficiently in Blup to create seamless user experiences. Navigating between pages efficiently in Blup is essential for creating a seamless user experience. This guide will walk you through the steps to set up navigation in Blup, ensuring your UI is intuitive and user-friendly.
Naviagtion to the page

Navigation to the page

### Navigation to the Page To navigate between pages in Blup, follow these steps: 1. **Select the Element for Navigation** * Begin by selecting the UI element you want to use for navigation. This could be a button, a link, or any interactive component within your design. 2. **Add Logic to the Element** * Right-click on the selected element and choose "Add Logics" from the context menu. This action opens the logic editor where you can define the behavior of the element. 3. **Attach an "On Click" Event** * In the logic editor, attach an "On Click" event to the selected element. This event will trigger the navigation action when the user interacts with the element. 4. **Connect to the Page Navigator** * Next, connect the "On Click" event to the page navigator. The page navigator is a tool within Blup that manages the transition between different pages in your design. 5. **Choose the Destination Page** * Finally, from the dropdown menu in the page navigator, select the destination page you want to navigate to. Ensure that the destination page is correctly linked to provide a smooth transition. ### Advanced Navigation Techniques Blup also offers advanced navigation techniques for more complex applications: * **Dynamic Navigation** Set up dynamic navigation to direct users based on specific conditions or user actions. For example, you can navigate users to different pages based on their input or choices made earlier in the application. * **Nested Navigation** If your application has a hierarchical structure, use nested navigation to allow users to move between parent and child pages seamlessly. This is particularly useful for applications with multiple layers of content. * **Custom Animations** Enhance the user experience by adding custom animations to page transitions. Blup allows you to define how pages appear and disappear, adding a layer of polish to your application. **Community and Support** If you have any ideas to make Blup better, you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303). Engaging with the community can provide additional tips and best practices from other Blup users. ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Logics ⚡ Create logics visually. {% tabs %} {% tab title="Video" %} {% embed url="" %} {% endtab %} {% tab title="Music" %} {% embed url="" %} Lofi music {% endembed %} {% endtab %} {% endtabs %} In Blup, the Logics module allows you to create and manage logic for different widgets within your app. To access Logics in Blup, click on the Logics icon located on the top-left side, next to the Design panel, labeled Logics. ![](/files/a88kBlsflbEYLwJrx72i) ## Dashboard ![](/files/JRq2djPmgRIDItza5WtO) ### 1. Logic Button When click on the Logic button it will open a Logic Console at the bottom for implementing your logics accordingly. ### 2. Logic Tab Each tab corresponds to an individual page and encompasses all the logic associated with that specific page. These pages correspond to every app page in an application. ### 3. Add Node Add node allows you to choose which node you want to apply to your widget either you want to apply function to your designs or want that design to do some mathematical expressions or many more. {% hint style="info" %} You can also open that add node by right-clicking on the logic console. {% endhint %} ### 4. Search On search, you can find your node that is added on the Logics App Page. {% hint style="info" %} You can select any node by clicking on the Panel opened by Search and the Logics App Page will be zoomed to that node. {% endhint %} ### 5. Debug Console In the debug console, When the app is running, it will log all the details of the app logs to check if everything is working as expected or not. It shows you all the errors and print node output that you have placed in your logic. ### 6. Logics Zoomer It allows your Logic app page to zoom out or zoom in for a better view of your logic nodes. ### 7. Logics Maximizer It takes the necessary spaces in blup for the Logic screen so you can work on your logic. ### 8. Logics Menu In the Logics Menu, there are 4 options - **Refresh Logic**, **Help in Logic**, **Hide/Show** **Minimap**, and **Hide/Show Debug console**. * **Refresh Logic -** It will refresh all the logic nodes if something is not working correctly. * **Help in Logics -** It will open a small box with logic on it, for your help how to use logic and which color is situated to what type. * **Hide/Show** **Minimap-** It will hide or show a mini-map of your Logic console on the bottom left, from this map you can go anywhere in your Logics App Page just by clicking on that part in the map. It will help to have a view of so many logics and you want to go from one point to another in Logics App Page. * **Hide/Show Debug console -** It will open a debug console next to your Logic console so you can check the errors or the prints in real time. ### 9. Logics App Page The Logics App Page is where all logics are created by connecting or adding nodes. {% hint style="info" %} This is the backbone of Blup for Logics Creation. {% endhint %} ## List Of Nodes Available in Logics ![](/files/-Mhb7D26C6CGjljx81r7) ![](/files/-MhgOAjP69zLUZJ4UEiA) ![](/files/-MhgOALK4oBasgOKmE44) ## Understanding Node Structure ![](/files/HhBCQK6btY87e9qIvmPH) All the nodes that are present in the Blup Lightning follow the same node structure or pattern. On the top center of each node, is the name of the node, this name signifies multiple things like which category the node belongs to and what is it's intended task. The left-hand side of each node takes the input and the right-hand side of each node gives the output. To take input or provide output each node uses a node point. {% hint style="info" %} Note: In some of the nodes you can also use the input box located inside the node.. {% endhint %} ### What is Node point Node points are points lying on the outer surface of the node to accept input, provide output or for navigation to another page. In blup data flows from one node point to another. Node points can only connect with node points of the same type. There are two types of node points: #### **Circular node point** These node points as the name suggests are circular in shape and color-coded, according to the type of data being passed through them thereby, if two node points are to be connected, they need to be of the same color. ![](/files/9YDiTKIv7VyJ4uefKc0F) **For Example -** A string node point can accept node wire from other string node points only. Certainly! Let’s delve into the details of **Function Node Points** in **Logics**: 1. **Function Node Points**: These node points take on a triangular shape, unlike the circular node points. Unlike the color-coded circular nodes, function node points don’t adhere to any specific color schema. 2. **Run Trigger**: The function node points serve two primary purposes. First, we have the **Run Trigger**. It consists of two function node points—one on the left-hand side and another on the right-hand side of the node. Here’s how it works: * The left-hand side node point acts as the **starting point** for the node. * The right-hand side node point triggers the execution of another function node point **after the current logic is finished**. In other words, it allows you to sequence actions or steps within your logic. 3. **Function Output Node Points**: These node points are located on the right-hand side of the node. They play a crucial role in running logic based on specific triggers. When certain conditions are met, these output node points execute additional actions or processes. Feel free to explore these function node points further, and if you have any specific questions or need more details, feel free to ask! 😊 ![](/files/CwfKPZsryG6biuO3g1Uv) For example, in the above Rectangle Node, the logic attached to the on-click function node point only runs when the user clicks on the rectangle in the app. In Some of Cases, these output node points also provide you with additional output node points for further flexibility ![](/files/p0VkGgZ6AcrlXGKRhMOP) **For example -** When the on File Picked Function output Node point Stretch you can see that new output node points are generated that provide you with extra output node points. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # UI Nodes Bridge between the Design \[blup designer] and logics \[Blup Logics]. ## UI nodes Overview Nodes present in this section are one of the most important and widely used nodes. They are not present in the arsenal panel in blup lightning, rather they are generated automatically by blup from the designer section itself. These nodes help you to connect the UI with actual Logic, or we can say that they act as a bridge between the blup Designer UI and Blup Lightning logics section. These nodes help you to capture user events like on click etc. and create logic for these events. **UI Nodes are divided into four main types:** 1. [**Rectangle UI Node**:](/wiki/logics/ui-nodes/rectangle-ui-node) * A versatile node used to create rectangular elements in the UI. * Commonly used for buttons, input fields, and other rectangular components. * More details: [Rectangle UI Node](https://docs.blup.in/wiki/logics/ui-nodes/rectangle-ui-node) 2. [**Group UI Node**:](/wiki/logics/ui-nodes/group-ui-node) * Allows grouping of multiple UI elements. * Facilitates collective management of properties and actions for grouped items. * More details: [Group UI Node](https://docs.blup.in/wiki/logics/ui-nodes/group-ui-node) 3. [**Text UI Node**:](/wiki/logics/ui-nodes/text-ui-node) * Used for adding and managing text elements within the UI. * Supports various text properties like font size, color, and alignment. * More details: [Text UI Node](https://docs.blup.in/wiki/logics/ui-nodes/text-ui-node) 4. [**List UI Node**:](https://docs.blup.in/wiki/logics/ui-nodes/list-ui-node) * Enables the creation and management of list-based UI elements. * Useful for displaying data in a structured list format. * More details: [List UI Node](https://docs.blup.in/wiki/logics/ui-nodes/list-ui-node) ### Functionality and Usage UI Nodes are automatically generated from the designer section and are essential for capturing user interactions and linking them to the appropriate logic. This automation streamlines the development process, reducing manual work and potential errors. **Key Roles**: * **Design to Logic Transition**: Facilitates smooth integration between visual design and logical functionality. * **Event Handling**: Captures and manages user events, ensuring responsive interactions. * **Automation**: Enhances development efficiency by generating nodes automatically. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Rectangle UI Node Implement and customize rectangle UI nodes in Blup to enhance your app's design and functionality. This node facilitates interaction with UI rectangles, allowing dynamic modification of associated properties. It also captures events like on-click or property changes. For example, if you wanted to navigate to another page with the click of the rectangle, such types of functionalities can be achieved with the help of this node. ## How to get rectangle Node. ![](/files/ryK54uHAZWonE2sZmp6G) **Step 1:** Select an ungrouped rectangle on the mobile canvas or pages. **Step 2:** Right-click the selected rectangle to open the arsenal panel in Blup Designer. **Step 3:** In the arsenal panel (which differs for Blup Logics), choose "Add Logics." **Step 4:** This action generates a rectangle node in Blup Logics respective tab. ## Components of rectangle Nodes. | Component | Description | | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Child** | This input node receives the parent widget of the container. | | **On Click** | This node allows you to trigger actions when the rectangle is clicked. | | **Rect Properties** | This node provides properties for the rectangle such as width, height,file path and many more. | | **Rect Extra Properties** | This node offers additional options to customize the rectangle, such as padding, corner radius, shadow effects and many more. | | **Width** | This input node defines the width of the rectangle. | | **Height** | This input node defines the height of the rectangle. | | **Is Visible** | This input node point is used to hide the rectangle, this node point accepts a Boolean type value if the value is true it hides the rectangle, else the rectangle is visible. | | **File Path** | This input node point provides the path of any image or gif to be shown inside the rectangle for mobile applications. | | **File Bytes** | This input node point provides the data in bytes to be shown inside the rectangle for web applications. | | **Extra Data** | This input node points stores data that can be used further along the line. | | **Edit Checkbox** | This checkbox helps you to access secondary input node points or additional properties associated with the rectangle node. If the checkbox is checked, all the secondary input node points are visible, if not they are hidden and cannot be used. | | **Corner Radius** | This input node helps to define the corner radius. | | **Padding Left** | This node point is used to give left padding. | | **Padding Right** | This node point is used to give Right padding. | | **Padding Top** | This node point is used to give Top padding. | | **Padding Bottom** | This node point is used to give Bottom padding. | | **Radius** | This input node helps to define the radius. | | **Fill** | This node point helps to provide background colour to the rectangle. | | **Border fill** | This input node point helps to apply colour to the border of the rectangle. | | **Border Width** | This input node point is used to define the width of the border of the rectangle. | | **Shadow Fill** | This input node is used to provide colour to the shadow. | | **Shadow X** | This input node point helps to move the shadow effect along the X-axis \[horizontally]. | | **Shadow Y** | This input box helps to move the shadow effect along the Y-axis\[vertically]. | | **Shadow blur** | This input node point helps you to expand the effect of shadow, If the value is smaller then the shadow is concentrated on a small area and vice versa. | | **Inner Shadow** | This input node defines the inner shadow of the rectangle. | | **Image Fill** | This input node point helps you provide a background colour to the image present in the rectangle. | | **Image Fit** | This input node point helps to define how the image has to be fitted inside the rectangle. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Text UI Node Use text UI nodes in Blup to add and configure text elements within your application's interface. Text UI Node helps to perform logic On-click of text or when properties related to text changes. {% hint style="info" %} Note: Text or Text Field \[input box] has the same node i.e. text UI node. {% endhint %} ![](/files/rVENqzdSpKR0Fe5NgjRE) ### Components Of Text Node | Component | Description | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Child** | This input node receives the parent widget of the Text. | | **On Click** | This node allows you to trigger actions when the Text is clicked. | | **Text Properties** | This node provides properties for the Text such as hide, extra data and many more. | | **Text Extra Properties** | This node offers additional options to customize the Text, such as padding, font size, letter spacing and many more. | | **Text** | This input node point helps to provide the text to be shown. | | **Is Visible** | This input node point is used to hide the Text or Textfield. This node point accepts a Boolean-type value if the value is true it hides the group, or else the group is visible. | | **Extra Data** | This input node point helps to store data that can be used further down the line. | | **Edit Checkbox** | This checkbox helps you to access secondary input node points of the selected Text or TextField. If the checkbox is checked, all the secondary input node points are visible; if not they are hidden and cannot be used. | | **Padding Left** | This node point helps to give the left padding. | | **Padding Right** | This node point helps to give the Right padding. | | **Padding Top** | This node point helps to give the Top padding. | | **Padding Bottom** | This node point helps to give the Bottom padding. | | **Font Size** | This input node point helps to define the font size of the text. | | **Letter Spacing** | This input node point helps to define the spacing between the letters of the text. | | **Line Height** | This input node point helps to define a height between the text. The bigger the number, the bigger will be the height and vice versa. | | **Max Lines** | This input node point helps to define the max line to which your text can expand , for example, if you define the maxline value as 2 then your text can only take up 2 lines. | | **Text Vertical Wrap** | As the name suggests, this property helps to rotate your text 90 degree.. | | **Font Color** | As the name suggests, this property helps to define the font colour. | | **Is Ellipses** | This input node point helps to convert the text expanded into multiple lines to a single line and show the rest of the text in “….” form. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Group UI Node Organize and manage grouped UI nodes in Blup for better design efficiency and functionality. The Group node is useful when you want to perform any logic or change the property of the group dynamically on some event. This node provides you with all properties that can be changed in a group. ## How to get the Group Node. ![](/files/MF1S5QkubOwekx2e2TKh) To get the group node first group the multiple elements present on the page or mobile canvas together and then select the group created with the selector toggle, then right-click on the group, arsenal panel of blup designer opens up, select the edit in blup lightning option from the dialog box, this will generate the group Node in blup Lightning. {% hint style="info" %} Note: the group node doesn’t have the onclick output node point so if you wanted to perform any logic when the user clicks on the group you have to do it through the rectangle present inside the group. {% endhint %} ## Components of Group UI Node | Component | Description | | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Child** | This input node receives the parent widget of the container. | | **On Click** | This node allows you to trigger actions when the it is clicked. | | **Column Properties** | This node shows Column properties such as hide, width, height and many more. | | **Column Extra Properties** | This node offers additional options to customize the Group, such as padding, spacing, aspect ratio and many more. | | **Width** | This input node helps to define the width of the group. | | **Height** | This input node helps to define the height of the group. | | **Is Visible** | This input node point helps to hide the group, this node point accepts a Boolean-type value if the value is true it hides the group, else the group is visible. | | **Extra Data** | This input node points help to store data. which can be used in further cases. | | **Edit Column Properties** |

This checkbox helps to access secondary input node points or Extra properties associated with the group node.

If the checkbox is checked then the secondary input node points are visible ; if not then they are hidden and cannot be used.

| | **S L Padding Left** | This node point sets smart layout padding from the left side of the column. | | **S L Padding Right** | This node point sets smart layout padding from the right side of the column. | | **S L Padding Top** | This node point sets smart layout padding from the top side of the column. | | **S L Padding Bottom** | This node point sets smart layout padding from the bottom side of the column. | | **S L Allignment** | This node determines horizontal or vertical alignment according to your needs. | | **S L Direction** | This node gives the direction inside the column. | | **S L Gap** | This node point specifies the direction inside the column. | | **S L Spacing** | This node point sets the gap inside the column. | | **Padding Left** | This node adjusts the padding from the left side of the column. | | **Padding Right** | This node adjusts the padding from the right side of the column. | | **Padding Top** | This node adjusts the padding from the top side of the column. | | **Padding Bottom** | This node adjusts the padding from the bottom side of the column. | | **Radius** | This node adjusts the radius of the column. | | **Fill** | This node help in filling the color to your column. | | **Border Fill** | This node help in filling the color to your column border. | | **Border Width** | This node help in defining your coumn width. | | **Shadow Fill** | This node help in filling the color to your column shadow. | | **Shadow X** | This node adjust the shadow on the x-axis. | | **Shadow Y** | This node adjust the shadow on the y-axis. | | **Shadow Blur** | This node guves the blury shadow to your column group. | | **Dotted Border** | This node gives the dotted border to your column group. | | **Layer Blur** | This node give the blury layer to your group. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # List UI Node Add and manage list UI nodes in Blup to display collections of items effectively in your app. This node helps to create a list of elements. This node is used for providing the data to the list dynamically and for adding logic to various events. The main purpose of the node is to populate the list of items that you want to show repeatedly. ### How to get List UI Node. ![](/files/SHjUz8sfPPssJc1YILyV) For creating a new List first you have to create a single element \[repetitive element] of the list, this can be a single rectangle, text or a group with multiple items in it. The process remains the same for all types of list except when list element consists of a single rectangle or text then only one item widget is going to be generated while list node is created, but if the single list element consists of multiple items like a group then the number of item widget that going to be associated with list node is equal to the number of items present in the single group. After the list element is created convert it to the list by clicking on the convert to list button in the properties panel, then select the list created and right-click on the list and choose "edit in blup lightning" in the arsenal . As soon as you do that a listview node is generated in the blup lightning which consists of an automatically generated item widget based on the number of items in a single element of the list. ### Components of List UI node | Component | Description | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Drop Down** | Enable the user to select the list type from the drop down. | | **Is Update** | This input node point is used to define whether the children are to be updated dynamically or not, this node point accepts a Boolean type value. | | **Item count** | Item count input node point defines the total number of items to be had on the list. | | **Is hide** | This input node point helps to hide the list. | | **Extra Data** | This input node points help to store data. which can be used in further cases. | | **Iterator** | This node allow you to iterate your elements according to your iterate value. | | **Scroll Listener** | This node Listenes the scrolls when ever you scroll in your listview. | | **On Bottom Reached** | This node offers what yoou want to do when you reach at the bottom of the listview. | | **On Scroll Up** | This output node helps to determine the functionality on scroll up according to your need. | | **On Scroll Down** | This output node helps to determine the functionality on scroll down according to your need. | | **List View Properties** | This output node Properties to your list. | | **On Properties Update** | This Output node gives the additional properties to your List. | | **Width** | This input node point helps to define the width of the list. | | **Height** | This input node point helps to define the height of the list. | | **Padding Left** | This node point helps to give the left padding. | | **Padding Right** | This node point helps to give the Right padding. | | **Padding Top** | This node point helps to give the Top padding. | | **Padding Bottom** | This node point helps to give the Bottom padding. | | **Grid Row Count** | This input node point can be used to convert the list into a grid list. If the value of this property is one then it is a simple list but if we increase the value of let's say to 2 it becomes the grid list with two-column. | | **Item Spacing** | This property helps to define the spacing \[vertical height] between the list items. Higher the value of item spacing greater the vertical height between the item in the list and vice versa. | | **Grid Spacing** | This property helps is used to define the horizontal spacing between the grid items. Note - The property only going to works when we have a grid, not a list. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Page ListView UI Node Learn to create and manage multiple pages in Blup for a well-organized and efficient application. Page ListView enables users to select different sections on one screen and navigate to corresponding screens in a ListView format. It provides flexibility to customize decorations according to your preferences. ## How to get the Page ListView Node. ![](/files/PE5uxYw7KhT3m8mPZhKt) To obtain the Page ListView, follow these steps: **1.** Select a section similar to the rectangle UI node. **2.** Right-click on the rectangle UI node, then choose "Page ListView." **3.** On the right-hand side, below the margin settings, locate "Add Pages to PageList." **4.** Select it and specify the container representing the page you want to display inside it. ### Components of Page ListView node | Component | Description | | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | **Parent** | This input node retrieves the parent node within it. | | **Is Update** | This input node enables the updating of the Page ListView node. | | **Page Index** | Use this node when you have multiple pages within a rectangular section and need to navigate them. Assign indexes to these pages. | | **Item Count** | This node allows you to count the number of items in the Page ListView. | | **Is Hide** | Use this input node to hide the Page ListView. It accepts a Boolean value; true hides the group, while false keeps it visible. | | **Extra Data** | This input node points help to store data. which can be used in further cases. | | **On Page Scroll** | This node provides functionality for the page ListView is scrolled. | | **List View Properties** | Use this node to configure properties for your ListView, such as item count, visibility, and more. | | **On Properties Update** | This node allows you to update the decoration of your ListView by specifying width, spacing, and other attributes. | | **Edit Group Properties** | This checkbox helps to access secondary input node points or Extra properties associated with the Page ListView node. | | **Width** | Use this node to specify the width of your Page ListView Section. | | **Height** | This node allows you to define the height of your Page ListView Section. | | **Padding Left** | This node point specify the padding from the left side of the Page ListView Section. | | **Padding Right** | This node point specify the padding from the right side of the Page ListView Section. | | **Padding Top** | This node point specify the padding from the top side of the Page ListView Section. | | **Padding Bottom** | This node point specify the padding from the bottom side of the Page ListView Section. | | **Grid Row Count** | This node point define the number of rows in the grid of the section. | | **Item Spacing** | This node determine the spacing between items inside the page ListView. | | **Grid Spacing** | This node point specify spacing in a grid manner. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Helper Nodes Utilize helper nodes in Blup to enhance your application's logic and functionality with ease. Helper Nodes in Blup are essential for enhancing your application's logic and functionality. They provide specific actions on variable nodes, making data management and manipulation easier. ## Helper Nodes Overview This section includes helper functions for handling variables. These functions assist in performing specific actions on variable nodes. For additional details, you can navigate directly to the desired nodes by clicking on the respective node below. 1. [Integer Node](/wiki/logics/helper-nodes/integers-nodes) * Manages whole numbers. * Useful for mathematical operations and counters. * [Learn more](https://docs.blup.in/wiki/logics/helper-nodes/integers-nodes) 2. [Double Node](/wiki/logics/helper-nodes/double-nodes) * Handles decimal numbers. * Ideal for precise calculations. * [Learn more](https://docs.blup.in/wiki/logics/helper-nodes/double-nodes) 3. [Boolean Node](/wiki/logics/helper-nodes/boolean-nodes) * Manages true/false values. * Essential for decision-making logic. * [Learn more](https://docs.blup.in/wiki/logics/helper-nodes/boolean-nodes) 4. [Date-Time Node](/wiki/logics/helper-nodes/date-time-nodes) * Deals with dates and times. * Useful for scheduling and time-sensitive operations. * [Learn more](https://docs.blup.in/wiki/logics/helper-nodes/date-time-nodes) 5. [Json Node](/wiki/logics/helper-nodes/json-nodes) * Manages JSON data structures. * Vital for handling complex data formats and APIs. * [Learn more](https://docs.blup.in/wiki/logics/helper-nodes/json-nodes) 6. [List Node](/wiki/logics/helper-nodes/list-nodes) * Manages lists of items. * Useful for array-like data operations. * [Learn more](https://docs.blup.in/wiki/logics/helper-nodes/list-nodes) 7. [Map Node](/wiki/logics/helper-nodes/map-nodes) * Handles key-value pairs. * Ideal for dictionary-like data structures. * [Learn more](https://docs.blup.in/wiki/logics/helper-nodes/map-nodes) 8. [String Node](/wiki/logics/helper-nodes/string-nodes) * Manages text data. * Useful for string manipulations and text operations. * [Learn more](https://docs.blup.in/wiki/logics/helper-nodes/string-nodes) 9. [Duration Node](/wiki/logics/helper-nodes/duration-nodes) * Handles time durations. * Useful for operations involving time intervals and delays. * [Learn more](https://docs.blup.in/wiki/logics/helper-nodes/duration-nodes) #### Usage and Benefits Helper Nodes streamline the development process by providing specialized functions for different data types. They improve code readability and maintainability, making your applications more robust and easier to manage. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Boolean Nodes Implement boolean logic nodes in Blup for effective conditional operations within your application. Implementing boolean logic nodes in Blup allows for effective conditional operations within your application. This section covers the essential helper functions related to boolean values, enabling you to optimize the logic and functionality of your projects. ### Overview of Boolean Nodes Boolean nodes are fundamental in creating logical conditions and making decisions based on boolean values (true or false). In Blup, these nodes help streamline complex operations, making your application more efficient and responsive. ![](/files/vCzBmUCgN3EUpvxIEYYG) This sub-section provides helper functions related to boolean values. ### Key Boolean Helper Functions **1. Boolean | Is Null** The "Is Null" node checks whether the provided boolean value is null. A variable is considered null if it lacks a value, indicating the absence of any boolean state. This function is crucial for validating data and ensuring the integrity of your application's logic. **Example Use Case:** Consider a scenario where you need to verify if a user's input has been provided or if it remains unset. The "Is Null" node helps you identify such cases and handle them appropriately, preventing errors and improving user experience. ![](/files/Sw00vE5XSj7JsL4GKPAH) This node checks whether the provided boolean value is null or not. A variable is considered null if there is no value present in it. ### How to use Boolean Nodes in Blup 1. **Adding a Boolean Node:** * Navigate to the nodes library within Blup. * Select the "Boolean" category. * Drag and drop the desired boolean node into your workflow. 2. **Configuring the Node:** * Define the input variables and set any required parameters. * Connect the boolean node to other nodes to establish the desired logical flow. 3. **Testing and Debugging:** * Run your application and monitor the boolean node's behavior. * Use Blup's debugging tools to trace and resolve any issues. #### Benefits of Using Boolean Nodes * **Enhanced Logic Control:** Boolean nodes provide precise control over conditional operations, ensuring your application behaves as intended. * **Improved Data Validation:** By checking for null values, you can prevent unexpected behavior and enhance the reliability of your application. * **Streamlined Workflow:** Simplify complex logical operations with clear and concise boolean nodes. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Date Time Nodes Use date and time nodes in Blup for scheduling and time-based features in your app. Date and time nodes are essential components in Blup that enable scheduling and time-based features in your app. These nodes offer various functionalities to help you manage and format date and time data efficiently. ### Overview of Date and Time Nodes The date and time nodes in Blup provide a range of helper nodes designed to handle different aspects of date and time management. These nodes can be used to perform various operations such as formatting, calculating differences, and scheduling tasks based on specific times or dates. ![Date Time Nodes](/files/N3QKLuqAakuwjN4QBmHg) This section helps you to get helper nodes related to date and time. ### DateTime | Formatter One of the primary date and time nodes available in Blup is the **DateTime Formatter** node. This node allows you to convert a DateTime object into a specific format, making it easier to display date and time information in a user-friendly manner. ![DateTime | Formatter](/files/YAWEONUqHlaKdVUqSziB) This node converts a DateTime into a specific format. Example For instance, if you want to display only the hours and minutes from a DateTime, you can choose the 'Hours\_minutes' option from the dropdown. If you want to display only the date in the format of day/month/year, you can choose the 'year\_month\_day' option from the dropdown. ### **How to Use the DateTime Formatter Node** The DateTime Formatter node provides several formatting options that you can select from a dropdown menu. Here are some examples of how you can use this node: * **Hours and Minutes:** If you only want to display the hours and minutes from a DateTime object, you can choose the 'Hours\_minutes' option from the dropdown. This is useful for applications where you need to show time without the date. * **Day/Month/Year:** To display the date in the format of day/month/year, select the 'year\_month\_day' option from the dropdown. This format is commonly used in various applications to show full-date information in a specific order. By using the DateTime Formatter node, you can ensure that your app presents date and time information in a clear and consistent format, enhancing the overall user experience. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Double Nodes Manage and use double data type nodes in Blup for numeric operations and calculations. ![](/files/j2ZAqubTYq8ZGVpqmFvT) ### Double | Floor Node ![](/files/v2OwXa9TmDUEoP1DzHEj) This node returns the largest integer that is smaller than or equal to the input double number (i.e., rounds down to the nearest integer). For example, if the input number is 2.31, the result is 2. #### Components of Node 1\. **Value** – Input node providing the double number to apply the floor operation on. You can also directly input the number into the box. 2\. **Result** – Output node returning the integer number after applying the floor operation on the double number. ### Double | Ceil Node ![](/files/mZJW2OSqBwJzPuFGyygV) This node returns the smallest integer that is greater than or equal to the input number (i.e., rounds up to the nearest integer). For example, if the input number is 2.31, the result is 3. Components of Node 1\. **Value** – Input node providing the double number to apply the ceil operation on. You can also directly input the number into the box. 2\. **Result** – Output node returning the integer number after applying the ceil operation on the double number. ### Double | Round Node ![](/files/shhTzxqpz6JQ1Wm54rCC) This node applies rounding to decimal numbers, simplifying them while keeping their value close to the original. For example, if the input number is 12.3124, the output is 12, and if the input is 12.5123, the output is 13. #### Components of Node 1\. **Value** – Input node providing the double number to apply the rounding operation on. You can also directly input the number into the box. 2\. **Result** – Output node returning the double number after applying the rounding operation. ### Double | Abs Node ![](/files/0o5Mf0U6q1KEwIfdwXa1) This node converts double (decimal point numbers) to their absolute form, ensuring that negative numbers are converted to positive. For example, if the input number is -12.5123, the output is 12.5123. #### Components of Node 1\. **Value** – Input node providing the double number to convert to its absolute form (positive). You can also directly input the number into the box. 2\. **Result** – Output node returning the positive number after applying the absolute value operation. ### Double | Is Negative Node ![](/files/C0MdVJdce6xLbpSoYEDZ) This node helps you to check whether the provided number \[decimal number] is negative or not. #### Components of Node 1\. **Value** – This input node provides the double number that you want to check for negativity. You can either connect another node to provide the number or directly enter the number in the input box. 2\. **Result** – This output node gives true if the provided number is negative, otherwise it returns false. ### Double|To Int Node ![](/files/70yyeJNh7sEMM2fVJzN9) This node converts a decimal number into an integer. For example, if the input number is '1.253', this node returns 1 as the result. #### Components of Node 1\. **Value** – This input node provides the double number that you want to convert to an integer. You can either connect another node to provide the number or directly enter the number in the input box. 2\. **Result** – This output node gives the integer number after the conversion. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Duration Nodes Implement duration nodes in Blup for precise time interval calculations in your application. Duration Nodes in Blup allow for precise time interval calculations within your application. These nodes are essential for managing and manipulating time data effectively. Below, we explore the various types of Duration Nodes available and how they can be utilized. ![ Duration Nodes](/files/kC5FKYVYf5Q1FQG1JqFW) ### Duration | Abs The Duration | Abs node returns a Duration that maintains the same length as the provided one but is always positive. This is particularly useful in scenarios where you need to ensure that the duration values are non-negative, such as calculating time intervals where only positive values make sense. **Example Use Case:** Imagine you are developing a timer application that tracks exercise sessions. You might receive time data that is accidentally recorded as negative. Using the Duration | Abs node, you can convert these negative durations into positive ones, ensuring the integrity of your data. ![](/files/Yj4ms6SavyQmdHILwTbA) This node returns a Duration that has the same length as the provided one but is always positive. If the duration is negative, this node converts it to a positive duration. ### Duration | Compare To ![Duration | Compare To](/files/1Sf0uBb846Bq2XqnnOlA) This node compares two durations and returns: This node returns - 1\. Zero if both durations are the same. 2\. A negative integer if the first duration is shorter than the second. 3\. A positive integer if the first duration is greater than the second. {% hint style="info" %} Note - A negative Duration is always considered shorter than a positive one. {% endhint %} ### Duration | Is Negative The Duration | Is Negative node returns a boolean value indicating whether the provided duration is negative. This is useful for conditional logic where actions depend on whether a duration is positive or negative. ![Duration | Is Negative](/files/fABdFjrEdfeAn1NsykaP) **Example Use Case:** Consider a countdown timer that triggers alerts when time runs out. By using the Duration | Is Negative node, you can check if the remaining time has dipped below zero, prompting the application to notify the user that time is up. This node returns true if the duration provided is negative. If the duration is negative then this node returns true, if the duration is not negative then this node returns false. ### Duration | Conversion The Duration | Conversion node allows you to convert durations into different units, such as converting hours into minutes or seconds. This node is essential for applications that require flexible time data representation. ![ Duration | Conversion](/files/W4XYZNZnQA2AzlgK8YoG) **Example Use Case:** In a travel app, users might enter travel times in various units (hours, minutes). Using the Duration | Conversion node, you can standardize these inputs into a single unit (e.g., minutes) for easier comparison and calculation of total travel time. This node helps you to convert the duration into the required format, for example, hours into minutes. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Integers Nodes Use integer nodes in Blup for numeric operations and logic within your app's functionality. ![](/files/04jrVloWZagnmjdbKY0U) This subsection includes helper function nodes related to integers. ### Integer | Is Even Node ![](/files/vjEfBdMUaiNFVSmrEO1P) This node checks if the given integer number is even. #### Components Of Node 1\. **Value** – Input node to provide the integer number to be checked. You can directly input the number into the box. 2\. **Result** – Output node that returns true if the input integer is even; otherwise, it returns false. ### Integer | Is Odd Node ![](/files/HiuZB8F4rFJ1iRLZNcTO) This node helps you to check the given integer number is odd or not. #### Components of Node 1\. **Value** – Input node to provide the integer number to be checked for odd. You can directly input the number into the box. 2\. **Result** – Output node that returns true if the input integer is odd; otherwise, it returns false. ### Integer | Abs Node ![](/files/eQsHckZwqZUVY1AP6CmJ) This node converts a number to its absolute form, meaning negative numbers are converted to positive, while positive numbers remain the same. #### Components of Node 1\. **Value** – Input node providing the integer number to be converted to its absolute form. You can also directly input the value into the box. 2\. **Result** – Output node providing the positive number as output, regardless of whether the input number was negative or positive. ### Integer | IsNegative Node ![](/files/gpEBkvmVQXx4rP7AyEFd) This node checks whether the provided number is negative or not. #### Components Of Node 1\. **Value** – Input node providing the integer number to be checked. You can also directly input the number into the box. 2\. **Result** – Output node returning true if the provided number is negative; otherwise, it returns false. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Json Nodes Integrate JSON nodes in Blup for efficient data handling and API interactions within your app. Blup offers powerful JSON nodes that streamline data handling and API interactions within your app. Understanding how to use these nodes effectively can enhance the efficiency and functionality of your applications. ### JSON | Get Value The **JSON | Get Value** node is designed to retrieve values from JSON data based on specified filters. This capability is particularly useful when dealing with complex data structures returned from API calls or other sources. ![](/files/Di6idSg1SQ4tpnPDRT8v) This node retrieves values from JSON data based on a specified filter. #### Parameters **Input** * **JSON Data**: This is the primary input, typically obtained from the Response Body field of a Simple HTTP’s On Success function. * **Var Type**: The type of variable expected, which can be a String, Map, or List. For example, consider the following JSON structure: ```dart { "store": { "book": [ { "category": "reference", "author": "Nigel Rees", "title": "Sayings of the Century", "price": 8.95 }, { "category": "fiction", "author": "Evelyn Waugh", "title": "Sword of Honour", "price": 12.99 }, ], "bicycle": { "color": "red", "price": 19.95 } } } ``` Filter To extract specific data, you need to provide a filter. This filter requires a string input that specifies the path to the desired value within the JSON structure. * **Var Type**: The type of variable is String. Example filters include: * `store.book[0].title` to get the title of the first book. * `store.book[*].title` to get the titles of all books. #### Important Note When using filters, there is no need to add `$.` at the beginning of the filter string as the system automatically includes it. For more complex filter expressions, you can refer to resources such as: * [JSON Path Comparison](https://cburgmer.github.io/json-path-comparison/) * [IETF JSONPath Draft](https://ietf-wg-jsonpath.github.io/draft-ietf-jsonpath-base/draft-ietf-jsonpath-base.html) Additionally, to test and evaluate your JSON paths, you can use the online tool available at [JSONPath.com](https://jsonpath.com/). \ **For more,** For detailed filters, please visit:\ or\ . Online evaluator, please visit: \------------------------------ If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # List Nodes Manage and use list nodes in Blup for handling collections and data arrays effectively. This sub-section provides helper functions related to lists. ![](/files/O2IulzcOPhf7hu4ltDcu) ### List | First Item ![](/files/igmuNF3ZM5rSDjnXPr1o) This node returns the first element of the provided list \[the first element is the element which is stored at 0 index in list]. For example – list = \[1,2,3,4,5] then this node return result = 1. ### List | Last Item ![](/files/Dwnfuv19PoccZel6BHfm) This node returns the last element of the provided list. For example, list = \[1,2,3,4,5] then this node return result = 5. ### List | Reverse ![](/files/Sn8yooPxh4XqiZ4SJqvs) This node reverses the provided list. For example, list = \[1,2,3,4,5] , node result = \[5,4,3,2,1]. ### List | Remove At ![](/files/kzXaoRQ2gqBR305r6FCN) This node removes the element at the provided index from the list. The provided index should be between 0 <= index < list Length. For example, list = \[1,2,3,4,5], index = 1 result list = \[1,3,4,5]; {% hint style="info" %} Note: Indexing in list starts from zero. {% endhint %} ### List | Remove Value ![](/files/gYJEkQ8cYmrpg30uN1Go) This node removes the first occurrence of the given value from the list. For example, list = \[1,2,3,4,5,1], and value = 1, so this node will return: \[2,3,4,5,1]. ### List | Add Value ![](/files/z6qSvAxyYqkPt94apEon) This node adds a value to the end of the list, extending the length by one. For example, list = \[1,2,3,4,5] and value = 6, so the node return = \[1,2,3,4,5,6]. ### List | Add List ![](/files/xO1LLd1rDRyR0eThO3ie) This node combines two lists into a single list. The length of the resultant list is the sum of the length of the first and second lists. For example, Input list1 = \[1,2,3] and Input list2 = \[4,5,6] and the Output list: \[1,2,3,4,5,6]. ### List | Insert At ![](/files/DjbX2cq2dTrINUk9y6xL) This node helps you to insert at a particular position or index in the list, inserting an item into the list can cause the increase in the length of the list by one and shifts all objects at or after the index towards the end of the list. For example, Input list: \[1, 2, 3, 4], index: 2, element: 10 Output list: \[1, 2, 10, 3, 4]. ### List | Remove Range ![](/files/ZdJKpqixgMrCa9md9rNA) This node helps you to remove multiple sets of consecutive elements from the list at once. Removes the elements with positions greater than or equal to start and less than the end, from the list. This reduces the list's length by the end - start. For example, Input list = \[1,2,3,4,5,6] , start index: 0, end index: 2 and the Output list: \[3,4,5,6] because end is not included. ### List | Clear ![](/files/h7CseogZbBPMPZjlxzPg) This node helps you to Removes all objects from this list; the length of the list becomes zero. This node returns the empty list which can be used again for adding items or elements. For example Input list: \[1,2,3,4,5], Output list: \[]. ### List | Length ![](/files/fLd5PF9duK9TOPL90ftq) This node calculates the length of the list, indicating how many elements are present. For example, Input list: \[1,2,3,4,5], Output length: 5 total 5 elements are present. ### List | Is Empty ![](/files/41Crj3Qi3CwQvESEZyLD) This node helps you to check whether the provided list is empty or not, if the provided list is empty then the node returns True else it returns false. For example, Input list: \[1,2,3,4], Output: false, if Input list: \[], Output: true. ### List | Index Of ![](/files/nYyH2C299GM53hQ4FozT) This node finds the index of a particular element in the list. It returns the index of the first occurrence of the element. For example, Input list: \[1,2,3,4], element: 3, then node Output index: 2. {% hint style="info" %} Note: The index in the list starts from zero. {% endhint %} ### List | Element At ![](/files/Oi7vVG3uEAj58Toe50IP) This node helps you to get the element at a particular index. This node returns the value of the item or element present at the given index. For example, list = \[1,2,3,4,5,6] , index =2, then the node return 3, as indexing in list starts from zero. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Map Nodes Implement map nodes in Blup for key-value pair data management within your application. ![](/files/YHaFJoKGkLZxQeuFzi5A) This section consists of all the helper function nodes of map. ### Map | Remove ![](/files/rQPscHlNtG8XnkTkHjb6) This node removes the key and its associated value from the map, if present. If the key is not found, no changes are made to the map. For example, map {“athul”: “chaudhary”}, key = “atul”, so node removes the key-value pairs that have key matching with the provided key. In this case, the node returns an empty map because there is only one value in the map. ### Map | Clear ![](/files/0smpYAC0AcAmb4mfGNcD) This node removes all the values that are present in the provided map, and then it returns the empty map. For example, map = {“atul” : “chaudhary”}, this node return the map ={} which is the empty map. ### Map | Add All ![](/files/ciY5s7tkrjGrDGvnBfRT) This node helps you to Add all key/value pairs of others to this map. And If a key of other is already in the provided map, its value is overwritten \[make sure that both map have unique keys]. For example, map = {“CSE”:”atul”}, other map = {“IT”: “ashutosh”}, then the node return new map = {“CSE”: “atul”, “IT”: “ashutosh”}. ### Map | Contains Key ![](/files/Lq8awClOx8EC28MNfK0l) This node checks if the provided key is present in the map. For example, map = {“CSE”: “atul”}, key = “CSE”, then the node return true. If the key = “IT”, then the node return false. ### Map | Contains Value ![](/files/HoVaP2Vuv1xs7jOkr7fK) This node checks if the provided value is present in the map. For example, Input map: {"CSE": "atul"}, value: "atul" Output: true Input map: {"CSE": "atul"}, value: "ashutosh" Output: false ### Map | Is Empty ![](/files/TtnfwelURTiyKZAUVLWe) This node checks if the provided map is empty or not if empty then it return true, if not then it returns false. For example,Input map: {} Output: true Input map: {"CSE": "atul"} Output: false \[because map consists of some value ]. ### Map | Length ![](/files/Mf9WS1WHyurlzEdOUZrE) This node calculates the number of key-value pairs in the map. For example,Input map: {"CSE": "atul", "IT": "ashutosh"} Output length: 2 \[because two key-values pairs are present]. ### Map | Add Key Value ![](/files/mAmAlkaJLNmKmi4uXE7d) This node adds a new key-value pair to the map to the existing map. For example,Input map: {"CSE": "atul"}, key: "IT", value: "ashutosh" Output map: {"CSE": "atul", "IT": "ashutosh"} ### Map | Add Multiple Key Value This node helps you to add multiple key-value pairs in a single go, this node returns the updated mao with all the newly added key-value pairs. For example, Input map: {"atul": "chaudhary"}, keys: "sahaj", "ashutosh", values: "rana", "agarwal" Output map: {"atul": "chaudhary", "sahaj": "rana", "ashutosh": "agarwal"} ### Map | Get Value ![](/files/LQCBUVToM7jKiYR0kZTC) This node retrieves the value associated with a specified key from the map. For example, Input map: {"CSE": "atul"}, key: "CSE" Output value: "atul" ### Map | Get All Keys ![](/files/WOS3mr23EYYBdfwxmmNS) This node retrieves all the keys present in the map. For example, Input map: {"CSE": "atul", "IT": "ashutosh"} Output keys: \["CSE", "IT"] ### Map | Get All Values ![](/files/vOzb5vBtgj5Gpz01dAeG) This node retrieves all the values present in the map. For example, Input map: {"CSE": "atul", "IT": "ashutosh"} Output values: \["atul", "ashutosh"] If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # String Nodes Use string nodes in Blup for text operations and manipulations within your application's logic. ![](/files/Z1CELRljOiUIV8Kgdfkk) This sub-section consists of all the helper functions related to strings. ### String | Split ![](/files/ZNviYZJnmYcLdERzPEBv) This node splits the string at matches of a pattern and returns a list of substrings. It finds all the matches of the pattern in the string and returns the list of substrings between the matches. For example If the value in string node is = "Hello world!" and Pattern value = “ ” Then it returns the list consisting of \['Hello', 'world!']; ### String | ToLowerCase ![](/files/zyUo44U5SZ2LvwEP3Rc7) This node converts all characters in the string to lowercase. ### String | ToUpperCase ![](/files/Ro5gZ5RLcmCbF4uIAAX0) This node converts all characters in the string to uppercase. ### String | Trim ![](/files/TaXQWpBbSGpoC26CVr2o) This node returns the string without any leading and trailing whitespace. It removes leading and trailing whitespace from the string. For example, if the string provided is “ Dart is fun ” this node return “Dart is fun”. ### String | Replace All ![](/files/lPx23cbYHFRNxLWk8L1w) This node replaces all substrings that match a specified pattern with a replacement string. For example, if the string provided is “resume” and the pattern is “e” and replaces it with is “E” then it returns “rEsumE” as result. ### String | SubString ![](/files/d0MGlEgTExFHyDVTyMA0) This node helps you get a portion of the provided string by specifying start and end indices. Note Indexing in a string starts from 0 instead of 1. For example, strings “hello World” and you wanted to get only “hello” from the string you can pass start index is 0 and end index is 5 \[instead of 4 because end index is not included]. ### String | Replace Range ![](/files/MktCtw6tAMoF0Bqq0Enr) This node replaces a portion of the string with a new provided string, specified by start and end indices. {% hint style="info" %} Note: Indexing in a string starts from 0 instead of 1. {% endhint %} For example, you have a string Hello World” and you wanted to replace it with “Hey World” so you can pass start index is 0 and end index is 5 \[instead of 4 because end index is not included], and replace String is “Hey”, then this node return “Hey World”. ### String | Concat ![](/files/FqpV0yHWgjSWKNTOISVm) This node combines two strings into a single string. For example, string1 is ”Hello” and String2 is “World”, then it returns “HelloWorld”, To give space between both of the pass string 2 as ” World” \[with space] in beginning], then it returns “Hello world”. ### String | Contains ![](/files/2GGrmyNduLC8brUrRxmm) This node checks whether a given word or substring is present in the string and returns 'true' if it exists, otherwise 'false'. ### String | Equal ![](/files/t2pwbNotC0jxHZCcYKhu) This node checks whether two strings are equal or not and returns 'true' if they are equal, otherwise 'false'. For example, string1 = "hello" and string2 = "hello" ,it return true. ### String | IsEmpty ![](/files/AgeMgbHFj0Gl5FpHJ4cq) This node checks whether the provided string is empty (including blank spaces) and returns 'true' if it is empty, otherwise 'false'. For example, if provided string ="", this node will return true. {% hint style="info" %} Note: This node returns true even if the provided string only contains blank space with out any character. {% endhint %} ### String | ToString ![](/files/UJf796sg8qkosSrIQeuw) This node converts other variables and collections like lists or maps into a string. ### String | Length ![](/files/3daciK69JkjNi8upWaKI) This node returns the length of the provided string, indicating how many characters it contains. For example, the string is “Hello” – length is 5. ### String | Index Of ![](/files/pTfA4Sk68QHgo3awh2Kw) This node helps you find out the index of a character or substring present in the provided string. It returns the index of the first occurrence of that character or substring. {% hint style="info" %} Note - index starts from 0 in string. {% endhint %} For example, String = “resume” and character = “e”, node will return 1 \[index of first “e” in the string]. ### String | Last Index Of ![](/files/SbmnCNZPsUdLeubhS4V9) This node helps you find out the index of the last character or substring present in the provided string. If the string consists of multiple occurrences of the same character or substring, it returns the index of the last occurrence. If no matching character is present in the provided string the node return -1. If the string consists of only a single character then this node works like the index of node and return the index of the first occurrence of character. For example, string = “resume” pattern is “e” Result = 5 \[index of last “e” is 5]. ### String | Json to String ![](/files/Jn90osvyp3qg2IBy763l) This node converts the JSON \[Javascript Object Notion] into the string. This node is mostly used when you are dealing with JSON responses from any web server, in such cases, you need to convert the JSON into a string. ### String | String to JSON ![](/files/9rguKLSExYP4iH5NIFu5) This node helps to convert the string into JSON \[Javascript object notion], similar to the above node, this node is also used when you are dealing with responses from web servers, so in such scenarios, you need to convert the JSON into the string. ### String | Parse String To ![](/files/hCDmrqpDLGCy7JQUx9PA) This node converts variables like integers, doubles, or Booleans values back to strings. For example, integer = 10 is convert into string = “10”, or Boolean = true is converted into “true”. ### String | Compare To ![](/files/eNcEXlENHOuyLSMxWAP5) This node returns an integer representing the relationship between two strings: 0 − if the strings are equal. 1 − if the first string is greater than the second -1 − if the first string is smaller than the second ### String | Ends With ![](/files/AhOPR7YrcvoHTPm7svCd) This node returns 'true' if the provided string ends with a particular substring, otherwise 'false'. for example 1. string = “hello” pattern = “llo” , result = true; 2. string “hello” pattern =”e” , result = false. ### String | Starts With ![](/files/f5YBbRuSwgzwt66q1Thj) This node returns 'true' if the provided string starts with a particular substring, otherwise 'false'. for example string = “hello” pattern = “hel” , result = true. string “hello” pattern =”yo” , result = false. ### String | Trim Left ![](/files/iuxXt6IlhsoAEJD86kzI) This node returns the string without any leading whitespace on the left. For example 1\. Input =” Hello” Output = “Hello”. 2\. Input =” Resume ”, Output = “Resume ”. ### String | Trim Right ![](/files/yoDKjD9Gz8ozyPWQ7WAc) This node returns the string without any trailing whitespace on the right. For example 1\. Input =”Hello ” Output = “Hello”. 2\. Input =” Resume ”, Output = “ Resume”. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Variables Node Section Manage application variables efficiently in Blup with the Variables Node Section. The nodes in this section are used to store/hold some data. you can find all the literal nodes like string \[for storing the sequence of characters], double \[for storing the decimal number], integer \[for storing the whole numbers]. ![](/files/3RKtB6pujZUoVBnzNfsv) ### Common Functionality In All Variables Nodes **1.** **Input node point –** This node point is used to give the data dynamically instead of hardcoding them into the node. **2.** **Output node point –** This node point is used to get the output or data you have entered or given through the input node point. **3.** **Use Run trigger checkbox –** When you check this checkbox you will see that two new function node points will appear in the node one on the top left and one on the top right side. * Run function node point On Left– this node point helps you to run the node on an event like on-click of a button. * Run function node point on Right– this node point helps you to run your other logic after the current logic end has ended. For example, with one click of a button you want to assign data to a string node from the string node, and after the assignment of data you want to upload a file to the link present in the string node this run trigger help you out in such scenarios. * Call set-state checkbox – this checkbox helps you with refreshing your UI, once your node is being called by some other node. **4.** **Make me global functionality** – this checkbox helps you to make the node be available globally, which mean that you can use this data present in the node in other tabs also. {% hint style="info" %} Note: To get this data in other tabs, you can use Page| get global var node present in function section in arsenal or directly search it in the search box. {% endhint %} **5.** **Menu for other variables** - From this menu, you can select various types of variables according to your needs. Below are the details of each node:
String NodeThis node is used to define text strings. You can input text directly into the node or use an input node point. Additionally, you can enable the multi-line checkbox to input multi-line text.
Integer NodeThis node defines whole numbers without decimal points, such as 20, 25, 36, etc. You can input values directly into the node or use an input node point.
Double NodeThe Double Node is for defining numbers with decimal points, like 10.20, 20.35, etc. Similar to other variable nodes, you can input values directly or use an input node point.
Boolean NodeBoolean values are either true or false. This node accepts such values. You can toggle the checkbox to set the value as true or false, or use an input node point.
List NodeThis node helps you define a collection of elements in an ordered manner. These elements can be of any type, such as integers or strings. For instance, you can have a list of integers containing multiple integer values or a list of strings containing multiple string values.
Map NodeThis node assists in defining a collection of key-value pairs, where each key is a unique element and each value is the data associated with that key.
Color NodeThis node helps you to define a colour, to define a colour through this node just click on input [white colour], you can pick a colour by using the eyedropper, entering the hex code or from manually adjusting the RGB scroller and selecting the appropriate saturation and lighting.
Icon NodeThis node helps you to add an icon. To Add the icon click on the add button present in the center of the node and select the icon of your choice from the list to provide or you can directly search for any icon with a name through the search input box provided.
Date Time Node

This node is used to define a date or time, this node is very useful when you are dealing with data that is bounded by some date or time.

This node can be used in three ways

  1. Date only- This option helps you to define date only.
  2. Time only – This option helps you to define time only.
  3. Date and Time - This option helps you to define both date and time.
Duration Node

This node is used to define the duration in terms of days, hours and minutes. This node can be used in many situations like when you want an event or any trigger to happen after some time.

To define the duration just get the duration node from the variables section in the arsenal or you can directly search by name. As you open the node you will see an input box, when you click on that input box a dialog box will show up and then you can give appropriate values according to your requirements, it can accept the duration from the input node point also.

If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Function Node Section Implement and manage custom functions in Blup to enhance your application's logic. All the nodes that help you achieve some functionality are present under this section for example upload files, authentication, payments etc. Now, Let's go over each node in this section. ![](/files/TTk1SYFuv4Ibmsq4Asol) ## Function Node ![](/files/f1OjurxajkNbUlZPiOZN) This function node generator allows you to create custom functions with dynamic input arguments. You can add input parameters by clicking the "Add Input" button, which creates input nodes. These input nodes represent the arguments that the function takes. Once you've added input nodes, you can use them within the function's body. This tool is particularly useful when combined with other function nodes, allowing you to create versatile and tailored functions for various purposes. While the node itself may seem basic, its power lies in its ability to create flexible and customizable functions tailored to specific requirements or tasks. ## File Picker Node ![](/files/0T0d212l4gR91SdF3QMs) This node facilitates the selection of files from your device. For instance, if you want to choose an image from your phone's gallery, this node allows you to do so effortlessly. You can specify the type of file you want to pick from your device. Additionally, if you need to select multiple files simultaneously, you can enable the "Allow multiple files" option located at the bottom of the node. ### How to Use File Picker Node **Step1:** In Blup Logics, navigate to the arsenal and select the "File Picker" node. **Step2:** Choose the type of file you wish to select. For example, if you're selecting images, pick the "Images Only" option from the dropdown list. **Step3**: To obtain the desired output, such as file path or file name, click on the "OnFilePicked" output node and stretch it. Upon releasing, a function node will be generated containing output nodes like file type, file name, and file path. To trigger the file picker node when a button is clicked, simply connect the "OnClick" node to the appropriate input node for running the process. {% hint style="info" %} Note: If you want to allow users to select multiple files, check the "Allow multiple files" checkbox located at the bottom of the node. {% endhint %} ## File Uploader To BSS Node ![](/files/yFdF7ySMhIFQUhBvhNyR) This node facilitates the exclusive uploading of files (of any type) to the Blupsheets database. If you need to upload files to servers, consider using the TUS file uploader node instead. Typically, this node is paired with the file picker node. First, use the file picker node to select the desired file from your device storage. Then, click the upload button to transfer the selected file to the Blupsheets database. This workflow provides a straightforward method for uploading files to the Blupsheets database, allowing seamless integration with other nodes for various tasks. ### Components Of Node | Component | Description | | ------------------------ | --------------------------------------------------------------------- | | **Run input node point** | Starting point for the node's functionality. | | **List of File paths** | Takes a list of file paths to be uploaded to the Blupsheets database. | | **OnUploadSuccess()** | Executes logic upon successful file upload. | | **OnUploadingFailuire** | Executes logic if the file upload fails. | | **OnUploading** | Executes logic while the file is being uploaded to the database. | {% hint style="info" %} Note: To get an additional output node point it needs to be stretched. {% endhint %} ### How to Use File Uploader To BSS Node **Step 1:** Get the file uploader BSS node from the arsenal panel in blup logics. **Step 2:** Provide the run trigger from where you want to run the node functionality in your case that can be on click of a button or we can bind this node with the file picker node. **Step 3:** Provide the second input which is a list of file paths for which, if you directly know the file paths you can provide the list of file paths or you can use the file picker node for this. **Step 4:** To get the download URL of the file uploaded you need to stretch the onUploadsucces output node point, as soon as you do it you can see a new function node is generated which consist of a list of download URL. {% hint style="info" %} **Note: If you want to perform some functionality if uploads fail can use the OnUploadFailure output node point** {% endhint %} Similarly, if you require logic execution while the file is being uploaded, use the OnUploading output node, which also provides additional node points like progress or current index. ## TUS File Uploader Node ![](/files/0bbZHQeY4iaar3PpvOEw) The functionality of this node is similar to the File Uploader BSS node, with the key difference being that it allows you to upload files to any location, such as your own server. ### Components of file Uploader node to BSS | Component | Description | | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | **Run input node point** | It initiates the node's functionality. | | **List of File paths** | Takes a list of file paths to be uploaded. | | **Upload to Url** | Provides the URL where you want to upload your file, such as the endpoint to your server. | | **OnUploadSuccess()** | Executes logic when the upload is successfully completed. Stretching this node generates additional output nodes, like download URLs for files. | | **OnUploadingFailuire()** | Executes logic if the upload fails. Stretching this node generates additional output nodes. | | **OnUploading()** | Executes logic while the data is being uploaded. Stretching this node generates additional output nodes. | ## Shared Preferences Sub-Section This sub-section provides nodes for storing data (key-value pairs) in system memory. Data stored through these nodes persists even if the user closes your app. ### SPF| Store Data node ![](/files/egZJVAlUku4tMBXVnztR) This node allows you to store key-value pairs in system memory, ensuring preservation even if the user closes or removes the app from the background. #### Components of Node. | Component | Description | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Dropdown Menu** | Used to define the type of values to be stored with the key. For instance, selecting "Strings" from the dropdown indicates that strings will be stored as values along with the key. | | **Key node point** | Provides the key, acting as a unique identifier for storing values. The key must be unique and can accept unique strings. | | **Values Node Point** | Allows you to provide the value associated with the key. | | **Use run trigger Checkbox** | Enables adding a run trigger to the node. | ### SPF| Get Data Node ![](/files/ujhu2ECyAOFWjgoOL47M) This node, as the name suggests, retrieves the data (key-value pairs) stored in system memory using the SPF | Store Data node. #### Components of Node. | Component | Description | | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Dropdown Menu** | Used to specify the type of values stored along with the key. For instance, selecting "Strings" from the dropdown indicates that strings are stored as values with the key. | | **Key node point** | Provides the key, acting as a unique identifier for the stored values. The key must be unique. | | **Use run trigger Checkbox** | Allows adding a run trigger to the node. | These components facilitate the retrieval of stored data, allowing you to access key-value pairs stored in system memory with ease. ## Audio Player Sub-Section ### Audio Player | Init Node ![](/files/-MhaLg_0YyG6QYlPh9uH) This node offers an audio player functionality, enabling you to add audio songs or any audio files to your device. You can then process these audio files to the screen based on your specific functionality requirements. | Component | Description | | ------------------------ | --------------------------------------------------------------------------------------- | | **Run input node point** | It initiates the node's functionality. | | **File path** | Here you provide the file path from another node like file picker or file uploder, etc. | | **Properties** | It will show the properties of the audio. | | **On loading** | What it will show on loading | | **On Buffering** | Show the buffering. | | **On Ready** | When audio is ready. | | **On Completed** | On complition of the audio. | ### Audio Player | Props ![](/files/-MhaLg_1X_5T5ihnif5_) ## Social Sub-Section ### Social Login ![](/files/moImqxW5rklfxvYWca0q) This node provides multiple login options, allowing you to choose between logging in with Google, Facebook, or Twitter. Additionally, users can opt to save their login details for future use by enabling the "Auto Save User" feature. | Component | Description | | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Dropdown Menu** | This component enables users to select the social media platform they wish to use for login. Upon selection, the chosen social media functionality will be integrated into the application's login process. | | **Auto Save User** | Enabling this option will automatically save the user's login details for future use, streamlining the login process. | | **On Success** | This option allows users to proceed to the next node upon successful login. | | **On Failure** | If the login attempt fails, users will not be able to progress to the next node until the issue is resolved. | | **Use run trigger Checkbox** | Users can utilize this checkbox to add a run trigger to the node, enhancing its functionality. | ### Social Logout ![](/files/ovruPcueUtRMiZKfb0B5) This node provides the logout feature for your social media from the device. | Component | Description | | ------------------------ | ------------------------------------------------------------------------------------------------------------ | | **Run input node point** | It initiates the node's functionality. | | **Drop down menu** | Select the social media that you want to logout from. | | **On Success** | This option allows users to proceed to the next node upon successful login. | | **On Failure** | If the login attempt fails, users will not be able to progress to the next node until the issue is resolved. | ## Page Navigator ![](/files/ae7YiHDdBVbOKnHCdEhc) This node facilitates navigation between pages in your app, enabling seamless transitions from one page to another and providing functionality to return to the previous page. ### Components of Page Navigator | Component | Description | | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Run** | Input node point initiating the node's functionality. | | **Navigate to Dropdown Menu** | Dropdown list containing all pages in your project. Select the desired page to navigate to it. Alternatively, you can provide the page name through a node point, ensuring it exactly matches the page name. | | **Replace Current Page Checkbox** | When unchecked, navigating to another page places it on top of the current page, allowing back navigation to return to the previous page. Checking this box replaces the current page with the new page, altering back navigation behavior. | | **Add Data Checkbox** | Enables sending data when navigating between pages. Checking this box generates an "Add Data" node point, allowing attachment of any desired data to be sent to the next page. | | **Go Back Checkbox** | Navigates back to the previous page. Can only navigate back to one page. | | **Go Back Until Checkbox** | Allows navigating back multiple pages at once. Checking this box generates a dropdown menu listing all pages in the application. Select the desired page to navigate back to it. | ## Data From Page ![](/files/0liTxur9xy72N8uoMbZ1) ## Simple HTTP Node ![](/files/qdgqK5qAdaKMjZbGoOOS) This node facilitates communication with your server/API, allowing you to perform various operations such as reading, updating, or adding data. This node is very helpful in case you are managing your servers/backend. ### Components of Simple Http | Component | Description | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Run** | Input node point initiating the node's functionality. | | **HTTP Method Dropdown** | Dropdown menu enabling selection of the operation type to perform on your server/API. | | **Request URL** | Node point for providing the endpoint URL to connect with the backend service. | | **Request Header** | Input node point for providing headers for the API call. Headers contain metadata associated with each API request. | | **Request Query** | Node point that changes based on the selected dropdown value: - GET - Request Query: Passes arguments to fetch specific data. - POST - Request Body: Sends data to add to the database. - PUT - Request Body: Sends data to update the database. | | **On Response** | Output node point performing logic once the response is received from the backend. | | **On Failure** | Output node point executing logic if the request fails. | {% hint style="info" %} Note: If you want an additional node point to stretch the OnResponse node point further, you can use the function node generated which consists of an additional node point. {% endhint %} ## URI Encode Node ![](/files/OEMaeTKZrSpwJ59UQxg8) This node is utilized to encode a URI. By passing the URI you wish to encode, you'll receive the encoded URI from the result output node. **Why we encode URI** - when your URL consists of some spaces or special characters it can lead to a problem while executing the API. To avoid any such problems we use an encoding. ### Components Of Node | Component | Description | | ---------------------------- | ------------------------------------------------------------------------------------ | | **Input** | This node point accepts the URI you want to encode. | | **Use Run Trigger Checkbox** | Check this box to add a run trigger to the node. | | **Output** | Provides the result of the encoded URI that was passed through the input node point. | ## Firebase ![](/files/I9yZECuXjLqFZwiIknDU) This Firebase node allow you to connect with firebase for login, so that you can login trough firebase. | Component | Description | | ------------------------ | -------------------------------------------------------------------------------------------------------------- | | **Run input node point** | It initiates the node's functionality. | | **Login provider** | Here you need to provide the login service. | | **Auth Credentials** | Add Credentials of the firebase trough this point. | | **On Sign In Success** | This option allows users to proceed to the next node upon successful Sign In. | | **On Sign In Failure** | If the Sign In attempt fails, users will not be able to progress to the next node until the issue is resolved. | ## Firebase Sign Up ![](/files/PzGq0K9XUXwUvg47BTyG) This Firebase Signup node allows you to connect with Firebase for authentication, enabling users to sign up with Firebase. | Component | Description | | ------------------------ | ----------------------------------------------------------------------- | | **DropDown Menu** | Select the signup method from dropdown: Email/Password or Phone Number. | | **Setting Icon** | Click on setting icon to upload the google-service.json file. | | **Username** | Take Input field for the username. | | **User Email** | Take Input field for the user email. | | **User Password** | Take Input field for the user password. | | **On Success** | Proceed to the next step if signup is successful. | | **On Failure** | Remain on the current step if signup fails until the issue is resolved. | | **Run Trigger Checkbox** | Enable to add a run trigger to the node. | {% hint style="info" %} Note: To learn about google-service.json and how to obtain it, [Click here](https://firebase.google.com/docs/android/setup) . {% endhint %} ## Firebase Verify ![](/files/VPxIEhGq4y3mrHPihFrV) This Firebase Verify node allows you to connect with Firebase for authentication. | Component | Description | | ------------------------ | ----------------------------------------------------------------------- | | **DropDown Menu** | Select the verify method from dropdown: Email/Password or Phone Number. | | **On Success** | Proceed to the next step if verify is successful. | | **On Failure** | Remain on the current step if verify fails until the issue is resolved. | | **Run Trigger Checkbox** | Enable to add a run trigger to the node. | ## Firebase Sign In ![](/files/9eOqYvp1n46HUSZGvgpP) This Firebase SignIn node allows you to connect with Firebase for authentication and sign in using Firebase. | Component | Description | | ------------------------ | ----------------------------------------------------------------------- | | **DropDown Menu** | Select the signin method from dropdown: Email/Password. | | **Setting Icon** | Click on setting icon to upload the google-service.json file. | | **User Email** | Take Input field for the user email. | | **User Password** | Take Input field for the user password. | | **On Success** | Proceed to the next step if SignIn is successful. | | **On Failure** | Remain on the current step if SignIn fails until the issue is resolved. | | **Run Trigger Checkbox** | Enable to add a run trigger to the node. | ## Firebase Sign Out ![](/files/o8XU6gu1n3LZkCoAqRNR) This Firebase Sign Out node enables you to sign out using Firebase Service. | Component | Description | | ------------------------ | ------------------------------------------------------------------------- | | **DropDown Menu** | Select the Sign Out method from dropdown: Email/Password or Phone Number. | | **On Success** | Proceed to the next step if Sign Out is successful. | | **On Failure** | Remain on the current step if Sign Out fails until the issue is resolved. | | **Run Trigger Checkbox** | Enable to add a run trigger to the node. | ## Firebase Current User ![](/files/qaqkM7rS5VghQE4Va5Zr) Firebase current user node will refers to the authenticated user who is currently signed in to your application. | Component | Description | | ------------------------ | ----------------------------------------------------------------------------- | | **DropDown Menu** | Select the Sign Out method from dropdown: Email/Password. | | **On Success** | Proceed to the next step if it get current user is successful. | | **On Failure** | Remain on the current step if current user fails until the issue is resolved. | | **Run Trigger Checkbox** | Enable to add a run trigger to the node. | ## Payments ![](/files/qWXwGOtlde4vtIHZAkRY) This node allow you to use the payment functionality through it So that you can accept the payments on your device. | Component | Description | | ------------------- | -------------------------------------------------------------------------------------------------------------- | | **Dropdown Menu** | Select which payment service you want to use for your application | | **Api Key** | Add the Api key that you get from that payment service. | | **Secret Key** | Add Secret key so for the security. | | **Payment Methods** | Use payment that you want to use in your application like, online paymetn, Upi or something else. | | **On Success** | This option allows users to proceed to the next node upon successful Payment. | | **On Failure** | If the Payment attempt fails, users will not be able to progress to the next node until the issue is resolved. | ## Share Node ![](/files/QXiNT9SP32tfLzRmE3xv) This node is used to share files with other apps. | Component | Description | | ------------------------ | ------------------------------------------------------------------------------- | | **Run input node point** | It initiates the node's functionality. | | **Text** | Put the text you want to display. | | **File paths** | Show you the path of the file. | | **Mime Types** | It indicates the nature and format of a document, file, or assortment of bytes. | ## Comment Node ![](/files/mG9TulqTt5B4SNaEKZhQ) This node is used for putting any short note or a simple piece of information. To put a note in the node just use the Input box provided in the node and drag anywhere in the blup lightning. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Maths Node Section Learn to implement and use mathematical nodes in Blup for performing various calculations in your app's logic. ## Maths Section The Maths section of this tool provides various nodes designed to perform arithmetic operations on different types of variables such as integers, doubles, and durations. Let's explore each node in detail. ![](/files/39tmVfgampMxetggHp7O) ## SuperMaths | Int Node ![](/files/yqZNmYjiuHusRsmgoUXR) This node is used to perform arithmetic operations like addition, subtraction, multiplication, division and many more operations on integers \[which do not have a decimal point]. ### Components Of Node
Operation TypeThis menu allows you to specify the arithmetic operation you wish to perform on integer numbers. For instance, if you intend to perform division, select "division" from the drop-down menu.
"A" node pointInput for the first integer number.
"B" Node PointInput for the second integer number.
Use Run TriggerCheckbox to add a run trigger to the node.
ResultsOutput providing the result of the arithmetic operation.
## SuperMaths | Double Node ![](/files/F2e5bpGNUdeQuhTRmTQZ) This node is used to perform arithmetic operations like addition, subtraction, multiplication, division and many more operations on double numbers \[which have a decimal point]. ### Components Of Node
Operation TypeThis menu allows you to specify the arithmetic operation you wish to perform on numbers. For instance, if you intend to perform addition, select "addition" from the drop-down menu.
"A" node pointInput for the first decimal number.
"B" Node PointInput for the second decimal number.
Use Run TriggerCheckbox to add a run trigger to the node.
ResultsOutput providing the result of the arithmetic operation.
## SuperMaths | Duration Node ![](/files/K4iUM5m0YREkd7poQFhW) This node is used to perform arithmetic operations like addition, subtraction, multiplication adn division on Duration. For example, you want to add 6 hours 32 mins and 10 hours 25 min such types of arithmetic operations can be performed with this node. ### Components Of Node
Operation TypeThis menu allows you to specify the arithmetic operation you wish to perform on the duration. For instance, if you intend to perform subtraction, select "subtraction" from the drop-down menu.
"A" node pointInput for the first duration.
"B" Node PointInput for the second duration.
Use Run TriggerAdds a run trigger to the node if checked.
ResultsOutput providing the result of the arithmetic operation.
If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Flow Control Section Understand and utilize flow control nodes in Blup to manage the flow and execution of your application's logic. ## Flow Control ![](/files/bI4aF1326ZUVHQV7edP3) This section consists of nodes that help you to control the flow of execution of the program. ## If-else Node ![](/files/fHgZNqk89da913IxGQnT) This node is one of the most widely used node, this node can be used to divert the flow of execution according to whether the criteria specified by you is satisfied or not. ### Components of Nodes.
RunThis input node point acts as a starting point for the node.
ConditionThis input node point help to define the condition based on which you want to change the flow of the program Note you can also used the input box below the node point to directly input the condition instead of giving it through the program.
TrueThis output node point help you to execute certain logic if the condition provides is true.
FalseThis output node point helps you to execute certain logic if the condition provided is false.
## For Loop Node ![](/files/jE6YBa0XQZFyjxWb9ytL) This node helps to perform some logic repeatedly. ### Components of for Loop
RunThis input node point acts as a starting point for the node.
FirstThis input node point helps you to provide the starting value \[starting value is an initial value given to loop]. You can also use the input box provided to give the first value for the node.
LastThis input node point helps you to provide the starting value [starting value is an initial value given to loop]. Similar to the first node point, you can also use to input box provided to give the first value for the node.
Use Step in Loop iteratorIf you check this checkbox, then a new step node point is generated which helps to add the step size.
ExitThis output node point helps you to define the logic you want to execute after the loop execution is finished.
BodyAll the logic that you want to execute repeatedly comes under this node point.
{% hint style="info" %} Note: The starting value is always smaller than the final value. {% endhint %} ## While Loop Node ![](/files/JHAT1NTXEbbi6kIM5L8T) This node is very similar to the for loop, it helps you to execute some logic repeatedly. The major difference between the for loop and while is that in while loop we don’t know how many times the loop will run but we can specify a terminating condition\[a condition which halts the execution of the loop]. ### Components of while Loop
RunThis input node point acts as a starting point for the node.
ConditionThis input node point helps you to provide the condition which helps you to start the execution of the loop.
ExitThis output node point helps you to define and logic that you want to execute after the loop execution is finished.
BodyAll the logic that you want to execute repeatedly comes under this node point.
If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Relational Operators Section Use relational operators in Blup to compare values and make decisions based on those comparisons. ![](/files/APNTlz3ZIrJm4DuvJZjn) ## Relational Operator Section Relational operator nodes exist for three types of variable nodes: **1.** **Integer relational operators.** **2.** **Double relational operators.** **3.** **Duration relational operators.** ## Integer Relational Operator Sub-Section In this sub-section, nodes facilitating relational comparison between integer numbers are presented. ![](/files/mufsknde2amuLAtzCsXO) ### Int | Greater than This node compares two integer numbers and returns true if the first number (A) is greater than the second number (B). ![](/files/77tOPrQiHmc9ov9ji7Kl) #### Components of Greater than | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first integer number (A). | | **B** | Input node providing the second integer number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A > B** | Output node providing the result of the comparison in Boolean. | ### Int | Greater than or Equal To This node performs a greater than or equal to comparison between two integer numbers (A & B). ![](/files/AhhXz17UjqPDL6G5FeDS) #### Components of Greater than or Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first integer number (A). | | **B** | Input node providing the second integer number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A >= B** | Output node providing the result of the comparison in Boolean. | ### Int | Less than This node compares two integer numbers and returns true if the first number (A) is less than the second number (B). ![](/files/dwQBApjQkhNFuqFNtPZ3) #### Components of Less Than | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first integer number (A). | | **B** | Input node providing the second integer number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A < B** | Output node providing the result of the comparison in Boolean. | ### Int | Less than or Equal To This node performs a less than or equal to comparison between two integer numbers (A & B). ![](/files/8oOboOIDegGFy0SQ3KPU) #### Components of Less than or Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first integer number (A). | | **B** | Input node providing the second integer number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A <= B** | Output node providing the result of the comparison in Boolean. | ### Int | Is Equal To This node checks whether two integer numbers (A & B) are equal. ![](/files/D2z73e6TtPhkzgN0coA1) #### Components of Is Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first integer number (A). | | **B** | Input node providing the second integer number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A == B** | Output node providing the result of the comparison in Boolean. | ### Int | Not Equal To This node checks whether two integer numbers (A & B) are not equal. ![](/files/LLXcEd5vpreaeYRthS5x) #### Components of Not Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first integer number (A). | | **B** | Input node providing the second integer number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A != B** | Output node providing the result of the comparison in Boolean. | ## Double Relational Operator Sub-Section ![](/files/itdHLuHkSjyUogxfgJdL) ### Double | Greater than This node compares two decimal numbers and returns true if the first number (A) is greater than the second number (B). ![](/files/8cz5cBiR9l9JO8DjySe5) #### Components of Greater than | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first decimal number (A). | | **B** | Input node providing the second decimal number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A > B** | Output node providing the result of the comparison in Boolean. | ### Double | Greater than or Equal To This node performs a greater than or equal to comparison between two decimal numbers (A & B). ![](/files/S9P1dYHhyrHYyPaYBLQS) #### Components of Greater than or Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first decimal number (A). | | **B** | Input node providing the second decimal number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A >= B** | Output node providing the result of the comparison in Boolean. | ### Double | Less than This node compares two decimal numbers and returns true if the first number (A) is less than the second number (B). ![](/files/WSXKX7mAseQ8vAKCusov) #### Components of Less Than | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first decimal number (A). | | **B** | Input node providing the second decimal number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A < B** | Output node providing the result of the comparison in Boolean. | ### Double | Less than or Equal To This node performs a less than or equal to comparison between two decimal numbers (A & B). ![](/files/vTmgWBV3hKc78ekufKLh) #### Components of Less than or Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first decimal number (A). | | **B** | Input node providing the second decimal number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A <= B** | Output node providing the result of the comparison in Boolean. | ### Double | Is Equal To This node checks whether two decimal numbers (A & B) are equal. ![](/files/NwwmpH3DHE8bFIh0AgvF) #### Components of Is Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first decimal number (A). | | **B** | Input node providing the second decimal number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A == B** | Output node providing the result of the comparison in Boolean. | ### Double | Not Equal To This node checks whether two decimal numbers (A & B) are not equal. ![](/files/ldno6v8ZhDXrEB4It0xW) #### Components of Not Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first decimal number (A). | | **B** | Input node providing the second decimal number (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A != B** | Output node providing the result of the comparison in Boolean. | ## Duration Relational Operator Sub-Section ![](/files/h3rhWCRq4Vuuc2dbRyIx) ### Duration | Greater than This node compares two durations and returns true if the first duration (A) is greater than the second duration (B). ![](/files/jXnUc6e1D5ulZw7qNdWK) #### Components of Greater than | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first duration (A) | | **B** | Input node providing the second duration (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A > B** | Output node providing the result of the comparison in Boolean. | ### Duration | Greater than or Equal To This node performs a greater than or equal to comparison between two durations (A & B). ![](/files/QUfFc9eVnGN0PrYt2nZr) #### Components of Greater than or Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first duration (A) | | **B** | Input node providing the second duration (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A >= B** | Output node providing the result of the comparison in Boolean. | ### Duration | Less than This node compares two durations and returns true if the first duration (A) is less than the second duration (B). ![](/files/Xv86HVbyqzHV1wGAXF1R) #### Components of Less Than | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first duration (A) | | **B** | Input node providing the second duration (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A < B** | Output node providing the result of the comparison in Boolean. | ### Duration | Less than or Equal To This node performs a less than or equal to comparison between two durations (A & B). ![](/files/V5mgo6BVpY9dBb27DlIz) #### Components of Less than or Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first duration (A) | | **B** | Input node providing the second duration (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A <= B** | Output node providing the result of the comparison in Boolean. | ### Duration | Is Equal To This node checks whether two durations (A & B) are equal. ![](/files/U1tuQi4aBQuUA5cERMUw) #### Components of Is Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first duration (A) | | **B** | Input node providing the second duration (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A == B** | Output node providing the result of the comparison in Boolean. | ### Duration | Not Equal To This node checks whether two durations (A & B) are not equal. ![](/files/3rpTu2UEy8fBmSKojjjh) #### Components of Not Equal To | Component | Description | | ------------------- | -------------------------------------------------------------- | | **A** | Input node providing the first duration (A) | | **B** | Input node providing the second duration (B). | | **Use Run Trigger** | Checkbox to generate a run trigger in the node. | | **A != B** | Output node providing the result of the comparison in Boolean. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Logical Operators Section Implement logical operators in Blup to perform logical operations and control your app's behavior. ![](/files/neV9raoFU63GFV4ZUSYp) ## Logical Operator Nodes This section encompasses all nodes for logical comparisons between values. There are three major logical operators in Blup: 1. **AND**: Returns true if both provided values are true. For example: `X<5 AND X<10`. 2. **OR**: Returns true if any of the provided values is true. For example: `X<40 OR X<50`. 3. **NOT**: Inverts the provided value. For example, if true is provided, it returns false and vice versa. ## AND Node This node facilitates the implementation of logical AND between two boolean values. It returns true only if both provided values are true; otherwise, it returns false. ![](/files/1NZhiQ252oxOa0kidYnt) ### Components of Node | Component | Description | | ------------------- | ---------------------------------------------------------------------------------------------------- | | **A** | Input node point for the first boolean value. | | **B** | Input node point for the second boolean value. | | **Use Run Trigger** | Checkbox to add a run function node point to the node. Checking this box displays the function node. | ## OR Node This node implements logical OR between two boolean values. It returns true if either A or B is true; otherwise, it returns false. ![](/files/LMofWnrXjfQxo42aI9Es) ### Components of Node | Component | Description | | ------------------- | ---------------------------------------------------------------------------------------------------- | | **A** | Input node point for the first boolean value. | | **B** | Input node point for the second boolean value. | | **Use Run Trigger** | Checkbox to add a run function node point to the node. Checking this box displays the function node. | | **A OR B** | Output node providing the result. | ## NOT Node This node applies logical NOT to a provided boolean value. It negates the provided value, returning true if the provided value is false, and false if it is true. ![](/files/rhnXcvyNZdkpqBpPPpo9) ### Components of Node | Component | Description | | ------------------- | ---------------------------------------------------------------------------------------------------- | | **A** | Input node point for the boolean value. | | **Use Run Trigger** | Checkbox to add a run function node point to the node. Checking this box displays the function node. | | **NOT A** | Output node providing the result. | If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # System Node Section Integrate system nodes in Blup to manage system-level operations and interactions within your application. ![](/files/mQBtgk1tpeJpOGpZZrLB) ## System Nodes This section comprises nodes providing essential system functionalities, such as accessing global variables and printing debug information. Let's explore each node in this section one by one. ![](/files/KHE6Zn7xndAyGKMcoGeh) ## Page | Init State Node ![](/files/g5KF4eVnD8ydOmhweYNj) This node allows you to execute logic during the initialization state in Flutter. The initState method runs only once before the user interface (UI) is rendered, making it perfect for pre-rendering logic. This node only consists of one output node point that is on Init State which helps to attach any logic. ## Page | Build Widget Node ![](/files/Rx0Db0qRU6k7A4a2JcGh) The Build Widget node enables you to execute logic while the UI is being built in Flutter. This method is responsible for constructing the visible UI on the screen, making it suitable for executing logic during UI construction. This node also consists of one output node point to which you can attach any logic which you to execute when your UI is being built. ## Page | Build Context Node ![](/files/iziOHLzgNrgWY6I9Womr) Build Context represents the location of a widget in the widget tree. It allows widgets to find and interact with other widgets in the tree, such as accessing theme data or navigating to different screens. This node only consists of one output node point that is on Build context which helps to attach to other widgets. ## Page | State Node ![](/files/dbV5kUVgJyi3QDPivLo5) State represents the mutable data of a widget. It allows widgets to manage their internal state and respond to changes, such as user interactions or data updates. StatefulWidget is a Flutter widget that has mutable state, while StatelessWidget is a widget that does not have state and remains immutable. This node only consists of one output node point that is on State which helps to attach any logic. ## Page | Dispose Node ![](/files/nucBvwNQyD3B6aXgEuyB) Use the Dispose Node in Flutter to release resources or reset variable values when an object is no longer focused or has been destroyed. It helps in freeing up resources associated with the object. This node only consists of one output node to which you can attach logic which executes when your object is removed from focus and frees up the resources. ## Page | Set State Node ![](/files/CLS1L5SOqGTVmUXOv6jT) In Flutter, the Set State Node allows you to rebuild the UI with changes. It triggers a UI rebuild when there are updates to variables or other elements that affect UI appearance. For example:– if you have changed the value of variables which is already present on the UI the changes won't be reflected in the device till the set state is called. This node only consists of a run input node point which can be attached with any function node point where you want to rebuild the UI. ## Page | Get/Set Local Variable in Blup ![](/files/NJdCK7Li2yftTWpJbkpK) ### What is the use of Get And Set Local Variable The terms "Get" and "Set" are commonly used in the context of managing the state of a widget. **Get:** To retrieve or access the value of a local variable within a screen, you simply use its name. **Set:** To update the value of a local variable within a screen, you typically use a function or method, often triggered by user interaction. ### How to use Get And Set Local Variable. To use a Get and Set local variable in a Flutter screen: 1\. **Set the Value**: You first set a value to a variable within the screen. This means you assign a value to a variable, typically in response to some action or event on the screen. 2\. **Get the Value**: Once you've set the value, you can then retrieve or access that value within the same screen. This allows you to use or display the value elsewhere in the screen based on your needs. ## Page | Get Global Var Node ![](/files/v2cOXViRJ8UqiRosOMP4) The Get Global Variable Node retrieves global data set by making a variable global in Flutter. Global variables facilitate data transfer between different parts of your app, making it easier to manage state. You can consume the value on the same page as well, as soon as you create any variable node global by checking the make me global checkbox, it is reflected in the Page | Get global. ### How to use Get Global Var Node: ![](/files/2X9CGLRtuffQogqMwIw8) First, declare your variable in one page to make it global. Then, in any other page, use the "get global" node to access that variable. This node facilitates accessing your global variable from anywhere in your application. ### Components of Get Global Var Node
Page nameSpecifies the page name where global variables are defined. You can choose from a dropdown menu containing all pages in your project or use a node point to pass the value. The dropdown displays options only if global variables exist; otherwise, it remains empty.
Name of variablesSpecifies the name of the global variable. Similar to the Page name field, you can select from a dropdown menu or use a node point to pass the value. The dropdown displays options only if global variables exist; otherwise, it remains empty.
OutputProvides the value of the selected global variable.
## Page | Set Global Var ![](/files/YKtLvo4AfFqfQZDO0id2) Use the Set Global Variable Node in Flutter to update or set the value of global variables across different parts of your app. ### How to use Set Global Var Node: ![](/files/DNA9J62wOe94CSaB3iPn) This node serves a similar purpose to the "get global var" node, with the added capability of allowing you to both get and set your global variables according to your needs. While the "get global var" node only allows you to retrieve global variables, this node provides the flexibility to both retrieve and update them as required. ### Components of blup
Page nameThis node point helps to define the page name on which your global variables is present.
Name of variablesThis node point provides the name of variables similar to the Page name node point.
New ValueThis output node point is used to provide the new value which is replaced by the previous value present in global variables.
{% hint style="info" %} Note: You can either use the provided dropdown menu which consists of all the pages that exist in your project or you can use the node point to pass value through it. Values inside the dropdown are only available if at least one global variables are present otherwise it is not shown. {% endhint %} ## Debug | Print ![](/files/qC6ksmwBFzUeLnxqBBwh) The Debug Print Node is used to print data values to the debug console of the blup logic, aiding in debugging logic. ### Components of Node
RunThis input node point acts as a starting point for the node.
InputThis input node point provides the input data that you wanted to print in debug console.
This is one of the most widely used node. This helps you to detect what's going wrong with your logic by printing it on debug console. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # SDK Library Section Explore the SDK Library in Blup to extend your app's functionality with pre-built modules and integrations. The SDK Library provides access to a comprehensive collection of libraries and packages available on Pub.dev. These packages offer developers the opportunity to enhance their applications with additional functionality, optimizing their code and improving overall performance. ## How to Use ![](/files/pG5YTTOVmD0GPvhQEJMO) **Step1:** Navigate to the Blup Logics Terminal and Select the SDK Library(Pub.dev) from there you can choose any libraries or packages that you want to use in your application. **Step2:** Explore the list of libraries and packages available in the SDK Library. Select the ones that best suit your application's requirements. **Step3:** If the desired library or package is not listed, you can search for it on Pub.dev website. Once found, add the necessary code snippets to the "Insert Code" node in Blup Logic. **Step4:** Add the code snippet of the desired library or package from the Pub.dev website into the "Insert Code" node in Blup Logic. Then, select the appropriate method from the dropdown menu to integrate it into your application. **Step5:** After inserting the code snippet, you can seamlessly integrate the selected library or package into your application. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Blup Sheet API Node Section Utilize the Blup Sheet API to interact with data sheets programmatically and enhance your app's data management. The Blup Sheet API facilitates seamless integration between your backend and user interface (UI) components. By developing your UI and employing logical operations within Blup Logics, you can establish connections with your backend effortlessly. ## Components of Blup Sheet APIs Node. ![](/files/q7xjN2u42iioUmc9YlWo) | Component | Description | | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | | **Reload Queries** | Refreshes available queries in real-time for selection. | | **Queries Names** | Displays a dropdown of available queries' names. | | **JSON Data** | Allows integration of external JSON data into your application. | | **On Success** | This option allows users to proceed to the next node upon successful getting the data from JSON or Blup backend by queries. | | **On Failure** | If the Data loading fails, users will not be able to progress to the next node until the issue is resolved. | | **Use run trigger** | Users can utilize this checkbox to add a run trigger to the node, enhancing its functionality. | | **Realtime** | Visualizes data execution in real-time. | ## How to Use Blup Sheet APIs Node ![](/files/uW4j6FsQhGql4zHk5foa) **Step1:** Verify the existence of queries within your Blup Backend. **Step2:** After checking the queries navigate to the Blup Logics console and open Blup Sheets API. **Step3:** Locate and access the Blup Sheets API module. **Step4:** Reload queries if necessary, then choose the desired query from the dropdown list. Utilize this query within your application as needed. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Backend 🔗 Pre-built backend and sql for building apps. {% tabs %} {% tab title="Introduction" %} {% embed url="" %} Backend Introduction {% endembed %}
{% endtab %} {% tab title="Music" %} {% embed url="" %} Stream it! {% endembed %}
{% endtab %} {% endtabs %} In Blup, the Backend consists of 2 parts: 1. **Backend Bar** 2. **Backend Tab View** ### Backend Bar The backend bar consists of a switcher to switch between sheets and SQL and the right-side menu consists of a backend menu, expand/minimize backend, and close backend.

Backend bar

#### Sheets SQL Switcher This button helps you to quickly switch between the **Sheets** panel and **SQL** tab. To build the backend of your app, you need to continuously switch between the **Sheets** and the **SQL**, this is where this switch button comes in handy.
#### Expand/Minimize Backend The **expand/minimize Backend** button helps you to minimize or expand the window. This button is quite useful when you want to use more space to work with the editor or the sheets section.
#### Close Backend The **close backend** button is used to close the backend panel.

Backend - close

### Backend tab view * When Sheets is selected in the Backend bar, the backend tab view shows.

Backend - Sheets

* When SQL is selected in the Backend bar, the left side of the backend tab view shows all SQL queries created by the user and SQL query manipulation, filtering tab, and the right side of the backend tab view has an SQL editor to edit the query.

Backend - SQL

{% hint style="info" %} **Note:** You can also resize the backend panel by dragging the top of the backend panel. {% endhint %}

Backend - resize

### Music to go with. {% embed url="" %} Lofi music {% endembed %} # Sheets Sheets is a powerful GUI database designed for seamless integration with Blup. Built on AWS, Sheets ensures secure, high-availability data management for effortless use. Sheets is an advanced graphical user interface (GUI) database meticulously developed to seamlessly integrate with Blup. Crafted from the ground up, Sheets operates in tandem with Blup, facilitating smooth data management. Leveraging the robust infrastructure of Amazon Web Services (AWS), Sheets ensure top-notch security for your data. Furthermore, its architecture guarantees high availability, enabling users to effortlessly load and save data within the Sheets environment. {% hint style="info" %} Note - You can either insert the data into the database manually or you can use the Blupsheet node to insert data dynamically or the sql editor where you can write and manage your sql queries, based on the feature of the app choose whatever you like. {% endhint %} Sheets database is similar to a traditional relational database in the sense. In Sheets, we also store data in the form of a table \[rows and columns]. When you open you will see that Sheets consists of several sections, so let's go over each section one by one.
sheets

Sheets

## Sheets Top Bar This section has different options for manipulating the tables. Let's see all the options one by one. ### **Refresh Button** This button is used to refresh the current selected table. ### **Search Button** On enabling this button, a search bar will appear below the names of all the columns present in your table, where you can search the data corresponding to the data type of the column. ### **Add Table Button** This button is used to create a new table in the database, a default-named table will be created which you can modify. ### **Delete Table Button** This button is used to delete a table from the database, this button is disabled by default if no table is present. ### **Filter Button** On enabling this button, a filter option will appear on the side of all the columns present, where you can apply the filters to the data present. Filter options that are available are : * A-Z / Z-A for Text-type columns * Newest First / Oldest First for Date Time type columns * Smallest First / Largest First for Int type columns ### **Make Table Global Checkbox** On clicking this checkbox, you make your table available for your other projects which you have made from the same user ID. This feature comes in handy when you need the same database or tables for two different projects i.e. when you are making linked projects which need communication. ## Sheets Main Section This section consists of all the data stored in the table in the form of rows and columns. Here you can add columns, modify column field types, and names, or delete the column via the options dropdown present beside the name of each column. You can also add a new table from the **Add Table** button present on the rightmost side of the column list. If no table is present, an empty state will come having an option to add a new table. ### Sheets Main Section In the bottom bar or bottom section of Sheets, you can see that all the tables present in the Sheets are shown here. Also, there is an **Add button** in case you want to create a new table. {% hint style="info" %} Note – by default, there is a table present in Sheets Users table - This table consists of all the login information of the user, data gets stored in the table when the user uses the Google sign-in method to log into the app. You can also store this data in other tables, but this table consists of this data by default. {% endhint %} ## Understanding the working of Sheets If you want to use sheets as your backend database first you need to define the schema for the database which means that you need to structure the database i.e. how many tables does it have, and how many columns each table has. and what the type of column in a particular row. For example - suppose you are building apps that can store the data of students \[student management app], then you can define a table with column-like student id \[number], student name \[single line text], student department \[single line text], student date of birth \[date and time]. ### How to create a new Table in Sheets To create a new table in Sheets go to the bottom section of the Sheets and then click on the plus/add icon present next to the user's table, it will create the new table. When a new table is created by default two-column with single-line text as types are already generated for you. These by default columns can be easily modified you can change the name as well as the types of both columns in the table. ### Modifying tables in Sheets To modify the table present in Sheets press the options icon present next to each column name heading. Clicking on this option icon will show you multiple options: * Change the field type * Rename the column * Delete the column #### Change the field type This option present in the dialog box will help you to change the field type of the column. Clicking on this option will show you a dropdown menu that consists of several options like number, date and time, paragraph, etc. Choose any option according to your needs. #### Rename Column Name This option is used to change the name of the column to anything that you want to have {% hint style="info" %} Note: The names should not contain any space between them. You can use '\_' instead. {% endhint %} #### Delete This option helps you to delete the currently selected column with all the data present in the column. {% hint style="info" %} Note: When you delete any column all the data that is stored in that column will be deleted and cannot be recovered. {% endhint %} ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # SQL SQL in Blup is similar to traditional SQL. SQL in blup is similar to a traditional SQL editor in the sense, that in SQL you can manage, and edit your SQL queries and, through SQL query you can modify data from the tables present in Sheets. The SQL consists of mainly 3 sections: * **SQL Queries View** * **SQL Bar** * **SQL Editor**

SQL

### **SQL Queries View** **SQL Queries View** consists of all **SQL** **Queries** that you have created. This mainly consists of three columns, the **Name** of the query, the **Description** of the query, and the **Last Modified** date of the query. You can select any query by checking the check box on the left side of each query entry and perform operations like edit or delete. This View helps in managing all SQL queries you have made, this can come in handy if you have a large project.
SQL Queries View

SQL Querues View

### SQL Bar The **SQL Bar** includes several buttons designed to help you efficiently manage SQL queries. These buttons serve various purposes, such as refreshing all queries and editing query details. Let’s explore them one by one! 😊
**Refresh Button** This button is used to refresh all SQL queries.
Reload Queries

Refresh Button

#### **Search Button** On enabling this button, a search bar will appear below the **Name**, **Description,** and **Last Modified** of your queries. The SQL queries are stored in a table which is explained below, so that you can search a query based on the **Name or** **Description or Last Modified** that you provide in the search bar.
Search Queries

Search Button

#### **Add Query Button** **The Add Query Button** is used to create a new query. On clicking this button a pop-up will appear asking you to enter the **Name** and **Description** of the query which you want to make. This is done so that you can manage different queries and keep track of what the particular query does in writing the description.
Add Query

Add Query Button

#### **Delete Query Button** **The Delete Query** button is used to delete a query, this button is disabled by default if no query is selected or present. Firstly, select a query to delete it.
Delete Query

Delete Query

> Note: You can also delete multiple queries by selecting them. #### **Edit Query Button** **The Edit Query** button is used to edit a query, the **Edit Query** is disabled by default if no query is selected. On clicking **Edit Query,** a pop-up will appear containing the **Name** and **Description** of the query that you can edit and save.
Edit Query

Edit Query

#### **Filter Button** On enabling the **Filter Button**, a filter option will appear on the right side of all the columns present in the **SQL Queries View**, where you can apply the filters on the data present. There are some filter options like: * A-Z / Z-A for Text-type columns - sort by ascending or descending for text * Newest First / Oldest First for Date Time type columns - sort by datetime.

Filter Queries

**SQL Editor** The **SQL Editor** is one of the most important parts of the SQL section. Here you can write your SQL queries and test them. The query that you have clicked from the SQL query table is shown here.
sql-editor

SQL Editor

The SQL Editor has mainly 4 parts: ### **1.** SQL Editor **Top Bar** The top bar consists of three things : 1\) **SQL Query Name** - Name of the query that is opened. 2\) **Run SQL Button** - This is used to run the SQL query, along with this you can also configure a test event by clicking the dropdown arrow from the Run SQL button. 3\) **Save SQL Button** - This is used to save an edited SQL query, you need to run the query or press this button in order to save the query you have written.
sql-editor-top-bar

SQL Editor Top Bar

### ***2. Editor*** Here you can write your SQL queries, this works as a traditional code editor where you can copy, cut, and paste your code along with SQL syntax highlighting
sql-editor

sql-editor

### ***3. QT AI Prompt Bar*** The SQL section has an AI-powered editor called QT AI, where you can write a prompt and the respective SQL query will be generated for you. For example, you can give a prompt "Give me all the phone numbers from the user table", it AI automatically recognizes the context and gives you a SELECT query.
qt-ai-prompt

qt-ai-prompt

### ***4. Output Section*** This is where you get the execution results of your sql query, it shows you the error encountered if any, or the success result obtained from running the query.
sql-output

sql-output

## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Blup Code Editor Discover the features of the Blup Code Editor for coding, editing, and customizing your Blup applications. Let’s explore the **Code Editor** section in **Blup**, your Low Code IDE for Flutter app development. 🚀 Our versatile code editor is designed to empower developers with the flexibility to code in any language by supporting various file extensions. Whether you’re crafting Flutter widgets or diving into backend logic, Blup’s intuitive and dynamic code editor ensures a seamless and efficient coding experience. Explore the possibilities and streamline your development process with Blup’s adaptable code editing capabilities. The Code Editor is divided into two parts. Let’s understand each one of them in detail: 1. [**File Explorer:**](/wiki/blup-code-editor/file-explorer) Located on the left side of the editor, the file explorer resembles what you’d find in tools like Android Studio or Visual Studio Code. It serves as a gateway to your project files. 2. [**Editor Area:** ](/wiki/blup-code-editor/editor-area)This is your coding space, functioning like a traditional editor with a custom-built color scheme for both light and dark modes, enhancing readability and appearance.

Blup Code Editor

Feel free to continue working in this space, and if you have any further questions or need assistance, feel free to ask! 😊 If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # File Explorer Navigate and manage your project files efficiently within the Blup Code Editor's File Explorer. It serves as a gateway to your project files. It shows all files in a project.
Certainly! Let’s explore the features of the **File Explorer** in more detail. Whether you’re working with Android Studio, Visual Studio Code, or any other development environment, understanding the capabilities of the file explorer can significantly enhance your productivity. 1. **New File**: * This feature allows you to create a new file. When you click it, a window pops up where you can specify the file name and its extension. * If you don’t add an extension, it will create a plain text file with the given name. 2. **New Dart File**: * Similar to the new file option, but specifically tailored for Dart files. * If you don’t add an extension, it will create a Dart file by default. * Handy for Flutter projects where Dart is commonly used. 3. **New Folder**: * Create new folders directly from the file explorer. * Organize your project files effectively by grouping related files. 4. **Rename**: * Easily rename files and folders. * Right-click on an item and select “Rename” to give it a new name. 5. **Add Packages (pub.dev)**: * Simplifies the process of adding custom libraries from pub.dev. * Clicking on this option opens a pop-up displaying popular libraries. * Use the search bar to find the specific library you want to incorporate into your project. * A convenient alternative to manually editing the `pubspec.yaml` file. 6. **CRUD Operations (Create, Read, Update, Delete)**: * Copy or cut files and folders individually or in multiples. * Paste them to a new location. * Delete single or multiple files and folders as needed. 7. **Find in Files**: * Search for specific keywords or content within your project files. * The search folder depends on where you open this option: * Right-clicking on a file uses the parent folder of that file as the search folder. * Clicking on a folder uses that folder as the search context. * You can also use a keyboard shortcut to access this feature. 8. **Replace in Files**: * Similar to “Find in Files,” this feature allows you to search for specific words or content within your project files. * The added capability is that you can also replace the searched word with another. * Choose to replace all occurrences of that word or target a specific instance by previewing the code in the search results. 9. **Reformat Code (With Dart Format)**: * Code readability is crucial for maintaining a clean and organized codebase. * When writing code, things can get messy. Clicking on this option automatically reformats the code. * It adheres to Dart standards, ensuring that you receive cleaner and more readable code in return. Remember, the file explorer isn’t just for show—it’s a powerful tool that streamlines your development workflow. Utilize these features to navigate, organize, and manipulate your project files efficiently! 🚀 If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Editor Area Edit your code and customize your app within the Editor Area of the Blup Code Editor for a seamless development experience. This is your coding space, operating like a traditional editor with a custom-built color scheme for both light and dark modes, enhancing readability and appearance. Right-clicking within the editor unveils various actions, most akin to those found in the file explorer. However, we'll delve into two specific options unique to the editor.
Certainly! Let’s explore the additional features of the **Editor Area**: 1. **Go To Declarations**: * Clicking this option redirects your cursor to the line in the file where the variable is declared. * The editor automatically detects the word if you haven’t selected the entire word. If you have, it finds the declaration for the selected part. * If no declaration is found, nothing happens. 2. **Go To Usages**: * Clicking this option opens a pop-up displaying all the usages of the particular word. * If you haven’t selected the word, the editor automatically detects the word at the cursor. * If you have selected the word, it finds the usage of the selected part, providing the code snippet, line number, and file path where the word is used. * This feature is immensely helpful during coding and is widely utilized by developers for efficient coding. Additionally, the Editor Area offers another feature that enhances coding ease and efficiency: the **QT AI Auto Completer**. Let’s delve into its details. ### **QT AI Auto Completer**: * Enables you to input prompts, generating code snippets based on the prompt. * Understands both the code and file context. * Functions as a helpful coding co-pilot, assisting you in effortlessly creating new functionalities and writing logic. * The code is automatically generated at the cursor location. * For example, if you prompt “Write a function to add two numbers,” it will generate a code snippet at the current cursor position, making your coding tasks more convenient.
### Shortcut Keys in **Blup Code Editor** Let’s explore the **time-saving shortcuts** available in the **Blup Code Editor**. These shortcuts can significantly enhance your productivity by allowing you to perform common tasks without relying on your mouse. Here are some useful keyboard shortcuts: 1. **Ctrl + F**: This shortcut enables you to **search for a specific word within the currently opened file**. It’s a quick way to locate occurrences of a particular term or function. 2. **Ctrl + R**: Use this shortcut to **replace a word** within the currently opened file. It’s handy when you need to make consistent changes throughout your code. 3. **Ctrl + Shift + F**: Pressing this combination opens the **Find in Files dialog**. You can search for a specific keyword across multiple files within your project. It’s particularly useful when you’re working with larger projects and need to find occurrences globally. 4. **Ctrl + Shift + R**: Similar to the previous shortcut, this one opens the **Replace in Files dialog**. It allows you to search for a word and replace it with another across multiple files. Great for bulk changes! 5. **Ctrl + Mouse left click**: When you click on a word while holding down the Ctrl key, it performs a couple of actions: * If the word has a **declaration**, it takes you to that declaration. * If it’s the **root declaration**, it opens the usages for that word. This is especially helpful for navigating through your codebase efficiently. Remember, mastering these shortcuts can save you valuable time and streamline your coding experience in Blup Editor! 🚀🔍💡 Remember to leverage these features effectively to enhance your development workflow! 🚀 If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Publish to stores 🚀(Ship) Distribute your app on App & Play stores. Apps created in blup can be published in[ App Store](/wiki/publish-to-stores-ship/ios-cloud-build) and [Play Store](/wiki/publish-to-stores-ship/play-store). # iOS Cloud Build 😮‍💨 Distribute your app on App Store from Windows, Linux or Mac. This section discusses how to ship your app to the App Store. The process is very simple & straightforward. There are two steps involved in it: 1. Configure the details. [Configure ⚙️](/wiki/publish-to-stores-ship/ios-cloud-build/configure) 2. Run the build. [Run ▶️](/wiki/publish-to-stores-ship/ios-cloud-build/run) Distributing your app on the App Store has never been easier! Whether you're using Windows, Linux, or Mac, you can now ship your app seamlessly with our iOS Cloud Build feature. This process is designed to be as straightforward as possible, ensuring that developers of all experience levels can get their apps onto the App Store without a hitch. 📲 **Why Use iOS Cloud Build?** Our iOS Cloud Build service is perfect for developers who want a hassle-free way to distribute their apps. By utilizing our cloud-based tools, you can focus more on what you do best—creating amazing apps—while we handle the complexities of the build and distribution process. 🌐 **The Simple Two-Step Process 🚀** There are just two main steps to follow when using our iOS Cloud Build service: 1. **Configure the Details** ⚙️ * The first step involves configuring your app's details. This includes setting up your app's metadata, such as its name, version number, and other essential information required by the App Store. You can easily do this through our intuitive interface. For more detailed instructions, check out our [configuration guide](https://docs.blup.in/wiki/publish-to-stores-ship/ios-cloud-build/configure). 2. **Run the Build** ▶️ * Once you’ve configured all the necessary details, the next step is to run the build. This is where our cloud service shines. With just a few clicks, you can initiate the build process, and our powerful cloud servers will take care of the rest. From compiling your code to generating the final app package, everything is handled swiftly and efficiently. For a step-by-step guide, see our [build run instructions](https://docs.blup.in/wiki/publish-to-stores-ship/ios-cloud-build/run). # Configure ⚙️ Create iOS release build on cloud. (Even if you are on Windows or Linux.) To get started with iOS Cloud Build. First, we would have to configure the values. These values need to be set only once & later you can directly go to [Run ▶️](/wiki/publish-to-stores-ship/ios-cloud-build/run) to Run iOS Cloud Build. ### To get started Follow the image below to open the "App Store Details" dialog first.
Follow the image to open the "App Store Details" dialog first.

Follow the image to open the "App Store Details" dialog first.

Let's first fill the Issuer Id, Key Id & API Key.

Let's first fill the Issuer Id, Key Id & API Key.

## 1. Get the "Issuer Id, Key Id & API Key" ### Code signing All applications have to be digitally signed before they are made available to the public to confirm their author and guarantee that the code has not been altered or corrupted since it was signed. {% hint style="warning" %} Signing iOS applications requires [Apple Developer Program](https://developer.apple.com/programs/enroll/) membership. {% endhint %} **Creating the App Store Connect API key** It is recommended to create a dedicated App Store Connect API key for Blup in [App Store Connect](https://appstoreconnect.apple.com/access/api). To do so: 1. Log into App Store Connect and navigate to **Users and Access > Keys**. 2. Click on the + sign to generate a new API key. 3. Enter the name of the key and select an access level. We recommend choosing `App Manager` access rights, read more about Apple Developer Program role permissions [here](https://help.apple.com/app-store-connect/#/deve5f9a89d7). 4. Click **Generate**. 5. As soon as the key is generated, you can see it is added to the list of active keys. Click **Download API Key** to save the private key for later. Note that the key can only be downloaded once. {% hint style="info" %} Take note of the **Issuer ID** above the table of active keys as well as the **Key ID** of the generated key as these will be required when setting up the Apple Developer Portal integration in Blup. {% endhint %} **It would look something like this on your Apple Developer Account.**

Issuer Id, Key Id & API Key

## **2**. Get the "SSH Certificate Key"
### **Obtaining the Certificate private key** To sign iOS apps, you can use the private key of an iOS Distribution certificate that has already been created in your Apple Developer Program account. If you do not have a private key then you can create a new one. #### Create a new key You can create a new 2048-bit RSA key by running the command below in your terminal: **For Mac:** ``` ssh-keygen -t rsa -b 2048 -m PEM -f ~/Desktop/ios_distribution_private_key -q -N "" ``` **For Windows:** Open CMD, & type `ssh-keygen` . If this command doesn't work. Download OpenSSH from [here](https://slproweb.com/products/Win32OpenSSL.html). 
ssh-keygen -t rsa -b 2048 -m PEM -f ./MyKeyGen/ios_distribution_private_key -q -N ""
This new private key will be used to create a new iOS Distribution certificate in your Apple Developer Program account if there isn’t one that already matches this private key. Paste this private key in Blup "**App Store Connect Dialog**".\ \ **Note:** Paste the keys ***with***** `----BEGIN PRIVATE KEY----`** & **`-----END PRIVATE KEY-----`** as well.

Finally, it will look something like this.

Next, let's run the cloud build! [Run ▶️](/wiki/publish-to-stores-ship/ios-cloud-build/run) # Run ▶️ How to run iOS cloud build is Blup? {% hint style="warning" %} You have to first configure the details in [Configure ⚙️](/wiki/publish-to-stores-ship/ios-cloud-build/configure)section, if not done already. {% endhint %} Follow the below steps to build & Publish an iOS build on App Store, even if you are on Windows or Linux.

How to run iOS cloud build is Blup?

Running iOS cloud builds can be straightforward and efficient. This guide will help you understand the steps to successfully execute an iOS cloud build for your app. Let's dive in! ### Step-by-Step Guide 📝 #### 1. Prepare Your Project 📁 Before starting, ensure your project is ready: * **Update Dependencies**: Make sure all your dependencies are up-to-date. * **Check Configurations**: Verify all configurations are correct, including your `Info.plist` file. #### 2. Configure Cloud Build Settings ☁️ Set up your cloud build environment: * **Sign In**: Log into your cloud build service provider. * **Select Project**: Choose the project you want to build. * **Configure Build Settings**: Adjust settings like build configurations, environment variables, and provisioning profiles. #### 3. Start the Build Process 🏗️ Initiate the build: * **Trigger Build**: Click on the ‘Start Build’ button. * **Monitor Build**: Watch the build progress and ensure there are no errors. This step might take a few minutes. #### 4. Troubleshooting Common Issues 🛠️ Sometimes, issues can occur: * **Build Failures**: Check error logs to identify the cause. * **Configuration Errors**: Double-check your settings and try again. * **Dependency Issues**: Ensure all dependencies are correctly installed and compatible. #### 5. Finalize and Download Build 📥 Once the build is successful: * **Download Build**: Retrieve the built application from the cloud. * **Test Application**: Run tests on your app to ensure it works as expected. * **Deploy to App Store**: Follow the guidelines to publish your app on the App Store. Remember to review the detailed instructions provided in Blup's documentation to ensure a smooth build and publishing process. For more detailed instructions, visit [Blup Docs](https://docs.blup.in/wiki/publish-to-stores-ship/ios-cloud-build/run). # Play Store Follow these steps to publish your Blup application on the Google Play Store and reach a wider audience. [Click here](https://support.google.com/googleplay/android-developer/answer/9859152?hl=en) to get the step-by-step instructions to publish your app in the play store. Publishing your app on the Play Store can be a streamlined process if you follow these steps. Here’s a detailed guide to help you through the process: **1. Prepare Your App** Ensure your app is fully developed and tested. It should meet Google Play's quality guidelines and be free of major bugs. Testing on various devices and screen sizes is essential to ensure compatibility and performance. **2. Set Up a Google Play Console Account** To publish on the Play Store, you need to create a Google Play Developer account. This requires a one-time registration fee. Once registered, log into the Google Play Console. **3. Create a New Application** In the Google Play Console, navigate to the “All apps” section and click “Create app.” You’ll need to provide initial information such as the app name, default language, and app type (game or app). **4. Complete the App Details** Fill in all the necessary app details: * **Title and Description**: Write a concise and informative title. Provide a detailed description highlighting the app's features and benefits. * **Graphics**: Upload high-quality screenshots, a feature graphic, and an optional promo video. * **Category**: Select the appropriate category and subcategory for your app. * **Contact Details**: Provide a contact email and website if applicable. **5. Prepare Your App Release** Under the "Release" section, you’ll manage your app’s APK or App Bundle files. Click on "Production" and then "Create new release." Upload your app’s binary files. Ensure these files are signed with the correct key. **6. Rate Your App** Google Play requires all apps to have a content rating. Complete the content rating questionnaire honestly to avoid misclassification, which can lead to removal from the store. **7. Set Up Pricing and Distribution** Choose whether your app will be free or paid. Set the price if it’s a paid app. Define the geographic distribution, specifying in which countries your app will be available. You can also opt-in for distribution to specific devices like Android TV or Wear OS if applicable. **8. Review and Publish** Before publishing, review all entered information to ensure accuracy. Make sure there are no policy violations. Once everything looks good, click "Publish" to make your app available on the Play Store. #### Post-Publication Tips * **Monitoring**: Use the Google Play Console to track your app’s performance, user ratings, and reviews. * **Updates**: Regularly update your app to fix bugs, add new features, and improve user experience. * **User Engagement**: Engage with users by responding to reviews and feedback promptly. For more detailed instructions and guidelines, you can visit the [official Google Play support page](https://support.google.com/googleplay/android-developer/answer/9859152?hl=en). {% hint style="info" %} Note: Blup will soon be capable of publishing the apps in the play store through blup itself. {% endhint %} # Build Your First App Build your app effortlessly with Blup! Our guide offers step-by-step instructions, expert tips, and best practices to turn your app idea into reality. This App will guide you on how to create a basic app. This app is simple and easy to understand, but it will help you learn some key ideas in app development. ### Building Your App with Blup: A Simple Guide 🚀 Welcome to Blup! Building your app is easier than ever. Follow these simple steps to create and launch your app in no time. 🌟 **Step 1: Create a New Project 📂** * **Open Blup**: Start by opening the Blup platform. * **New Project**: Click on 'Create New Project'. Give your project a name and choose the type of app you want to build. * **Set Up**: Customize your project settings. Select your preferred language and framework. **Step 2: Design Your App 🎨** * **Templates**: Blup offers a variety of templates. Pick one that fits your needs. * **Drag and Drop**: Use the drag-and-drop editor to design your app. Add buttons, images, and text with ease. * **Customize**: Adjust colors, fonts, and layouts to match your brand. **Step 3: Add Functionality ⚙️** * **Plugins**: Enhance your app with plugins. Blup has a wide range of options for different functionalities. * **APIs**: Integrate APIs to connect your app with external services. Follow the easy integration steps provided. * **Testing**: Test each feature as you add it. Use the built-in simulator to see how your app works on different devices. **Step 4: Test Your App 🧪** * **Run Simulations**: Use Blup's simulator to test your app on various devices. * **Debugging**: Identify and fix any issues. Use the debugging tools to streamline the process. * **User Feedback**: Share your app with a small group of users. Gather feedback and make improvements. **Step 5: Publish Your App 🌐** * **Build**: Once you're happy with your app, click 'Build'. Blup will compile your app for different platforms. * **Upload**: Upload your app to app stores. Follow the step-by-step guide for each platform. * **Monitor**: Keep an eye on your app’s performance. Use Blup’s analytics to track user engagement and issues. ### Music to go with. {% embed url="" %} Lofi music {% endembed %} # TODO App Learn to build a functional to-do app in Blup with step-by-step instructions and best practices. This tutorial guide you through creating a to-do app, ToDo app is allows users to manage tasks and activities. It typically includes features such as adding tasks, organizing them into categories or lists, setting due dates and priorities, marking tasks as completed, and possibly syncing data across multiple devices. ## Steps to Build ToDo App The steps to build the app are as follows: * [1. Design the User Interface](#design-the-user-interface) * [2. Set Up Data Storage](#set-up-data-storage) * [3. Implement Logic](#implement-logic) ### 1. Design the User Interface In this step, we'll add the UI elements or widgets for the 'Home' and 'Form' screens and the navigation between the two pages. ![](/files/9t3wRG04DkWef0julGHH) #### 1.1 Building Home Screen Here is a simplified approach to creating the UI for a screen that displays all tasks according to their dates in a to-do app: 1. Design the Top Section: * Use a Container widget to create the topmost section of the UI. * Add padding and choose a background color for the container to define the top section. * Add an icon from the Icon widget and customize its size and color as needed. * Use a CircleAvatar widget to display a circular image, and fill it with an image from your assets. ![](/files/w3rdEmV7eDqTATI9ExNC) 2. Add Text Elements: * Add Text widgets to display information such as the date or a title. * Customize the text style, including font size and font type, to match your design. ![](/files/Pt1HZkKmetuufHaFDUYk) 3. Create the Task Theme: * Create a theme for the task list items, such as a specific layout and style for tasks. * Keep the task theme simple for ease of use and a clean design. ![](/files/h3p0Mlz3Sv3sgkjwyr7p) 4. Organize Tasks in a ListView: * Use a ListView widget to display tasks according to their dates. * Group the elements for each date as a separate list item in the ListView. * Customize the ListView to show multiple tasks as a scrollable list. ![](/files/yUaTtU8Pv3UwhzriOLHg) 5. Add a Floating Action Button: * Include a floating action button (FloatingActionButton widget) to allow users to add new tasks. * When clicked, the button should navigate the user to another screen where they can input and add a new task. ![](/files/RlXyJZX4Tvc4JMStus7u) 6. Design the Task Input Screen: * Use a Container widget to create the main layout of the screen. * Customize the container by setting its background color, padding, and other properties. #### 1.2 Building TODO Form ![](/files/pPkaarB1khS1sea21nfH) 1. Add Input Fields and Button: * Add a TextField widget to take input for the task title or description. * Customize the TextField by adjusting its width and height as needed. * Add a Button (e.g., ElevatedButton or FlatButton) to allow the user to submit the new task. ![](/files/6n6pXhFPc7GZaJTfPD5o) 2. Customize Text and Placeholder: * Add a placeholder text (hint text) to the TextField to guide the user on what to enter. * Customize the button with appropriate text, such as "Add Task" or "Submit". ![](/files/mz2gLgPwXhrpy0IPXPfF) ### 2. Set Up Data Storage In this section, you will set up data storage by creating a table and writing queries for creating, uploading, reading, and deleting data. #### 2.1 Creating the Table * Choose a name for your table, avoiding the use of user or list in the table name. * Set the table as global if you want it to be accessible from different parts of your app. * Define the fields you need for your table, such as columns for task names, due dates, and statuses. ![](/files/qbDpqEp49pVD4W3FFMlY) #### 2.2 Writing Queries 1. Add data to the table * You should have basic knowledge of SQL to write queries for data operations. * Create a query, giving it a name and a description of what it does. * Write the query in the designated query field. * Save the query, and use the test option to check if the query is correct. * To test the query, provide key-value pairs in the test event configuration, and run the query to see the output below. ![](/files/c53lfinVbxEb7IGmlZnH) 2. Get data from the table Just select all(\*) from the table to get all the data. ![](/files/9Qu0YBliMsmbEb4dD8UV) ### 3. Implement Logic In this section we implement the logic for the UI and connect them them with the backend. #### 3.1 Adding logics to the UI 1. Navigate to the Form Screen: * Right-click on the FAB (Floating Action Button) and choose "Add Logic." * Add a "Page Navigator" node and connect the FAB's "On Click" event to the "Run" event of the Page Navigator node. ![](/files/NVLbFtK6hqjHBoGjgJdD) 2. Filling Out the Form Screen: * For each text field, right-click and select "Add Logic" to open the text field node. * Connect the "On Text Changed" event of each text field to its own function. * Extract the text from each text field and connect it to the BlupSheet API query for "Add\_task" to store the text field data. * Add logic to the button: connect its "On Click" event to the "Run" event to trigger the BlupSheet API. * Check the status of the BlupSheet API using "On Success" and "On Failure" events. Log any responses in the Debug console. -If the API call is successful, navigate back to the Home Page by attaching the navigator to the "On Success" event of the BlupSheet API. ![](/files/v8K1UjfKC6YOTHuTFH9R) 3. Show data to the Home Screen: ![](/files/DDTftsfGzEwo3Fk2Br50) * Open a BlupSheet API and select "task\_details" to get the data from the form. * Check if the API is working by attaching its "On Success" and "On Failure" events to their respective functions and taking debug prints. * If the API is working perfectly, use a List Node. * Connect the output node ("New List") to the List length node to find the length of the list. * Attach "New List" to the List ElementAt node to access each element's index. * Connect the List length output node ("Length") to the item count of the List view. * Connect the output node ("Item and Run Trigger") of List ElementAt to the Get Value node. * Attach the outputs (value) to the text of your List view to display the data in the list. ![](/files/wf3idXVyp6UcCxBF9mLh) If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Blup Settings Configure and customize settings within your Blup application using the Setting Widget.
blup settings

Blup Settings

The Settings widget in BLUP empowers users with precise control over various project aspects and configurations. Upon opening, the widget presents a tab bar view with five options: 1. **App Settings** 2. **Splash Screen** 3. **Google Maps API Key** 4. **BLUP Settings** 5. **Plans** ### App Settings
app settings

App Settings

The App Settings tab allows users to configure fundamental parameters related to their BLUP application: * **App Icon**: Users can select or upload an app icon to represent their application. * **Organization Name**: Enables users to update the organization name associated with their project. * **App Name**: Provides the option to modify the application's name, reflecting its identity and purpose. * **Project Package ID**: A unique identifier for the Flutter application package, often following a reversed domain name format. * **Project ID**: An identifier assigned to a project within a specific ecosystem or service, such as Firebase, for administrative and management purposes. * **SHA-1 Key**: Allows users to generate an SHA-1 key, crucial for certain functionalities like authentication and API access. ### Splash Screen
splash screen

Splash Screen

The Splash Screen tab empowers users to configure the initial screen displayed when launching their BLUP-developed application: * **Logo**: Users can upload or edit the logo displayed on the splash screen. * **Logo Background Color**: Specifies the background color for the logo. * **Branding Logo**: Option to include a branding logo, typically positioned at the bottom of the splash screen. * **Background Color**: Sets the background color for the splash screen, enhancing its visual appeal. ### Google Maps API Key
google map api key

Google Map API Key

The Google Maps API Key tab facilitates the integration of Google Maps functionalities into BLUP projects. Here, users can input and manage their API keys directly, enabling seamless integration of maps and location-based services within their applications. ### BLUP Settings
blup settings

Blup Settings

The BLUP Settings tab offers customization options for various BLUP-specific configurations: * **Dark Mode**: Allows users to toggle between dark and light modes for enhanced user experience. * **Auto Build**: Enables automatic building of the current project in BLUP. * **Profile Mode**: Facilitates building the app in profile mode, optimizing performance for testing and debugging. ### Plans
blup plans

Blup Plans

Under the Plans tab, users can manage their subscription plans for BLUP, including upgrading, downgrading, or canceling subscriptions, and accessing details about each plan tier's features and benefits. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Import from Figma Import your figma files directly in Blup. There are some steps to bring your Figma file inside Blup. Import your Figma files directly into Blup with ease! Follow these simple steps to get your designs into Blup in no time. 🚀 ### **Step 1: Copy the File ID from the URL** Open your Figma file in a browser. Look at the URL and find the text after '.../file/' and before the next '/...'. This is your File ID. Copy it! 📋 **Example**: If your URL is `https://www.figma.com/file/abc12345/your-design-file`, you need to copy `abc12345`.
copy file id from figma file url

Copy File FiD

### Step 2: Paste the File ID Go to Blup and open the "Import from Figma" dialog box. Paste the File ID you copied in the designated field. It's that easy! 🖱️
paste file-id

Paste the file-id

### Step 3: Create a Token from Figma Now, you need a token to allow Blup to access your Figma file. In Figma, go to your account settings and generate a personal access token. This token is essential for the import process. 🔑
create token from figma

Create token from figma

### Step 4 Paste the copied token Go back to Blup. In the "Import from Figma" dialog box, paste the token you just created. This will authenticate your import request. ✅
paste the copied token

paste the copied token

### Step 5: Wait & let the magic happen! Click the "Import Design" button in Blup. Select the frames you want to import from your Figma file. Click on "Import" and watch the magic happen! ✨ 1. Click on **Import design's** Button 2. Select the frames you want to import and click on **Import** 3. And the magic happens.

import design

You’ll see your Figma designs appear in Blup, ready for you to continue working on. 🎨 # How to use WebView in Blup Integrate and use WebView in Blup to display web content seamlessly within your application. Integrating and using WebView in Blup allows you to display web content seamlessly within your application. This guide will walk you through the steps to set up and customize a WebView in your Blup app. ### WebView Overview WebView is a powerful tool that enables you to embed web pages directly into your app. This can be useful for displaying web content like articles, web forms, or entire websites without the need for users to leave your app.
Web View

Web View

### Step-by-Step Guide to Using WebView in Blup ### 1. **Insert WebView**: To get started, you need to add a WebView widget to your UI screen. This is a simple process: * Open your UI editor in Blup. * Drag and drop the WebView widget to your desired position on the screen. * Customize the height and width of the WebView to fit your design preferences. You can adjust these dimensions to make sure the WebView looks perfect within your app layout. ### 2. Set WebView URL: Once you have placed the WebView widget, the next step is to specify the URL you want the WebView to load: * In the UI editor, select the WebView widget you just added. * Find the URL setting option and enter the web address of the content you want to display. This URL can be any web page that you wish to embed within your application. ### 3. Run Emulator: To see how your WebView looks and behaves in your app, you should launch the emulator or simulator: * Click on the “Run” button to start the emulator. * The emulator will show your app with the WebView integrated. * Navigate to the screen where you added the WebView to check if it displays the web content as expected. {% hint style="info" %} Note: If you want to learn more about the WebView components, [Click Here](/wiki/design-ui/insert-widgets/web-view-widget). {% endhint %} #### Additional Tips * **Interactive Web Content:** Make sure the web content you are displaying is mobile-friendly and interactive to enhance user experience. * **Testing:** Regularly test the WebView across different devices and screen sizes to ensure consistent performance and appearance. * **Updates:** Keep the URL updated to reflect the latest web content you want to showcase in your app. ### Share Your Ideas We are always looking to improve Blup. If you have any ideas or suggestions to make Blup better, join our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) and share your thoughts with us! ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # How to use Google Maps in Blup Incorporate Google Maps into your Blup application to provide location-based features and services.
Google Map

Google Maps

1\. **Get Google Maps API Key:** Obtain an API key from Google Maps for your application. 2\. **Add API Key to App Settings:** Go to the Google Maps API keys section in your app settings and add the API key you obtained. 3\. **Add Map View Widget:** To add a map to your UI screen, go to the Insert tab and choose the Map View widget. You can then adjust its size and where it shows up on the screen. If you need more help, check out the Google Map Component guide [here](https://github.com/BlupGithub/blup-docs/blob/main/wiki/design-ui/insert-widgets/mapview-widget.md). 4\. **Set Initial Coordinates:** Specify the initial coordinates that you want to show when the app starts. This determines the initial position and zoom level of the map. 5\. **Run the App:** Once you've configured the Map View widget, run your app to see the Google Maps integration in action. {% hint style="info" %} Note: To know how to get Google API key [Click Here](https://developers.google.com/maps/documentation/javascript/get-api-key). {% endhint %} If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # How to use the camera in blup? Learn to integrate and use the camera in Blup for capturing photos and videos directly within your app.
Camera View

Camera View

### **Camera View** Learn to integrate and use the camera in Blup for capturing photos and videos directly within your app. **To use the camera in Blup, follow these steps:** 📸 1. **Click on the "Insert" tab.** 📋 * Begin by navigating to the "Insert" tab in your Blup interface. 2. **Drag and drop the "Camera" widget onto your UI screen.** 🖱️ * Locate the "Camera" widget from the list of available widgets and drag it to the desired spot on your app’s UI screen. 3. **Adjust the camera functionality to suit your needs.** ⚙️ * Once the widget is in place, you can customize its properties. This includes setting the resolution, choosing the flash mode (on, off, auto), and selecting the capture mode (photo or video). 4. **Test the camera.** 🧪 * After configuring the camera settings, click on the "Run" button to see how the camera works in real time. Capture photos or videos to ensure everything is functioning as expected. For more detailed information about the camera components and their properties, click [here](https://docs.blup.in/how-to-use-camera). {% hint style="info" %} Note: If you want to learn more about the Camera components, [Click Here](/wiki/design-ui/insert-widgets/cameraview-widget). {% endhint %} ### Join Our Community Do you have ideas to make Blup even better? Share your thoughts and suggestions with us on our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303). We love hearing from our users and continuously strive to improve Blup based on your feedback! 💡 ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # How to add Splash screen in Blup? Implement a splash screen in Blup to enhance the user experience during app startup. Enhancing the user experience during app startup is essential, and implementing a splash screen in Blup can help you achieve that. Here's a step-by-step guide to setting up a splash screen for your app.
Splash Screen

Splash Screen

1\. **Set Up Splash Screen:** Navigate to your app settings. Look for the option to set up the splash screen. 2\. **Add Logo and Background Color:** Within the splash screen settings, upload your app's logo or icon. You can also specify the background color you want to display during the splash screen. 3\. **Save Changes:** Once you've uploaded the logo and set the background color, save the changes. 4\. **Run the App** ▶️**:** Now, whenever you run your app on a device or emulator, the splash screen will automatically appear with the logo and background color you've configured. ### Tips for an Effective Splash Screen * **Keep it Simple:** A clean and simple splash screen with your logo and a solid background color is often the most effective. * **Brand Consistency:** Ensure that the logo and background color align with your overall brand identity. * **Test on Multiple Devices:** Make sure the splash screen looks good on different screen sizes and resolutions. ### Join Our Community 💡 If you have any ideas to make Blup better or want to share your feedback, join our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303). We value your input and look forward to hearing your suggestions! ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # How to know Debug prints in blup Learn how to use debug prints in Blup to troubleshoot and debug your application effectively.
Debug Print

Debug Print

Debugging is an essential aspect of application development, and Blup provides a straightforward way to utilize debug print statements to monitor your app's performance and diagnose issues. Here's a step-by-step guide to help you effectively use debug print statements in Blup: #### Step 1: Run Your Application Start by running your Blup application. This initiates the processes and scripts that you want to monitor. #### Step 2: Access the Debug Panel Once your application is running, locate the "View Details" button at the bottom of your screen and click on it. This action will open a detailed view of your application's current state. #### Step 3: Navigate to the Debug Panel In the bottom right corner of the detailed view screen, you'll find the debug panel. This panel is crucial as it displays all the debug print statements that your application generates. #### Step 4: Analyze Debug Prints The debug panel shows the real-time output of your application's debug print statements. These statements are lines of code that you insert into your application to print specific information about its operation. They help you understand the flow of your application, monitor variable values, and identify where things might be going wrong. ### Benefits of Using Debug Prints in Blup 1. **Immediate Feedback**: Debug print statements provide instant feedback about your application's performance and behavior, allowing you to quickly pinpoint issues. 2. **Simplified Debugging**: By strategically placing debug prints in your code, you can simplify the debugging process, making it easier to trace and resolve problems. 3. **Enhanced Understanding**: Debug prints offer insights into how your application works, which can be invaluable for both novice and experienced developers. {% hint style="info" %} Note: Debugging means finding and fixing problems in your application. {% endhint %} ### Tips for Effective Debugging * **Use Descriptive Messages**: Ensure your debug print statements are clear and descriptive. This makes it easier to understand the output without referring back to the code. * **Limit Output**: Too many debug prints can clutter the debug panel. Use them judiciously to avoid overwhelming yourself with information. * **Remove Debug Prints**: Once you've identified and fixed the issues, remove or comment out unnecessary debug prints to keep your code clean. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # How to use Google sign in in Blup Integrate Google Sign-In in Blup to enable users to log in with their Google accounts.
Google SignIn

Google SignIn

To integrate Google Sign-In into your app, follow these steps: 1. **Create a UI**: Design a user interface (UI) where you want to incorporate the Google Sign-In button. This UI should include a button or any other widget to trigger the sign-in process. 2. **Implement Logic**: In the logic of the widget associated with the UI, add the Social Login can select the Google in it. 3. **Trigger Google Sign-In**: On the click event of the button or widget in your UI, trigger the Google Sign-In process. This can be done by calling the appropriate method provided by the Google Sign-In SDK. 4. **On Setting**: On Social login setting you need to add google-services.json for connecting to the google services so that you can signin with google. 5. **Navigate to Google Sign-In**: When the user triggers the sign-in process, navigate to the Google Sign-In screen or flow. This is typically handled by the Google Sign-In SDK, which provides a standard sign-in interface that users are familiar with. 6. **Auto Save User**: After successful sign-in, you can optionally save the user's information, such as their email or profile picture, for future use. This can be done using local storage or by sending the user data to the backend for storage. {% hint style="info" %} Note: To know how to get google-services.json [Click Here](https://support.google.com/firebase/answer/7015592?hl=en#zippy=%2Cin-this-article). {% endhint %} If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %} # Creating sign up/ sign in in Blup Create sign-in and sign-up functionality in Blup to manage user authentication and registration. 1\. **Create Screens:** Build separate screens for sign-in and sign-up. These screens should include fields for users to input their credentials, such as email and password. 2\. **Implement Logic:** In the sign-in screen, add logic in the Logic Panel to handle user authentication. This logic should verify the user's credentials, typically by sending them to a backend server for validation. If the credentials are valid, the user is logged in and directed to the main app screen. 3\. **Connect to Backend:** Ensure your sign-in screen is connected to the backend server where user data is stored. This connection allows the app to verify user credentials and retrieve user information from the server. 4\. **Sign-Up Functionality:** Similarly, in the sign-up screen, implement logic to handle user registration. When a user signs up, their information is sent to the backend server to create a new account. If you have any ideas to make Blup better you can share them through our [Discord community channel](https://discord.com/channels/940632966093234176/965313562425823303) ## Music to go with. {% embed url="" %} Lofi music {% endembed %}