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

Was this helpful?

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

Insert Panel

Learn how to insert and configure a variety of widgets in Blup to enhance your application's functionality.

PreviousToolkitNextTextField Widget

Last updated 10 months ago

Was this helpful?

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

The iOS Timer widget provides a timer interface familiar to iOS users, suitable for apps needing countdown or time-tracking features.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

TextField Widget
Alert DialogBox Widget
AppBar Widget
CameraView Widget
CheckBox Widget
Date Picker Widget
FAB Widget
Icon Widget
IOS DatePicker Widget
IOS Timer Widget
Lottie Widget
MapView Widget
Multi Choice Widget
Progress Bar Widget
Progress Wheel Widget
Radio Widget
Slider Widget
Switch Widget
TextButton Widget
Time Picker Widget
Web View Widget
Lofi music
Insert Widgets
Insert Widgets