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.
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.
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).
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.
The Text Edit widget is primarily used to facilitate text input through an on-screen keyboard (OSK). When the OSK is enabled, any text entered via the keyboard is displayed within the Edit Box. This widget serves as an interactive text input field, allowing users to type, edit, and view text in real time.
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.
A progress bar widget is used to visually represent the progress of a task or operation. Flint supports both horizontal and vertical progress bar styles.
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.
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.
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.
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.
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.
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.
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 widgets 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.
