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.
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).
Note: Support will be limited to solid colors with no alpha.
ListView shows its child widgets one after another, either horizontally or vertically, depending on the type chosen.
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.
Refer Scrollview widget for more details.
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.
Refer Carousel with swipe effect section to implement swipe effect in the carousel 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.
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.
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.
Refer Slider widget for more details.
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.
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.
Circular Progressbar widget
A circular progress bar widget is used to show progress of a task in a circular fashion.
Refer Circular ProgressBar widget for more details.
Flint provides a fully customizable analog clock widget with hands to show hours, minutes and seconds.
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.
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.
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.