https://doc.sibvisions.com/ 2026-04-28T12:40:44+00:00 https://doc.sibvisions.com/ https://doc.sibvisions.com/lib/tpl/material/images/favicon.ico text/html 2023-04-17T06:30:55+00:00 https://doc.sibvisions.com/flutterui/app_config?rev=1681713055&do=diff The configuration file is located in assets/config/app.conf.json, e.g. { "title": "JVx Mobile Demo", "privacyPolicy": "https://my.dom.ain/privacy-policy/", ... } Parameters title (string) A one-line description used by the device to identify the app for the user. text/html 2021-01-07T14:50:41+00:00 https://doc.sibvisions.com/flutterui/application_parameters?rev=1610031041&do=diff It's possible to send additional properties from the app to the server-side application. This can be done with Start request. But it's also possible to send parameters from the server-side application to the app. This can be done directly in server-side application as usual with text/html 2026-03-23T15:34:36+00:00 https://doc.sibvisions.com/flutterui/background_customizing?rev=1774280076&do=diff It's easy to globally change the background of application overview, menu or screens. Simply provide a backgroundBuilder in your main: void main() async { await FlutterUI.start( FlutterUI( ..., backgroundBuilder: (context, type) { if (type == BackgroundType.WorkScreen) { if (IConfigService().offline.value) { //return null; } } return Container( decoration: BoxDecoration( color: Colors.w… text/html 2025-09-17T12:00:52+00:00 https://doc.sibvisions.com/flutterui/badge_component?rev=1758110452&do=diff Its super simple to show component badges like: Just use styles: Show 9 as label Style.addStyleNames(comp, "f_badge_text_9"); Set border size and color: Style.addStyleNames(comp, "f_badge_border_2_#aa0000"); Set alignment: Style.addStyleNames(comp, "f_badge_align_bottomRight"); text/html 2026-03-23T14:52:43+00:00 https://doc.sibvisions.com/flutterui/biopin_security?rev=1774277563&do=diff It doesn’t take much effort to add biometric or PIN authentication to an application. Just configure it! We support 3 layers: * Application security * Screen security * Button security To configure application security, simply enable biometric authentication in mobile.xml: text/html 2023-02-22T07:31:00+00:00 https://doc.sibvisions.com/flutterui/build_release?rev=1677051060&do=diff Build script The build script is available in the creator directory. The script is Apache ANT based and it's a simple XML file. It defines several build commands. The default command (start.complete) creates output for iOS, Android and Web deployment. The iOS build command requires macOS but won't fail if your system is not macOS. text/html 2026-03-23T15:52:20+00:00 https://doc.sibvisions.com/flutterui/button_group?rev=1774281140&do=diff We support a simple-to use button group: Just add following code in your screen: ButtonGroup butgrp = new ButtonGroup(); butgrp.setHorizontalAlignment(IAlignmentConstants.ALIGN_CENTER); butgrp.setMode(ButtonGroupMode.MultiSelection); butgrp.setLabels("Left", "Middle", "Right", null, null, "Five"); butgrp.setImages( UIImage.getImage(UIImage.OK_SMALL), null, null, UIImage.getImage(UIImage.TRASH_SMALL), UIFontAwesome.getImage(IFontAwesome.ADN_SMALL)); butgrp.eventAction().addListener… text/html 2023-04-14T23:00:09+00:00 https://doc.sibvisions.com/flutterui/button_styles?rev=1681513209&do=diff The standard button can be customized with styles, e.g. Slider button or Text button. But there are more additional styles for a button. Our button has a minimum size of 48×48 pixels. This is necessary for touch events because your fingers need some space for device contact. But sometimes text/html 2022-09-16T07:43:18+00:00 https://doc.sibvisions.com/flutterui/calendar_integration?rev=1663314198&do=diff The example widget for Calendar integration can be found here. Impressions: Mobile Web text/html 2023-05-10T17:19:03+00:00 https://doc.sibvisions.com/flutterui/celleditor_styles?rev=1683739143&do=diff All editors have a clear button if a value is set. The clear button is a small X on the right of the editor. Sometimes, it's not needed. If you want to hide the clear button, simply add the style: Style.addStyleNames(celleditor, "f_no_clear"); to your cell editor. text/html 2022-12-01T10:57:41+00:00 https://doc.sibvisions.com/flutterui/checkbox_switch?rev=1669892261&do=diff On mobile devices, a checkbox should sometimes look like a switch (e.g. for settings). If you want to show a switch instead a checkbox, simply use the following style: //UICheckBox Style.addStyleNames(checkbox, "f_switch"); //UIEditor Style.addStyleNames(editor, "f_switch"); //cell editors cellEditor.setStyle(new Style("f_switch")); text/html 2026-03-23T15:20:50+00:00 https://doc.sibvisions.com/flutterui/clientside_encryption?rev=1774279250&do=diff You can store values fully encrypted in your backend/database - transparently, securely, and without ever exposing plaintext on the server. All you need is a client-side token that lives exclusively in secure storage on the device. The backend and the database only ever see encrypted bytes. When the data is read, it's automatically decrypted on the client. In other words: your app never has to persist unencrypted data again. text/html 2020-08-13T16:26:49+00:00 https://doc.sibvisions.com/flutterui/custom_screen?rev=1597336009&do=diff If you want to customize your screen, with flutter widgets on the client, we offer a simple API to change a screen to whatever you need. In the following sections you'll learn how to achieve that. Creating a custom screen manager To be able to customize your screens, you have to create a custom screen manager for your application. You can achieve this by extending your dart class from text/html 2023-02-02T13:40:16+00:00 https://doc.sibvisions.com/flutterui/dark_mode?rev=1675345216&do=diff Our application already supports dark mode. We try to prepare all application colors for the dark mode, but sometimes the defaults are not nice. In this case, it's possible to change application colors on your own. Currently there are some specific application colors: text/html 2020-08-06T23:18:21+00:00 https://doc.sibvisions.com/flutterui/data_api?rev=1596755901&do=diff For managing the data of a screen, the CustomScreen provides a simple API which can be accessed via getDataApi('DATA_PROVIDER_NAME') from anywhere in it's extended classes. This API provides following functions: * dynamic getValue(String columnName) text/html 2026-04-15T08:26:51+00:00 https://doc.sibvisions.com/flutterui/editor_border_styling?rev=1776241611&do=diff An editor has a default border and focus border. It looks like following: But sometimes you want a specific color for the border: It's simple to set your custom border color, e.g. editor.setStyle(new Style("f_border_color_#aa0000")); The format is: f_border[_focused]_color{_#ColorInHex}[_#ColorForDarkMode] text/html 2026-03-23T15:57:05+00:00 https://doc.sibvisions.com/flutterui/editor_features?rev=1774281425&do=diff Our editors have some hidden features which can be enabled. We don't enable all features automatically because it depends on UX which features make sense. We have a copy-to-clipboard feature: The DoB field is a date field and on the right, you have 3 icons: text/html 2023-05-24T22:07:23+00:00 https://doc.sibvisions.com/flutterui/editor_icons?rev=1684966043&do=diff An editor may have different default icons like a small x for deleting the content. Dependent of the datatype, a small date icon or a small down arrow will be shown. The date icon means that the content is a date. The small down arrow means that the value can be choosen from a list of values. text/html 2023-06-14T09:03:41+00:00 https://doc.sibvisions.com/flutterui/faq?rev=1686733421&do=diff Dependencies/Versions All dependencies and version numbers are defined in pubscpec.yaml. e.g. environment: sdk: ">=3.0.0 <4.0.0" flutter: "3.10.4" Android For Android devices, we have following settings: compileSdkVersion 33 minSdkVersion 21 targetSdkVersion 33 text/html 2023-02-01T23:49:59+00:00 https://doc.sibvisions.com/flutterui/group_config?rev=1675295399&do=diff The group panel has different style options. The default (modern) style shows a round rectangle with the group label. The flat style shows a solid line with a label. To use the flat style, simply use: Style.addStyleNames(group, "f_panel_flat"); text/html 2023-03-08T09:51:26+00:00 https://doc.sibvisions.com/flutterui/haptic_feedback?rev=1678269086&do=diff A mobile device supports haptic feedback. If you want to use this feature, simply set a style for your button. We only have haptic feedback for buttons right now. Style.addStyleNames(button, "f_haptic"); Possible styles are: f_haptic - Provides vibration haptic feedback to the user for a short duration. text/html 2026-04-15T08:35:56+00:00 https://doc.sibvisions.com/flutterui/home?rev=1776242156&do=diff This is the place for the documentation of our Flutter UI. If you're interested in API details or developer documentation, please read here. text/html 2026-04-15T10:14:42+00:00 https://doc.sibvisions.com/flutterui/image_avatar?rev=1776248082&do=diff An image will be shown as it is, as rectangle. Sometimes it looks better as avatar: To show the image as avatar, simply do editor.addStyleNames("f_as_avatar") Per default, the radius will be set to the minimum of width and height. If you want to use the full size of the editor area, just add text/html 2023-03-24T10:54:06+00:00 https://doc.sibvisions.com/flutterui/label_styles?rev=1679655246&do=diff Our labels have a default height because of extra top and bottom padding. The label is as high as a textfield. This is great if the text is left or right to a textfield, but for simple text labels without textfield this is not stylish. We have additional styles regarding padding: text/html 2022-09-16T07:43:49+00:00 https://doc.sibvisions.com/flutterui/list_table?rev=1663314229&do=diff The example widget which uses a List instead of a Table can be found here. Impressions: Mobile Web text/html 2022-12-04T14:24:56+00:00 https://doc.sibvisions.com/flutterui/login_modern?rev=1670163896&do=diff The login view has different modes. The default mode shows the login view with a simple style. The modern mode tries to show a login with modern style. Both modes compared: If you prefer the modern mode, simply add: <login.layout>modern</login.layout> text/html 2022-09-16T07:42:42+00:00 https://doc.sibvisions.com/flutterui/map_integration?rev=1663314162&do=diff The example widget for Map integratin can be found here. Impressions: Mobile Web text/html 2026-03-23T14:56:53+00:00 https://doc.sibvisions.com/flutterui/menu_styles?rev=1774277813&do=diff We offer different default menu styles: <menu> <!-- list, grid, drawer, tabs --> <mode>grid</mode> <!-- shows the group name --> <grouped>true</grouped> <!-- show group only if more than 1 group exists --> <group_only_on_multiple>false</group_only_on_multiple> </menu> text/html 2023-01-11T14:06:38+00:00 https://doc.sibvisions.com/flutterui/menuitem_search?rev=1673445998&do=diff If your application has lots of menu items because your application has many screens, a search option is helpful. This search option is already available in the application frame, but it only appears if you have at least 8 screens in your mobile app or 12 screens in your web application. text/html 2026-03-23T14:27:12+00:00 https://doc.sibvisions.com/flutterui/mobile_style?rev=1774276032&do=diff Here's an example configuration for the mobile style. The file contains additional information about possible parameters. <?xml version="1.0" encoding="UTF-8"?> <style> <!-- the icon for application overview (url or resource path) --> <!-- <icon></icon> --> <login.title>Demo UI</login.title> <login.topColor>#770000</login.topColor> <!-- the bottom color (default: white) --> <!-- <login.bottomColor></login.bottomColor> --> <login.logo>/com/sibvisions/apps/mobile/demo/images/s… text/html 2023-03-04T15:19:41+00:00 https://doc.sibvisions.com/flutterui/multi_apps?rev=1677943181&do=diff An application is an application - exactly 1. You have many applications installed on your smartphone and every application has its own icon and name. With our flutter app it's possible to manage more than one application, if you want. We support an application overview and handle app management. This is an awesome feature because you have one app for all your custom applications. It's like an application group. text/html 2023-03-24T11:35:51+00:00 https://doc.sibvisions.com/flutterui/panel_styles?rev=1679657751&do=diff If you create custom components it's often the case that your custom component extends a Panel (container) and you add sub components. If you want to show a border around your Panel, it's tricky if you want the same border as usual in the flutter app. The color is specific and also the border radius. text/html 2022-12-21T15:13:53+00:00 https://doc.sibvisions.com/flutterui/pixel_scaling?rev=1671635633&do=diff Our default implementation multiplies a pixel with factor 2.0, because 1px is not enough on mobile devices. This applies to preferred/min/max sizes and all gaps/anchor positions. If this doesn't work for your UI, simply change the factor in mobile_style.xml: text/html 2026-03-23T14:29:33+00:00 https://doc.sibvisions.com/flutterui/screen_styles?rev=1774276173&do=diff A simple screen is shown with a safe-area around it, to be able to click/tap all components. Many devices have a rounded case and the UI should work without problems, e.g. The first screenshot doesn't use a safe-area and the table overlaps the case. The second screenshot uses a safe-area and everything fits. But if you need the full-size. It's possible to disable the safe-area with following style: text/html 2022-09-16T07:44:48+00:00 https://doc.sibvisions.com/flutterui/sign_integration?rev=1663314288&do=diff The example widget for Signature integration can be found here. Impressions: Mobile Web text/html 2023-02-02T13:48:37+00:00 https://doc.sibvisions.com/flutterui/slider_button?rev=1675345717&do=diff A standard button performs an action on click/press. Sometimes it's nice to use a standard button as “confirmation button”. In this case it's better to use a slider button. Our standard implementation offers such styling variant: Simply set: Style.addStyleNames(button, "f_slide"); text/html 2023-02-21T08:29:25+00:00 https://doc.sibvisions.com/flutterui/startup_props?rev=1676968165&do=diff Physical Device osName: Android 12 iOS osVersion: <android_sdk_version> e.g. 31 <ios_version> e.g. 16.3 screenWidth: <width> e.g. 392 screenHeight: <height> e.g. 856 appVersion: 2.2.0+1 deviceId: <ios_uuid> readAheadLimit: 100 technology: FlutterMobile deviceMode: mobile deviceType: <hardware_manufacturer> e.g. Xiaomi iPhone deviceTypeModel: <android_end_user_visible_name> e.g. M2103K19PG <ios_assig… text/html 2023-02-22T06:59:32+00:00 https://doc.sibvisions.com/flutterui/startup_urlparams?rev=1677049172&do=diff The startup requires specific properties. Sometimes it's nice to override specific properties and use different values. This case is possible with URL parameters in case of flutter web in browsers. We support following overrides: appName baseUrl username password language webOnly (value: true or false) mobileOnly (value: true or false) text/html 2022-12-01T11:07:46+00:00 https://doc.sibvisions.com/flutterui/table_config?rev=1669892866&do=diff The table always has a floating insert button in the right bottom corner, if it's possible to insert new records. It's the same functionality as with long-press on the table. If you want to hide the floating insert button, simply add a style with following name: text/html 2023-02-28T23:23:17+00:00 https://doc.sibvisions.com/flutterui/text_button?rev=1677626597&do=diff A button is a filled rectangle with text in it. In most screens, this is great, but sometimes a button shouldn't look like a button. It should look like clickable text. This is a design decission, but check for yourself: It's easy to style a button like text. Simply set following style: text/html 2026-03-23T15:31:22+00:00 https://doc.sibvisions.com/flutterui/theme_customizing?rev=1774279882&do=diff We support full customization of application theme. Simply set themeBuilder in your main: void main() async { await FlutterUI.start( FlutterUI( ..., themeBuilder: (themeData, seedColor, brightness, useFixedPrimary) { ThemeData theme = themeData.copyWith( appBarTheme: AppBarTheme(backgroundColor: themeData.colorScheme.surface), elevatedButtonTheme: ElevatedButtonThemeData( style: ElevatedButton.styleFrom( shape: const Round… text/html 2026-04-24T07:46:46+00:00 https://doc.sibvisions.com/flutterui/theme_no_customizing?rev=1777016806&do=diff If you want a custom look for your app, your best bet is to use our app as a base and build your own app from it. You can easily adjust the theme and set your own icons without having to implement any logic. You just handle the styling, and everything else remains just as dynamic. text/html 2023-07-06T10:20:45+00:00 https://doc.sibvisions.com/flutterui/using_darkmode?rev=1688638845&do=diff If you want to build a different widget tree in dark mode, just do following: screenBuilder: (context, screen) => Container( decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.fill, image: AssetImage( Theme.of(context).brightness == Brightness.light ? 'assets/images/background.png' : 'assets/images/background_dark.png', ), ), ), text/html 2023-03-03T13:27:25+00:00 https://doc.sibvisions.com/flutterui/version_check?rev=1677850045&do=diff The flutter application doesn't work without the backend server. This server has a specific version and also the flutter application has support for a specific server version. If version is not supported, a message is shown in the flutter application.