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 navigate to the Downloads Section in order to access and download the Flint projects.

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.

Labels widget

The Labels widget is an input element which holds the alphanumeric data, allowing users to enter text information. Within its properties, users can customize various aspects of the text layer:

  • Text Alignment: Horizontal and vertical alignment options are available to adjust the position of the text within the label’s boundaries.

  • Font: Users can choose the desired font file for the text within the label.

  • Text: This option allows users to input text directly. This is useful for fixed text content that doesn’t need to change dynamically.

  • Text DB (Data Bridge): This option enables dynamic text changes at runtime by mapping data bridges.

  • Text color: Users have the option to choose a specific color for the text.

  • Text Spacing: Users can adjust the spacing between characters in the text. The text spacing value can be adjusted within the range of -64 to 64. If the negative value of text spacing exceeds the width of the text area, the character spacing value resets to zero in Flint.This ensures that the characters don’t overlap or become unreadable due to excessive negative spacing.Please note that characters may crop when a negative spacing value is used in Italic fonts, particularly with Right & Top Alignment and Right & Bottom Alignment.

  • Text Overflow: Flint offers a Text Overflow feature with various options:

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

    • Ellipsis End/Start - This feature enables users to manage text overflow within a text view. By utilizing the Ellipsis property, the leading or final parts of the text can be automatically replaced by an ellipsis sign “…”, ensuring that the displayed text fits within the view’s bounds without unsightly clipping.

  • Text Direction: Flint supports text rotation, allowing text to be rotated at angles of 90, 180, and 270 degrees. For further details on text rotation, please refer Text Rotation section.

    Labels widget

    Labels widget

Imageholder widget

The image holder widget allows for the placement of images. Its primary function 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.

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.

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.

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

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.

Clock widget

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

Clock widget

Clock widget

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.