Widget Library

Overview

Flint is equipped with an extensive assortment of pre-designed widgets, which can be readily customized through uncomplicated property configurations. With simple drag-and-drop, a user can create a user interface without having design expertise.

Here are some sample projects included for better understanding of widgets and their usage. Please click on the link below to download the Flint project.

https://www.embien.com/download/flint-standard_widgets_library.zip

FixedView widget

Flint has a collection of Container widgets that helps to group multiple widgets and manage them efficiently. The FixedView widget allows users to place child widgets in fixed positions. There are three different styles available

  • Fill color - To set a fill-colored background.

  • Transparent - To set a transparent background.

  • Background image - To set the background with customized images.

FixedView widget

FixedView widget

In Flint, users can dynamically change the background color at runtime by mapping Data Variable in the “Dynamic color” option under the Fill color layer properties. The Data variable value should range from 0(#000000 for black) to 4294967295 (#FFFFFFFF for white).

FixedView widget

Dynamic color option

Note: Support will be limited to solid colors with no alpha.

ListView widget

ListView shows its child widgets one after another, either horizontally or vertically, depending on the type chosen.

ListView widget

ListView widget

ScrollView widget

The ScrollView widget is used to create scrollable views. ListView is the most commonly used scrolling widget. ScrollView accepts only one child. It contains three internal widgets: two Scrollbars and a viewport.

  • Scrollbar controls the scrolling of content within a viewing area.

  • Viewport is the area that is visible to the user.

ScrollView widget

ScrollView widget

Refer Scrollview widget for more details.

CarouselView widget

A carousel view widget is used to present a collection of views in a scrolling manner, either horizontally or vertically. The users can navigate through a set of views by swiping or clicking, similar to a carousel of images or content.

CarouselView widget

CarouselView widget

Refer Carousel with swipe effect section to implement swipe effect in the carousel widget.

ProgressBar widget

A progress bar widget is used to visually represent the progress of a task or operation.Flint supports both horizontal and vertical progress bars widgets.

ProgressBar widget

ProgressBar widget

Progress bars are widely used in various applications, including software installations, file uploads, downloads, data processing, and any other operation where users may experience a wait time and benefit from visual feedback on the progress of the task.

Refer ProgressBar widget for more details.

Slider widget

A Slider widget allows users to select a value from a defined range of values by moving the knob. The Slider widget consists of a Seek bar and a Knob (a control that user can drag). Flint supports both vertical and horizontal sliders.

Slider widget

Slider widget

Sliders are commonly used in various user interfaces to control settings such as volume, brightness, or any parameter that can be adjusted along a continuum.

Refer Slider widget for more details.

Dial widget

The Dial widget is a circular value input control used to indicate the current value of a metric on a specified range using a pointer or needle. For eg: a Speedometer, which comes with an indicator or pointer to mark the position of the key metric value in a given range.

Dial widget

Dial widget

Refer Dial widget for more details.

Rotary Knob widget

A Rotary Knob widget allows users to select a value from a defined range of values by moving the knob in a circular motion.

Rotary Knob widget

Rotary Knob widget

Circular Progressbar widget

A circular progress bar widget is used to show progress of a task in a circular fashion.

Circular Progressbar widget

Circular Progressbar widget

Refer Circular ProgressBar widget for more details.

Clock widget

Flint provides a fully customizable analog clock widget with hands to show hours, minutes and seconds.

Clock widget

Clock widget

Labels widget

Labels widget is an input element which holds the alphanumeric data. It enables the user to enter text information. Flint supports Text Overflow feature that includes the Clip and Marquee.

  • Clip – To clip the overflowing text to make it fit in the space available.

  • Marquee - If the text exceeded the size of the widget, it would automatically scroll horizontally.

Labels widget

Labels widget

Imageholder widget

An imageholder widget is used to show visual content, typically in the form of images. The primary purpose of an imageholder widget is to present static or dynamic visual information to the user.

Imageholder widget

Imageholder widget

Button widget

Button widget is used to trigger any actions.Flint supports three button types – push button, toggle and radio button.

Button widget

Button widget

Push Button

A push button is used to perform an action when the user clicks on it, such as OK, Cancel, Close and so on.

Toggle Button

A toggle button widget functions as a switch, allowing users to toggle between two states—typically, an “on” state and an “off” state. When a user interacts with a toggle button, it changes its state, and this change often triggers a specific action or sets a particular configuration.

Radio Button

Radio buttons allow the user to select one option from a given set.

Dialog widget

A dialog widget is used to display information, prompt user input, or present messages to the user in the form of a pop-up window. It typically interrupts the current workflow or interaction on the screen and requires the user to take some action or provide a response before continuing.

Types of dialog widget in Flint

  • Modal - A modal dialog widget is used to handle tasks such as displaying error messages, requesting user confirmation for an action. It is designed to focus the user’s attention on the specific task or decision at hand, preventing interaction with other parts of the application until the dialog is closed.

  • Non-Modal - A non-modal dialog widget presents information or options to the user without blocking the interaction with other parts of the user interface. Unlike modal dialogs, which require the user to respond before continuing with other tasks, non-modal dialogs allow the user to interact with other elements of the interface while the dialog remains open.

  • Hide on focus lost - A Hide on focus lost dialog widget automatically hides or minimizes itself when it loses focus, meaning when the user clicks outside the dialog or interacts with another part of the application. When a dialog is set to hide on focus lost, it allows the user to interact with other parts of the application without having to manually close or minimize the dialog.