diff --git a/docs/ff-concepts/animations/hero_animations.md b/docs/ff-concepts/animations/hero_animations.md index 9b64e43c..4a314576 100644 --- a/docs/ff-concepts/animations/hero_animations.md +++ b/docs/ff-concepts/animations/hero_animations.md @@ -79,7 +79,7 @@ The steps to build such an example are as follows:

-3. Add [navigation action](../../resources/ui-building-blocks/pages/navigation-.md#navigate-to-action) from page 1 to page 2. +3. Add [navigation action](../../ff-concepts/navigation-routing/page-navigation.md#navigate-to-action) from page 1 to page 2. @@ -187,6 +187,6 @@ This is because the image on the second page does not exist on the very first fr To fix this issue, you can avoid loading an image directly from Firestore. Instead, you can pass the image URL (which would have already been retrieved from the Firestore) from the previous page to the second page. And then use that URL to load the image. -See how to [pass data](#) from one page to another. +See how to [pass data](../../ff-concepts/navigation-routing/passing-data.md) from one page to another.

\ No newline at end of file diff --git a/docs/resources/control-flow/backend-logic/backend-query/backend-query.md b/docs/resources/control-flow/backend-logic/backend-query/backend-query.md index e6cdcd33..e481b317 100644 --- a/docs/resources/control-flow/backend-logic/backend-query/backend-query.md +++ b/docs/resources/control-flow/backend-logic/backend-query/backend-query.md @@ -20,8 +20,7 @@ We offer you the following types of Backend Queries that you can specify on any * [**Document from Reference**](document-from-reference.md)**:** Used to retrieve the details from a document reference. * [**API Call Query**](api-call-query.md)**:** Used to initiate an API call. -* [**SQLite Query**](sqlite-query.md): Used to execute the SQL statement defined [here] - (/settings-and-integrations/integrations/sqlite#id-3.-add-sql-queries). +* [**SQLite Query**](sqlite-query.md): Used to execute the SQL statements. * [**Algolia Search**](algolia-search-query.md)**:** Used to trigger an Algolia search on a Firestore Collection. ## Difference between Actions & Backend Query diff --git a/docs/resources/control-flow/user-interactivity/forms/form-actions/_category_.json b/docs/resources/control-flow/user-interactivity/forms/form-actions/_category_.json new file mode 100644 index 00000000..a840c102 --- /dev/null +++ b/docs/resources/control-flow/user-interactivity/forms/form-actions/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Form Actions", + "position": 3 + } \ No newline at end of file diff --git a/docs/resources/control-flow/user-interactivity/forms/form-actions/reset-form-field.md b/docs/resources/control-flow/user-interactivity/forms/form-actions/reset-form-field.md new file mode 100644 index 00000000..256c91ff --- /dev/null +++ b/docs/resources/control-flow/user-interactivity/forms/form-actions/reset-form-field.md @@ -0,0 +1,80 @@ +--- +slug: /resources/forms/reset-form-field +title: Reset Form Field [Action] +tags: [Action, Form] +keywords: [FlutterFlow, reset form field, form action, user interface, mobile app development, input clearing, form management] +description: Learn how to add Reset Form Field action in your FlutterFlow app. +sidebar_position: 1 +--- +# Reset Form Field [Action] + +This action allows you to reset a value for the Form widgets. This is helpful in clearing out any previously entered data and allows users to start fresh. + +For example, If a form has been successfully submitted, it may make sense to clear out the form fields so that the user can enter new data if they want to submit the form again. + +
+ +
+

+ +## Adding Reset Form Field action + +Follow the steps below to add this action to any widget. + +1. Select the **Widget** (e.g., Button, etc.) on which you want to add the action. +2. Select **Actions** from the properties panel, If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**. +3. Search the **Reset Form Field** (under *State Management*) action and select the widget you would like to reset. + +You can reset the same types of widgets in a single action only. e.g., multiple *TextField* widgets. + +
+ +
+

+ +:::info +You can also reset form fields that are inside the components. +![reset-form-field-component](../../imgs/reset-form-field-component.png) +::: \ No newline at end of file diff --git a/docs/resources/control-flow/user-interactivity/forms/form-actions/set-form-field.md b/docs/resources/control-flow/user-interactivity/forms/form-actions/set-form-field.md new file mode 100644 index 00000000..cd08c330 --- /dev/null +++ b/docs/resources/control-flow/user-interactivity/forms/form-actions/set-form-field.md @@ -0,0 +1,80 @@ +--- +slug: /resources/forms/set-form-field +title: Set Form Field [Action] +tags: [Action, Form] +keywords: [FlutterFlow, set form field, form action, user interface, mobile app development, input prefill, form management] +description: Learn how to add Set Form Field action in your FlutterFlow app. +sidebar_position: 0 +--- +# Set Form Field [Action] + +This action allows you to set a value for the Form widgets. For example, you could use this action to auto-populate a form based on a user's previous submission. + +You could also dynamically update a dropdown menu based on a user's previous selection, such as showing relevant cities based on a selected country. + +
+ +
+

+ +## Adding Set Form Field action + +Follow the steps below to add this action to any widget. + +1. Select the **Widget** (e.g., Button, etc.) on which you want to add the action. +2. Select **Actions** from the properties panel. If it's the first action, click the **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**. +3. Search the **Set Form Field** (under *State Management*) action and select the widget you would like to set. +4. Now, you can set its value directly or from a variable. + +
+ +
+

+ +:::info +You can also set form fields that are inside the components. +

+![set-form-field-in-component](../../imgs/set-form-field-in-component.avif) +::: \ No newline at end of file diff --git a/docs/resources/control-flow/user-interactivity/forms/form-validation.md b/docs/resources/control-flow/user-interactivity/forms/form-validation.md new file mode 100644 index 00000000..c496da4e --- /dev/null +++ b/docs/resources/control-flow/user-interactivity/forms/form-validation.md @@ -0,0 +1,289 @@ +--- +slug: /resources/forms/form-validation +title: Form Validation +tags: [Form, Validation, Error Handling] +keywords: [FlutterFlow, form validation, input validation, error handling, user interface, mobile app development, data integrity] +description: Learn how to add Form Validation widget in your FlutterFlow app. +sidebar_position: 2 +--- + + +# Form Validation + +You can add validations to input fields by wrapping them inside the Form widget. The Form widget enables you to validate user inputs and display appropriate messages when validation criteria are not met. + +For example, you could use it to check if a user has given a valid email and password. This makes it easy to handle user input and ensure that the data is correct before it is submitted to the server or stored locally. + +## Adding Form widget + +Let's see how to add a *Form* widget by building a signup example. Here's how it looks: + +
+ +
+

+ +Building and validating a *Form* includes the following steps: + +1. [Adding input fields](#1-adding-input-fields) +2. [Adding validations](#2-adding-validations) +3. [Adding validate action](#3-adding-validate-action) + +### 1. Adding input fields + +A form widget can only validate if there are any input fields. Here's an example of adding input fields for the signup form. + +1. First, add the **Form** widget itself from the **Form Elements**. +2. Inside the form, add the [**Column**](#) widget from the **Layout Elements** tab. +3. Now, add two [**TextFields**](form-widgets/textfield) (one for email and one for password). +4. Add a [**Button**](#) widget and then add [Date/Time Picker](#) action to get the date of birth. +5. Add one more [**Button**](#) to validate and submit the form. + +Here's how it looks: + +![Input fields](../imgs/fv-input-fields.avif) + +### 2. Adding validations + +Validation refers to the process of checking user input for correctness and ensuring that it meets certain criteria or requirements. This can include checking for the presence of required fields, verifying that a value is within a certain range or format, or validating against the custom pattern. + +After adding input fields, they will be available to be validated using the form widget properties. Here's how you do it: + +1. Select the **Form** widget, and move to the **Properties Panel > Validate** section. +2. Identify the **TextField** on which you would like to add the validation and tick the box on the right side. + 1. Inside the **Error Message** input box, provide the message that will be displayed (below the *TextField*) if a user leaves the *TextField* empty. + 2. You can also specify the **Min Required Character** and **Max Allowed Characters**. + 1. **Min Required Character**: This is the minimum character required for the validation to pass. For example, If you provide a value as 9 and a user enters the value as *a@a.com* (which is 6 characters), **then the validation fails, and an error message will be displayed. + 1. Inside the **Minimum Character** **Error Text** input box, provide the message that will be displayed if a user doesn't provide the min required characters. + 2. **Max Allowed Characters**: This is the maximum number of characters allowed for the validation to pass. For example, If you provide a value of 15 and a user enters a password that exceeds 15 characters, then the validation fails, and an error message will be displayed. + 1. Inside the **Max Allowed Characters** **Error Text** input box, provide the message that will be displayed if a user enters more than the maximum allowed characters. + +
+ +
+

+ +3. You can also choose to validate the input using our predefined validators or by creating the custom one. To do so, you can set the **Text Validator** to the one you need. + 1. If the required validation is not on the list, you can select **Custom Regex** and specify your own **Regex (Dart/JS)**. Here are some examples of *Custom Regex*: + + + | Examples | Regex (Dart/JS) | + | --- | --- | + | IP address (e.g., 192.168.1.1) | ^\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}$ | + | Time in the 24-hour format (e.g., 13:45) | ^([01]?[0-9]|2[0-3]):[0-5][0-9]$ | + 2. Also, provide a message in **Invalid Text Error Text**. This will be displayed If validation for the *Custom Regex* fails. +4. You can also add validation on certain actions that can be used inside the form, such as *Date/Time Picke*r and *PlacePicker*. To do so, find the action name and tick the box on the right side. + 1. Now you must enable **Add Action on Error** and set the **Action Type** to the appropriate one. This will be triggered if the validation fails. For example, in this case, if a form is submitted without selecting the birth date, you can add a Show Snackbar action asking a user to select the date. + + +![Validating Date/Time picker](../imgs/validating-date-time-picker.png) + +### 3. Adding validate [Action] + +Follow the steps below to add this action to any widget. + +1. Select the **Widget** (e.g., Container, Button, etc.) on which you want to add the action. +2. Select **Actions** from the properties panel (the right menu), If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**. +3. Search and select the **Validate Form** (under *Widget/UI Interactions*) action. +4. Set the **Select Form to Validate** to your **Form name**. +5. You can chain the next action that will be triggered if the validation passes. + + +
+ +
+

+ +## Auto validating + +Rather than displaying an error message after the user submits the form, you can provide real-time feedback as they type in the *TextField* widget to indicate validation errors. This feature can be particularly useful for lengthy forms where it can save the user's time and effort. + +To auto validate a form, select **TextField >** move to the **Properties Panel > Add validations >** and then enable the **Automatically Validate**. + +
+ +
+

+ +![Enabling auto validate](../imgs/enable-auto-validate.avif) + + +## Validating a Form on TextField On Submit + +You can also validate a form when you are done entering a value inside the *TextField* using the *On Submit* action. + +
+ +
+

+ + +To validate a form on *TextField* *On Submit*: + +1. Select the **TextField** widget and select **Actions** from the Properties panel. +2. Click **+ Add Action** button, and ensure that the **Type of Action** is set to **On Submit**. +3. Search, and select the **Validate Form** (under UI Interactions) action. +4. Set the **Select Form to Validate** to your **Form name**. + +
+ +
+

+ +--- + +## Video guide + +If you prefer watching a video tutorial, here's the one for you: + +
+ +
+

\ No newline at end of file diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/_category_.json b/docs/resources/control-flow/user-interactivity/forms/form-widgets/_category_.json new file mode 100644 index 00000000..ba372211 --- /dev/null +++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Form Widgets", + "position": 1 + } \ No newline at end of file diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox-group.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox-group.md new file mode 100644 index 00000000..1bc7cc5c --- /dev/null +++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox-group.md @@ -0,0 +1,269 @@ +--- +slug: /resources/forms/checkbox-group +title: CheckboxGroup +tags: [Widget, CheckboxGroup, Form] +keywords: [FlutterFlow, CheckboxGroup, form input, user interface, mobile app development, Flutter widget, multiple choice] +description: Learn how to add CheckboxGroup widget in your FlutterFlow app. +sidebar_position: 3 +--- + + +# CheckboxGroup + +The CheckboxGroup widget is used to allow a user to select multiple items. The checkbox is displayed before the item name, which you can check/uncheck to make/remove the selection. + +You can use the CheckboxGroup widget for implementing multiple selections such as repeating days for alarm, languages a user can speak, and allowing users to select pizza toppings. + +## Adding CheckboxGroup + +Here's an example of how you can use the CheckboxGroup widget in your project: + +1. First, add the **CheckboxGroup** widget from the **Form Elements** tab or add it directly from the widget tree. +2. By default, the CheckboxGroup widget adds a single option named **Option 1**. To change the name, move to the properties panel (on the right side of your screen), and scroll down to the **Define Options** section. Find the **Option 1** property and change the **name**. +3. To add more options, move to the properties panel, and scroll down to the **Define Options** section. + 1. Click on the **Add Option** text. + 2. Enter the name in **Option 2 Text**. +4. To remove the option, click on the cancel icon displayed in the **Option name** property. +5. Click on the **Set from Variable** to show the options from a variable such as app state variable, API response variable, or Firestore Document. + +
+ +
+

+ +## Setting initial selection + +Sometimes you might want to display the CheckboxGroup with some options already selected. For example, selecting the topping options that are already served with Pizza itself. You can do so by setting the initial selection for the CheckboxGroup. + +To set initial selection manually: + +1. Select the **CheckboxGroup** from the widget tree or the canvas area. +2. Move to the properties panel (on the right side of your screen) and scroll down to the **Initially Selected** section. +3. Click on the **Add Selected** and enter the option name that you would like to display as selected. **Note**: Make sure you enter the correct name and it matches with the option name added inside the define options section. +4. Similarly, you can display the other option(s) as selected. + +
+ +
+

+ + +## Clear/Select all items [Action] +You might want to allow users to clear or select all items in one go. You can do so by adding the following action. + +
+ +
+

+ +Follow the steps below to add this action to any widget. + +1. Select the **Widget** (e.g., Button) on which you want to add the action. +2. Select **Actions** from the properties panel (the right menu), If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**. +3. Search and select the **Clear All/Select All** (under *Widget/UI Interactions*) action. +4. **Choose Multiselect Widget** name from the dropdown. +5. Finally, set the **Action Type** to **Clear All** or **Select All**. + +
+ +
+

+ + +## Customization + +You can use the Properties Panel to customize the appearance of your widget. + +### Set padding around the checkbox + +To create empty space around the checkbox: + +1. Select the **CheckboxGroup** from the widget tree or the canvas area. +2. Move to the properties panel and find the **Item Padding** property. +3. Set the padding for the L(Left), T(Top), R(Right), and B(Bottom) sides. Use the Lock button to change all values at the same time. Unlocking will allow you to modify each value separately. + + +
+ +
+

+ +### Changing checkbox color + +To change the checkbox color: + +1. Select the **CheckboxGroup** from the widget tree or the canvas area. +2. Move to the properties panel and scroll down to the **Checkbox Style** section. +3. To change the active color (i.e. color when the checkbox is selected), find the **Active Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on **Unset** and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button. +4. the Similarly you can change the check color (i.e color of the done/tickmark icon inside the checkbox). + +
+ +
+

+ +### Customizing checkbox border + +To customize the checkbox border: + +1. Select the **CheckboxGroup** from the widget tree or the canvas area. +2. Move to the properties panel and scroll down to the **Checkbox Style** section. +3. To change the checkbox border color, find the **Check Border Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on **Unset** and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button. +4. To adjust the border corner, find the **Border Radius** property and enter the values in the TL (Top left), TR (top right), BL (bottom left), and BR (bottom right) boxes. Use the Lock button to change all values at the same time. Unlocking will allow you to modify each value separately. + + +
+ +
+

+ +:::info[Trigger action on change] +See how to [**trigger an action when a selection changes**](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget. +::: \ No newline at end of file diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md new file mode 100644 index 00000000..67c7ff98 --- /dev/null +++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md @@ -0,0 +1,407 @@ +--- +slug: /resources/forms/dropdown +title: Dropdown +tags: [Widget, Dropdown, Form] +keywords: [FlutterFlow, Dropdown, form input, user interface, mobile app development, Flutter widget, selection menu] +description: Learn how to add Dropdown widget in your FlutterFlow app. +sidebar_position: 1 +--- + +# Dropdown + +The DropDown widget enables users to choose from a list of options. It requires a set of items to display and an initial value to indicate the current selection. When a user selects an item from the dropdown list, the value is updated to reflect the selected item. + +You can use this widget in any situation where you want users to select from a set of options, such as selecting a country, choosing a language, or picking a color. + +## Adding DropDown widget + +Let's see how to add a *DropDown* widget and build an example that shows the selected value on a Text widget. Here's how it looks: + +
+ +
+

+ +1. Add the **DropDown** widget, move to the **Properties Panel > Define Options >** click **Add Options** to add items. +2. To display the default value, move to the **Initial Configuration** section and enter the value. Ensure it matches one of the options added in the previous step. +3. The selected dropdown value can be accessed via *Widget State > DropDown*. To display it on the *Text* widget, add a [**Text**](#) widget, move to the properties panel, click on **Set from Variable** and choose the **Widget State > DropDown** (i.e., name of your dropdown). + +
+ +
+

+ +### Setting initial value + +Setting a default or initial value for the DropDown is a common requirement for many apps. It can provide a better user experience by pre-selecting the most likely option. + +To set an initial value: + +1. Select the **DropDown** widget > move to the **Properties Panel** > **Initial Configuration**. +2. In **Initial Option Value**, enter the option name that you want to set as default. +3. To set this value dynamically, open the **Set from Variable** menu and select the variable. + 1. For example, to set this value from Firebase, ensure you have access to Firebase document that contains the field you want to set. + 2. Open the **Set from Variable** menu > select **[collection_name] Document** > select the **field**. +4. If you don't set the initial value, the **Hint Text** will be displayed. + +
+ +
+

+ +### Saving DropDown value on selection change + +You might want to save the dropdown value as soon as the selection changes. This approach is useful when you want to ensure that the user's selection is immediately saved without having to wait for them to submit the form. By doing so, you can provide a better user experience and reduce the risk of data loss in case of any interruption. + +You can do so by adding an action such as [update app state](#), [update Firestore record](#) that [triggers when a selection changes](#) on this widget. + +![Saving *DropDown* value on selection change](../../imgs/saving-dp-value-on-selection-change.webp) + + +## Customizing + +You can customize the appearance and behavior of this widget using the various properties available under the properties panel. + +### Showing option label + +The dropdown widget allows you to show a label than the actual option value. By adding the option label, you can have a simple/short name or abbreviation (which is quite easy to compare and process in the backend) instead of a tricky name (e.g., Falkland Islands (the) [Malvinas]). + +For example, In a Country dropdown, you could have different *Option* *Values* to store in the backend and *Option Labels* to show in the dropdown list. Just like below: + +| Option Values | Option Labels | +| --- | --- | +| US | United States | +| IN | India | +| FK | Falkland Islands (the) [Malvinas] | + +To show option label: + +1. Select the **DropDown** widget, move to the properties panel, and turn on the **Add Option Labels** toggle. +2. Enter the value in the **Define Option Values** and **Define Options Labels**. Click **Add Option** (below the *Define Option Values*) to add more values and labels. +3. You must also set the **Data Type** for the values. For example, if the values you are going to store are in numbers like 1,2,3, set it to *Integer*. + +
+ +
+

+ +### Searchable dropdown + +The *DropDown* widget is a good choice when you have a small number of options, up to around 10-20; however, If you have more options than that, consider using a searchable dropdown. + +A searchable dropdown allows users to search and filter options by typing in a search bar. As the user types, the dropdown list is dynamically filtered to only show matching options. This is especially useful when dealing with long lists of options and can improve the user experience by reducing the time it takes to find and select an option. + +
+ +
+

+ +To make the dropdown widget a searchable one: + +1. Select the **DropDown** widget, move to the **Properties Panel > DropDown Search >** enable **Is Searchable** option. +2. You can also customize the **Search Hint Text** property. + +![Making dropdown searchable](../../imgs/making-dd-searchable.png) + +### Disable dropdown + +You might need to disable a dropdown when certain conditions are not yet met or need to be fulfilled. For example, when the dropdown options are dependent on other fields, and those fields are not filled yet. + +
+ +
+

+ +To disable the dropdown: + +1. Select the **DropDown** widget, move to the **Properties Panel > DropDown Search >** enable **Disable Dropdown** option. +2. Click on **Unset** and select the source that returns the boolean value (i.e., True or False), such as boolean variable, [Conditions](../../../functions/control-flow-actions/conditional-logic), [Code Expression](#). + +![Disabling dropdown](../../imgs/disabling-dropdown.png) + +### Allow multi select + +You might want to allow users to select multiple options from the dropdown list. For example, on an e-commerce app, users might want to filter products based on multiple attributes, such as t-shirts in both 'blue' and 'red' colors. + +To allow multi-select, select the **Dropdown** widget, move to the properties panel, find the **Allow Multi Select** property, and enable it. + +:::info +To clear the selection, you can use the [Reset Form Fields](#) action and choose the **Reset Dropdown Fields** option. Then, simply select the name of the dropdown widget you wish to reset. +::: + +
+ +
+

+ + +### Changing dropdown size + +To change the height and width of the dropdown, select the **DropDown** widget, move to the **Properties Panel > DropDown Properties > enter the Width and Height value**. + +### Set max height + +If needed, you can also control the dropdown height using the **Max Height** property. + +
+ +
+

+ +### Adding margin + +Margin adds a space between the DropDown's text and its border. To change the margin, select the **DropDown** widget, move to the **Properties Panel > DropDown Properties >** find the **Margin** property, and change the values. + +
+ +
+

+ +### Changing background color + +To change the background color, move to the **Properties Panel > DropDown Style > set the Fill Color**. + +![Changing background color](../../imgs/changing-background-color.png) + +### Changing menu elevation + +Menu elevation adds a shadow to the dropdown, giving it a sense of depth and making it appear above the surface it is placed on. + +To change the menu elevation (depth or Z-axis), move the **Properties Panel >** enter the **Menu** **Elevation** value. + +:::info +The higher value draws the bigger size of the shadow. +::: + +### Adding border + +See how to [add a border](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#adding-border). + +### Show/hide underline + +To show or hide the dropdown underline, move the **Properties Panel >** **DropDown Style** > use the **Hides Underline** toggle. + +
+ +
+

+ +### Fix position + +By default, the dropdown options are displayed over/above the dropdown button. To display beneath/below the button, move the **Properties Panel >** **DropDown Style** > switch on the **Fix Position** toggle. + +![Fix position for dropdown options](../../imgs/fix-position.webp) + +:::info[Trigger action on change] +See how to [**trigger an action when a selection changes**](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget. +::: \ No newline at end of file diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md new file mode 100644 index 00000000..1ca90473 --- /dev/null +++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md @@ -0,0 +1,491 @@ +--- +slug: /resources/forms/radiobutton +title: RadioButton +tags: [Widget, RadioButton, Form] +keywords: [FlutterFlow, RadioButton, form input, user interface, mobile app development, Flutter widget, selection control] +description: Learn how to add RadioButton widget in your FlutterFlow app. +sidebar_position: 2 +--- + +# RadioButton + +The RadioButton widget is used to allow a user to select one option from multiple selections. + +You can use the RadioButton widget for implementing a single selection such as gender selection, notification preferences, etc. + + +## Adding RadioButton to Your Project + +Here's an example of how you can use the RadioButton widget in your project: + +1. First, drag the [**Column**](#) widget from the **Layout Elements** tab (in the Widget Panel) or add it directly from the widget tree. Set its **Cross Axis Alignment** to **Stretch**. +2. Now add the **RadioButton** widget from the **Form Elements** tab or add it directly from the widget tree. + +:::info +The RadioButton widget adds a single option named **Option 1** by default. +::: + +
+ +
+

+ +### Changing Option Name + +To change the name of the option: + +1. Select **RadioButton** from the widget tree or from the canvas area. +2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Define Options** section. +3. Find the **Option 1** property and change the **name**. + +
+ +
+

+ +### Adding or Removing Option + +To add or remove an option from the RadioButton: + +1. Select **RadioButton** from the widget tree or from the canvas area. +2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Define Options** section. +3. Click on the **Add Option** text. +4. Enter the name in **Option 2 Text**. +5. To remove the option, simply click on the cancel icon () displayed in the **Option name** property. + + +
+ +
+

+ +### Setting Initial Option + +When you run the app, no option is selected by default. + +To set the initial option: + +1. Select **RadioButton** from the widget tree or from the canvas area. +2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Initial Option** property. +3. Enter the **name** of the option. For example, entering a value as **Jupiter** will show the second option selected on running the app. + +
+ +
+

+ +### Styling Selected Option + +To change the text style of the selected option: + +1. Select **RadioButton** from the widget tree or from the canvas area. +2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Radio Button Text Style** section. +3. Checkmark the **Change Selected Text Style**. (Click on it) +4. Under the **Radio Button Selected Text Style** section, change the text style. + +
+ +
+

+ +## Retrieving RadioButton Selection + +Let's build an example of showing the selected option in a Text widget. + +
+ +
+

+ +:::info +For simplification purposes, the selected option is shown in the Text widget. In a real-world scenario, you may pass the RadioButton selection to your Backend (Firestore Database/API call). +::: + +To retrieve the user's selection: + +1. Add the [**Text**](#) widget to your page. +2. Move to property editor and click on the **Set from Variable** text. (This will open a new panel) +3. Set the **Source** to **Widget State**. +4. Set the **Available Options** to **RadioButton**. +5. (Optional) Set the default value if you wish to. +6. Click **Save**. + +
+ +
+

+ + +## Changing the Properties + +The Properties Panel can be used to customize the appearance and behavior of your widget. + +### Changing Options Height + +To change the height of all options: + +1. Select **RadioButton** from the widget tree or from the canvas area. +2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Radio Button Properties** section. +3. Enter the desired height into the **Option Height** box. + +
+ +
+

+ +### Adding Space Around Option Text + +To add some space around the option text: + +1. Select **RadioButton** from the widget tree or from the canvas area. +2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Radio Button Properties** section. +3. Find the **Margin** property and enter the values. +4. Click on the Refresh icon to reset the values. + +:::info +Use the Lock button to change the Left, Top, Right and Bottom padding all at the same time. Unlocking will allow you to modify each value separately. +::: + +
+ +
+

+ +### Showing Options Horizontally + +By default, all options are shown as if they were inside the [Column](#) widget. Using *Axis* property, you can change this behavior to display all options horizontally as if they are inside the [Row](#) widget. + +To display all options horizontally: + +1. Select **RadioButton** from the widget tree or from the canvas area. +2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Radio Button Properties** section. +3. Find the **Axis** property, change it to **Horizontal**. + +
+ +
+

+ +### Aligning Options + +Changing the alignment will change how the options are distributed in the horizontal space. + +To change the option alignment: + +1. Select **RadioButton** from the widget tree or from the canvas area. +2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Radio Button Properties** section. +3. Find the **Alignment** dropdown and select from the options displayed that include Start, Center, End. +4. If the **Axis** property is set to **Horizontal**, you will see options that include Start, Center, End, Space evenly, Space between, and Space around. + +
+ +
+

+ +### Changing Button Position + +If you want to display the button on the opposite side of the option text i.e right side, you can do so using the *Button Position* property. + +To change the button position: + +1. Select **RadioButton** from the widget tree or from the canvas area. +2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Radio Button Properties** section. +3. Find the **Button Position** property, change it to **Right**. + + +
+ +
+

+ +### Styling Radio Button + +To change the color of selected and unselected options: + +1. Select **RadioButton** from the widget tree or from the canvas area. +2. Move to the Property Editor (on the right side of your screen) and scroll down to the **Radio Button Properties** section. +3. Find the **Selected Color** property, click on the box next to **Unset**, select the color, and then click **Use Selected Color** or click on **Unset** and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button. +4. Find the **Unselected Color** property, click on the box next to **Unset**, select the color, and then click **Use Selected Color** or click on **Unset** and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button. + +
+ +
+

+ + +:::info[Trigger action on change] +See how to [**trigger an action when a selection changes**](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget. +::: \ No newline at end of file diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md new file mode 100644 index 00000000..431e4456 --- /dev/null +++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md @@ -0,0 +1,1029 @@ +--- +slug: /resources/forms/textfield +title: TextField +tags: [Widget, TextField, Form] +keywords: [FlutterFlow, TextField, form input, user interface, mobile app development, Flutter widget, text input] +description: Learn how to add TextField widget in your FlutterFlow app. +sidebar_position: 0 +--- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# TextField + +The TextField widget allows users to enter text, numbers, and symbols in your app. You can use the TextField widget to build forms, send messages, dialogs, search, etc. + +## Adding TextField widget + +Let's see how to add a TextField widget and see an example of displaying its value in an [Alert Dialog](#). + +
+ +
+

+ +Here are the steps: + +1. First, add the TextField widget, move to the properties panel and give it a name. +2. Add the [**Button**](../../../../../resources/ui-building-blocks/widgets/built-in-widgets/button) widget and on tap of it, add an [Alert Dialog action](#). While adding this action, provide the Message **From Variable > Widget State > [TextFieldName]**. + +
+ +
+

+ +## Customizing + +You can customize the appearance and behavior of this widget using the various properties available under the properties panel. + +### Changing width + +By default, the TextField widget takes all the available space in the horizontal direction. You might want to limit its width to match your design. See how to change the width of this widget. + +### Adding multiline/auto expand support + +By default, a TextField is only one line. So when you type in a long text that won't fit in one line, you'll be able to see an entire message using a horizontal scrollbar. You can change this default behavior and show the full message (without a horizontal scrollbar) by making the TextField multiline/auto-expand. + +To make a TextField multiline/auto-expand, move the **Properties Panel *>*** find the **Max Lines** and **Min Lines** properties. + +1. To make the TextField auto-expand as long as its parent allows, remove the **Max Lines** value and set the **Min Lines** to **1**. +2. To make the TextField auto-expand up to a few lines and then show a vertical scrollbar to see the full message, set **Max Lines** to a value up to which you like to show an entire message (e.g., 3,5) and **Min Lines** to **1**. + +
+ +
+

+ +### Setting prefilled value + +You might want to display a TextField with some initial value. This can be any specific value such as "*What are you looking for*", "*Input your Email*", or a value from any variable. + +To set the initial value, move to the **Properties Panel > TextField Properties > Initial Value** and enter the specific value or *Set from Variable*. + +![setting-prefilled-value](../../imgs/setting-prefilled-value.avif) + +### Adding label + +Showing a label helps users understand what should be entered into the TextField. If you don't have an initial value set, the *Label Text* will appear as full size in the TextField. Once the user taps the TextField, the *Label Text* will become smaller, and the *Hint Text* will appear. + +To set the label, move to the **Properties Panel > Label Properties >** enter the **Label Text**. + + +![adding-label](../../imgs/adding-label.avif) + +When the TextField is set to [Multiline](#making-textfield-multiline-auto-expand) the label appears in the center. To get it closer to the hint text, switch on the **Align Label With Hint** property. + +
+ +
+

+ +### Setting hint text + +Showing a hint text helps users know what information is needed to enter into the TextField. For example, showing hint text as "Enter Your Email Here" clearly informs the user to enter their email. + +To set the hint text, move to the **Properties Panel > Hint Properties > enter the Hint Text**. + +![setting-hint-text](../../imgs/setting-hint-text.avif) + +### Decorating TextField + +Various properties under the *Input Decoration Properties* allow you to customize the TextField to match your design. + +### Changing TextField background color + +To change the background color, move to the **Properties Panel > Input Decoration Properties >** enable **Filled >** set the **Fill Color**. + +
+ +
+

+ +### Adding border + +Here's an example of how you can add a border around the TextField: + +1. Select TextField widget, move to the **Properties Panel > Input Decoration Properties > select the Input Border Type**. + 1. Choose **Outline** to place a border around the entire field. + 2. Choose **Underline** to place a border only on the bottom of the field. + 3. Choose **None** to completely remove the border. +2. You can also set a color to the border for various states, such as when TextField is in a *Focused* or *Error* state. To do so, use the **Border Color**, **Focused Border Color**, and **Error Border Color**. +3. To increase the border thickness, use the **Border Width** property. +4. To create the rounded border, use the **Border Radius** property. By default, any value your enter will be set for all corners, which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). Click on the lock icon to change each corner separately. Use the refresh icon to reset the values. + +
+ +
+

+ +### Add content padding + +Content Padding adds space between the test and the border of your TextField. + +To add content padding, move to the **Properties Panel > Input Decoration Properties >** enter the **Content Padding** value. + +
+ +
+

+ +### Reducing TextField height + +To reduce TextField's height to as minimum as possible, select the TextField widget, move to the **Properties Panel >** enable the **Dense** property. + +
+ +
+

+ + +### Changing error message styling + +You can also change the text styling for the error message. To do so, head over to **Properties Panel > Input Decoration Properties >** enable **Custom Error Style** and [change the text styling](#). + +![changing-error-message-styling](../../imgs/changing-error-message-styling.avif) + +### Adding Icon + +You might want to add an icon inside the TextField, either at the start or end. You can do so using the *Leading* and *Trailing* Icon property. + +To add a leading or trailing icon, move to the **Properties Panel >** find the **Leading** and **Trailing Icon** property > Click on the **None** button **>** search and select the icon. + +You can also [customize the icon's size and color](#). + +![adding-icon](../../imgs/adding-icon.avif) + +### Using TextField for passwords + +To make a TextField a Password Field, move to the **Properties Panel > Additional Properties >** enable the **Password Field**. + +When you enter a password, it will be obscured with the dot (•). You can see and confirm the entered password by clicking on the + +**Toggle Hide Password Icon**. You can also customize its size and color. + +![textfield-for-passowrd](../../imgs/textfield-for-passowrd.avif) + +### Clear TextField + +A clear field icon inside the TextField allows the users to quickly remove the entered text. + +To clear a TextField, move to the **Properties Panel > Additional Properties >** enable the **Show Clear Field Icon**. You can also customize the icon's color and size. + +
+ +
+

+ +### Autofocusing TextField + +When you autofocus a TextField, it mimics the tap event and immediately shows the keyboard. This makes TextField ready to receive input from you without having you click on TextField. + +To autofocus a TextField, select the TextField widget, move to the **Properties Panel** **> Additional Properties >** enable the **Autofocus** property. + +
+ +
+

+ +### Autocomplete a TextField + +You might want to allow users to enter the text by suggesting them a list of items. The suggested items are shown if it contains the currently entered text from TextField. For example, using autocomplete to get the *Country* *name*, *Fruit* *name*, etc. + +:::info +This helps avoid spelling mistakes and enhances the user experience as users won't have to enter the complete text. +::: + +To autocomplete a TextField, select the TextField widget, move to the **Properties Panel** **> Additional Properties >** enable the **Autocomplete** property. + +Now you can customize the autocomplete using the **Autocomplete Properties** section. Here's how you do it: + +1. Inside the **Autocomplete Options**, click **Add Option** and provide item names that you would like to appear in the suggestion box. +2. You can also **Set from Variable** to show items from any variable, such as app state variable, API response, and Firestore collection. + +:::info +If you *Set from Variable* and run the app in preview mode, you can try entering the country name. The list will be populated with matching countries. +::: + +
+ +
+

+ + + +3. You can also customize the appearance of the suggestion box using properties such as **Height**, **Elevation**, **Background Color**, and **Highlight Color** (highlighting the currently selected option in the dropdown list). +4. To style the text displayed inside the dropdown list, you can use the **Option Text Style** and **Substring Style** (can be used to highlight the matching text in an item name). + +
+ +
+

+ +### Auto fill hint + +When *Auto Fill Hint* property is enabled, it uses the operating system's autofill service to suggest the relevant information to the user, such as usernames, passwords, or credit card numbers, based on the context of the text field. + +For example, you have a form where the user needs to enter their credit card information. You can use this property to help the autofill service suggest the user's credit card number and expiration date. + +To enable the Auto Fill Hint property: + +1. Select the TextField widget, move to the **Properties Panel** **> Additional Properties >** enable the **Auto Fill Hint** property. +2. Set the **Auto Fill Hint Options** to one that you want to provide a hint about. + +:::warning +The availability and behavior of the *Auto Fill Hint* may vary by platform and user settings, and it does not guarantee that the operating system's autofill service will suggest the correct information to the user. +::: + +
+ +
+

+ +### Update page on change + +You might have added the TextField widget inside the search page and want to refresh the search result as the value inside the TextField changes. + +:::info +Enabling this feature will refresh the page whenever a user types into TextField after a configurable delay. +::: + +Here's an example of displaying the TextField value in a Text widget in realtime: + +1. Select the TextField widget, move to the **Properties Panel** **> Additional Properties >** enable the **Update Page On Change** property. +2. Also, set the **Update Delay (ms)** after which the page will refresh its UI when the user has stopped typing. For example, If the *Update Delay (ms)* value is set to 2000 ms (2 seconds), The page will update 2 seconds after use is done typing. For this example, let's keep it to 0. +3. Now select the **Text** widget, move to the **Properties Panel > Set from Variable > Widget State > [TextFieldName]**. Tip: You can also set the default value to be displayed until the user has entered any text. + +:::tip +We advise setting the delay value if you make an API call that accepts the input from TextField. +::: + +
+ +
+

+ +### Read only TextField + +Sometimes you might want to restrict users from entering or updating anything into TextField and only allowed it if they are in edit mode. You can accomplish this by switching the **Read Only** property. + +
+ +
+

+ +### Change cursor color + +In a form with many text fields, changing the cursor color for the currently focused field can help the user understand where their input will go when they start typing. + +To change the cursor color, head over to **Properties Panel** **> Additional Properties >** change the **Cursor Color**. + +![change-cursor-color](../../imgs/change-cursor-color.avif) + +### Changing keyboard type + +When the keyboard opens by default, you can type any text. You might want user input in a certain format, such as a phone number, email address, website URL, etc. In this situation, you can choose a predefined keyboard type to present the appropriate key selections. + +To change the keyboard type, select the TextField widget, move to the **Properties Panel** **> Additional Properties >** set the **Keyboard Type** to the right one. + + +![keyboard-types](../../imgs/keyboard-types.avif) + +![changing-keyboard-type](../../imgs/changing-keyboard-type.avif) + +### Masking input + +You might want to allow users to provide input in a specific format. For example, if you want a date in a format like MM/DD/YYYY, where all input must be a number, and its length should not exceed eight digits. You can do so by formatting the user input using the specific mask. + +To mask the user input, select the TextField widget, move to the **Properties Panel** **> Additional Properties >** set the **Mask** dropdown to the one you need. + +If the required format is not on the list, you can select **Custom** and specify the **Custom Mask**. The '#' sign represents the number, and 'A' represents a letter. Here are some examples of *Custom Masks*: + +| Input | Custom Mask | +| --- | --- | +| Credit card number (e.g., 3424 4353 5453 3535) | #### #### #### #### | +| Custom date (e.g., 12-Jan-2023) | ##-AAA-#### | + +

+
+ +
+

+ +### Filtering input + +You might want to restrict the type of characters that can be entered into a TextField. Let's say you are building an app that requires its employees to enter their employee ID when they clock in and out for their shifts. The employee ID consists of only letters and numbers, and the app should only allow these characters to be entered. You can do so by filtering the user input + +To filter the user input, select the TextField widget, move to the **Properties Panel** **> Additional Properties >** set the **Filter** dropdown to the one you need. + +:::info +To check user input for certain criteria or requirements (e.g., email), see *step 3* on how to [add validation](#). +::: + +
+ +
+

+ +### Validating input + +You can validate the TextField value by wrapping it inside the [Form](../forms/form-validation) widget and adding the validation criteria. + +:::tip +Filtering ensures that only the allowed characters or values are entered, whereas the validation checks the entire input data against certain criteria. Both techniques can be used together or independently to ensure the correctness of user input in a TextField widget. +::: + +### Capitalization + +You might want to control the capitalization of text when the user is typing, and also when the text is displayed. The Capitalization property allows you to specify how the text entered in the TextField should be capitalized. + +This property accepts one of the following values: + +- **None**: This value means that no capitalization should be applied to the text. All the characters will be displayed as they are typed. +- **Words**: This value capitalizes the first letter of each word in the text. +- **Sentences**: This value capitalizes the first letter of each sentence in the text. +- **Characters**: This value capitalizes every character in the text. + +To set the capitalization, select the TextField widget, move to the **Properties Panel** **> Additional Properties >** set the **Capitalization** dropdown to the one you need. + +![capitalization](../../imgs/capitalization.avif) + +### Submit type + +Showing a particular action on a keyboard can be useful in guiding users on what to do next. For example, if you have a search bar, you can display a "Search" button on the keyboard. When tapped, instead of moving to a new line or closing the keyboard, you can execute a search function. This can improve user experience by providing more intuitive keyboard actions based on the context of the input. + +This property accepts one of the following values: + +- **Done**: This closes the keyboard. +- **Next**: This moves focus to the next field. +- **Previous**: This moves focus to the previous field. +- **Send**: This represents the Send action. +- **Search**: This represents the Search action +- **Go**: This represents the Go action. + +To set the submit type, select the TextField widget, move to the **Properties Panel** **> Additional Properties >** set the **Submit Type** dropdown to the one you need. + +![submit-type](../../imgs/submit-type.avif) + + +### Set max character length + +Sometimes, you might want to specify the maximum number of characters users can enter into the TextField. When the user types or pastes text into the field and reaches the specified character limit, they won't be able to input more characters, or the TextField will visually indicate that the limit has been reached. + +For example, When users can leave comments or post messages (similar to 'tweet'), setting a maximum character length can help prevent spam or excessively lengthy responses. + +To set the max character limit, select the TextField widget, move to the **Properties Panel** **> Additional Properties >** set the **Max Length** (number of characters you want to allow), and set the **Max Length Enforcement** to one of the following values: + +- **Not Enforced**: This allows users to input extra characters and displays a warning when the limit is exceeded. +- **Enforced**: This always truncates any additional character once the limit is reached. + +:::info +You can also hide the maximum character count by enabling the **Hide Max Length Counter** option. +::: + +
+ +
+

+ + +## Hiding keyboard on tap + +Hiding the keyboard when the user taps outside of a TextField is a common user experience pattern that many apps use to improve usability. When the keyboard is open, it can obscure important information on the screen and make it difficult for the user to interact with other parts of the app. + +Adding this behavior in your app can make it easier for these users to interact with other parts of the app without interference from the keyboard. It can also make your app feel more polished and professional. + +
+ +
+

+ + + +To hide/close the keyboard, select the page, move the **Properties Panel >** enable the **Hide Keyboard on Tap**. + +![Hide keyboard on tap](../../imgs/hide-keyboard-tap-2.avif) + +## Focus change event + +Sometimes, you may need to know whether a TextField is being used or not. For example, you can turn other parts of the app *on* or *off* depending on if the TextField is active. Also, you can start animations when someone starts or stops typing in the TextField. + +Let's see an example of controlling the visibility of a Text widget based on the TextField's Focus state. + +
+ +
+

+ +To do so: + +1. On a Text widget, add a [Conditional Visibility](#) based on the TextField's Focus state. You can access via **Set from Variable** menu **> Widget Focus State > [TextField name]**. +2. Now, on a TextField widget, under the [On Focus Change](#trigger-action--listen-callback) callback, simply add an action to refresh the page by adding the [update app state](#) variable. + +
+ +
+

+ +## Trigger action / Listen callback + +The TextField widget provides you with two types of actions (aka callbacks): + +1. **On Submit**: Actions under this will be triggered when you finish entering the text in the TextField widget. i.e., pressing a done button inside the soft keyboard. +2. **On Change**: Actions under this will trigger when you enter or delete a character in the TextField widget. +3. **On Focus Change**: Actions under this will trigger when the focus state changes on a TextField. This means when users click on it to type or click away from it. + +:::warning +Be careful about adding the actions under the **On Change**. Specifically, you should avoid adding any action that will take more time. +::: + + + +
+ +
+

+ + +
+ +
+

+ + +
+ +
+

+ + + + + +To trigger an action: + +1. Select the TextField widget from the widget tree or canvas area. +2. Select **Actions** from the Properties panel (the right menu), and click **+ Add Action**. +3. Select the **Type of Action** among the **On Submit, On Change,** and **On Focus Change**. +4. Now you can add any action here. + +
+ +
+

+ +--- + +## Video guide + +If you prefer watching a video tutorial, here's the one for you: + +
+ +
+

\ No newline at end of file diff --git a/docs/resources/control-flow/user-interactivity/forms/forms.md b/docs/resources/control-flow/user-interactivity/forms/forms.md new file mode 100644 index 00000000..f60a6fc8 --- /dev/null +++ b/docs/resources/control-flow/user-interactivity/forms/forms.md @@ -0,0 +1,16 @@ +--- +slug: /resources/forms +title: Overview +tags: [FlutterFlow, forms, input, UI, user interaction] +keywords: [FlutterFlow, forms, input fields, user interface, mobile app development, data collection, user interaction] +description: Learn how to work with Forms in FlutterFlow app. +sidebar_position: 0 +--- + + +# Overview +Forms are a fundamental part of many applications, serving as the primary method for users to input and submit data. Whether you're building a simple contact form or a complex multi-step survey, FlutterFlow provides a comprehensive set of tools to create, validate, and manage forms effectively. + +:::tip +In this section, you'll learn how to add form widgets such as [**TextField**](forms/textfield), [**Dropdown**](forms/dropdown), [**RadioButton**](forms/radiobutton), [**CheckboxGroup**](forms/checkboxgroup), add [**set**](forms/set-form-field)/[**reset**](forms/reset-form-field) actions on these widgets and add [**Validations**](forms/form-validation) to forms. +::: \ No newline at end of file diff --git a/docs/resources/control-flow/user-interactivity/forms/overview.md b/docs/resources/control-flow/user-interactivity/forms/overview.md deleted file mode 100644 index adbc8410..00000000 --- a/docs/resources/control-flow/user-interactivity/forms/overview.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Overview ---- - -Forms \ No newline at end of file diff --git a/docs/resources/control-flow/user-interactivity/imgs/adding-icon.avif b/docs/resources/control-flow/user-interactivity/imgs/adding-icon.avif new file mode 100644 index 00000000..b61268c2 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/adding-icon.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/adding-label.avif b/docs/resources/control-flow/user-interactivity/imgs/adding-label.avif new file mode 100644 index 00000000..eaf9b817 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/adding-label.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/auto-fill-enabled.png b/docs/resources/control-flow/user-interactivity/imgs/auto-fill-enabled.png new file mode 100644 index 00000000..ae92fe2d Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/auto-fill-enabled.png differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/capitalization.avif b/docs/resources/control-flow/user-interactivity/imgs/capitalization.avif new file mode 100644 index 00000000..45897294 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/capitalization.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/change-cursor-color.avif b/docs/resources/control-flow/user-interactivity/imgs/change-cursor-color.avif new file mode 100644 index 00000000..94095026 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/change-cursor-color.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/changing-background-color.png b/docs/resources/control-flow/user-interactivity/imgs/changing-background-color.png new file mode 100644 index 00000000..71d1f1c7 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/changing-background-color.png differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/changing-error-message-styling.avif b/docs/resources/control-flow/user-interactivity/imgs/changing-error-message-styling.avif new file mode 100644 index 00000000..a375dbb8 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/changing-error-message-styling.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/changing-keyboard-type.avif b/docs/resources/control-flow/user-interactivity/imgs/changing-keyboard-type.avif new file mode 100644 index 00000000..c153f35b Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/changing-keyboard-type.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/disabling-dropdown.png b/docs/resources/control-flow/user-interactivity/imgs/disabling-dropdown.png new file mode 100644 index 00000000..953479ec Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/disabling-dropdown.png differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/enable-auto-validate.avif b/docs/resources/control-flow/user-interactivity/imgs/enable-auto-validate.avif new file mode 100644 index 00000000..be9bc768 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/enable-auto-validate.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/fix-position.webp b/docs/resources/control-flow/user-interactivity/imgs/fix-position.webp new file mode 100644 index 00000000..dd1ee5c4 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/fix-position.webp differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/fv-input-fields.avif b/docs/resources/control-flow/user-interactivity/imgs/fv-input-fields.avif new file mode 100644 index 00000000..70b268c1 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/fv-input-fields.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/hide-keyboard-tap-2.avif b/docs/resources/control-flow/user-interactivity/imgs/hide-keyboard-tap-2.avif new file mode 100644 index 00000000..8c745d9d Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/hide-keyboard-tap-2.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/keyboard-type-visible-password.png b/docs/resources/control-flow/user-interactivity/imgs/keyboard-type-visible-password.png new file mode 100644 index 00000000..9b655f61 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/keyboard-type-visible-password.png differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/keyboard-type.webp b/docs/resources/control-flow/user-interactivity/imgs/keyboard-type.webp new file mode 100644 index 00000000..2174ab9a Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/keyboard-type.webp differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/keyboard-types.avif b/docs/resources/control-flow/user-interactivity/imgs/keyboard-types.avif new file mode 100644 index 00000000..9b2694e6 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/keyboard-types.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/making-dd-searchable.png b/docs/resources/control-flow/user-interactivity/imgs/making-dd-searchable.png new file mode 100644 index 00000000..e8cfae8b Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/making-dd-searchable.png differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/reset-form-field-component.png b/docs/resources/control-flow/user-interactivity/imgs/reset-form-field-component.png new file mode 100644 index 00000000..15d8ac2b Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/reset-form-field-component.png differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/saving-dp-value-on-selection-change.webp b/docs/resources/control-flow/user-interactivity/imgs/saving-dp-value-on-selection-change.webp new file mode 100644 index 00000000..959e282b Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/saving-dp-value-on-selection-change.webp differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/set-error-text-height.png b/docs/resources/control-flow/user-interactivity/imgs/set-error-text-height.png new file mode 100644 index 00000000..adb76094 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/set-error-text-height.png differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/set-form-field-in-component.avif b/docs/resources/control-flow/user-interactivity/imgs/set-form-field-in-component.avif new file mode 100644 index 00000000..87d5d9f3 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/set-form-field-in-component.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/setting-hint-text.avif b/docs/resources/control-flow/user-interactivity/imgs/setting-hint-text.avif new file mode 100644 index 00000000..001e2367 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/setting-hint-text.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/setting-prefilled-value.avif b/docs/resources/control-flow/user-interactivity/imgs/setting-prefilled-value.avif new file mode 100644 index 00000000..5e3841e4 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/setting-prefilled-value.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/slider-set-initial-value.avif b/docs/resources/control-flow/user-interactivity/imgs/slider-set-initial-value.avif new file mode 100644 index 00000000..a58a69b1 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/slider-set-initial-value.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/submit-type.avif b/docs/resources/control-flow/user-interactivity/imgs/submit-type.avif new file mode 100644 index 00000000..2a948608 Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/submit-type.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/textfield-for-passowrd.avif b/docs/resources/control-flow/user-interactivity/imgs/textfield-for-passowrd.avif new file mode 100644 index 00000000..71a7f9da Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/textfield-for-passowrd.avif differ diff --git a/docs/resources/control-flow/user-interactivity/imgs/validating-date-time-picker.png b/docs/resources/control-flow/user-interactivity/imgs/validating-date-time-picker.png new file mode 100644 index 00000000..944476bc Binary files /dev/null and b/docs/resources/control-flow/user-interactivity/imgs/validating-date-time-picker.png differ diff --git a/docs/resources/ui-building-blocks/components/built-in-components/pincode.md b/docs/resources/ui-building-blocks/components/built-in-components/pincode.md new file mode 100644 index 00000000..ed1f08f2 --- /dev/null +++ b/docs/resources/ui-building-blocks/components/built-in-components/pincode.md @@ -0,0 +1,436 @@ +--- +slug: pincode +title: PinCode +tags: [FlutterFlow, PinCode, Form Widget, App Development] +keywords: [FlutterFlow, PinCode, Form Widget, App Development, Input Field, Flutter] +description: Learn how to add the PinCode widget in your FlutterFlow app. +--- +# PinCode + +The PinCode widget allows you to enter the PIN or OTP. You could use this widget to verify the user identity or a transaction before making payments in fintech apps. + +## Adding PinCode widget + +To add a PinCode widget: + +1. Open the [Widget Palette](../../../../intro/flutterflow-ui/widget-palette) and locate the **PinCode** widget under the **Base Elements** tab. You can drag it into your desired location or add it directly from the widget tree or canvas area. +2. To increase the pin length (number of values users can enter), move to the properties panel, see the **Pin Length** property, and enter the value. **Note**: You can only set this value up to 8. +3. If you are using this widget to get a secret PIN from users, you can obscure it with a special character. To do so, enable the **Obscure Text** toggle and select the **Obscuring Character** among the *,-,?, and •. +4. You can also enable/disable the **Hint Text** toggle and select the **Hint Character** displayed when you haven't entered anything. + +
+ +
+

+ +## Trigger action On Completed + +Let's see how to trigger an action when you are done entering the value in this widget. This is helpful when you want to compare the entered value with the one stored in your backend. + +
+ +
+

+ +To do so: + +1. Select the **PinCode** widget, select **Actions** from the Properties panel (the right menu), and click **+ Add Action**. +2. Set the **Type of Action** (aka callback) to **On Completed**. That means actions added under this will be called after the user has entered all PIN field values. +3. Now you can add any action here. + +Here is an example of displaying a snackbar message that shows the entered value in the PinCode widget. + +
+ +
+

+ +## Trigger action On Change + +Let's see how to trigger an action whenever you enter or delete the value in each field of this widget. This is helpful when you want to provide immediate feedback to the user. For instance, you can check the validity of the entered digit as soon as the user types it in and show a message that it is not valid. + +
+ +
+

+ +To do so: + +1. Select the **PinCode** widget, select **Actions** from the Properties panel (the right menu), and click **+ Add Action**. +2. Set the **Type of Action** (aka callback) to **On Change**. That means actions added under this will be called every time when a user enters each pin value. +3. Now you can add any action here. + +Here is an example of displaying a snackbar message when a user enters a non-number value. + +
+ +
+

+ +## Validation + +You can validate the Pincode widget to see if a user has entered any value. To do so, wrap the Pincode widget inside the [**Form**](#) widget, In the *Form* widget, enter the error message you want to display and then trigger the [**Validate Form**](#) action. This will display an error message when a user tries to submit the form without a pincode value. + + +
+ +
+

+ +You can also adjust the height to the error text from **Properties Panel > Error text height**. + +![Set error text height](../../../control-flow/user-interactivity/imgs/set-error-text-height.png) + +## Customizing + +You can customize the appearance and behavior of this widget using the various properties available under the properties panel. + +### Changing keyboard type + +When the keyboard opens by default, you can enter only numbers. But you might want to allow users to enter both letters and numbers. To do so, select the **PinCode** widget, move to the **Properties Panel** **> PinCode Properties >** set the **Keyboard Type** to the **Visible Password**. + +![Keyboard Type](../../../control-flow/user-interactivity/imgs/keyboard-type.webp) + +![Keyboard type: Visible Password](../../../control-flow/user-interactivity/imgs/keyboard-type-visible-password.png) + + +### Using PinCode for secret pin + +To make a *PinCode* a secret pin field, move to the **Properties Panel > Pin Code Properties >** enable the **Obscure Text**. Now, when you enter a value, it will be obscured with the star (*). You can change this symbol using the **Obscuring Character** dropdown. + +
+ +
+

+ +### Setting hint character + +A hint character refers to a special character or symbol that is displayed in each input field of the PinCode Widget to give users a visual clue about the expected input format. Hint characters are often used in combination with the actual input characters to guide users when entering a PIN or password. + +To set the hint text, move to the **Properties Panel > Pin Code Properties > enable the Hint Text > set the Hint Character**. + +
+ +
+

+ +### Auto focus + +When enabled, it mimics the tap event and immediately shows the keyboard. This makes *PinCode* widget ready to receive input from users without having to click on it. In case, you want to disable this behaviour, move to the **Properties Panel** **> Pin Code Properties >** disable the **Auto Focus** property. + +
+ +
+

+ +### Auto Fill + +When this is enabled, it can read and auto fill the code from your messages app. + +![Auto Fill enabled](../../../control-flow/user-interactivity/imgs/auto-fill-enabled.png) + +### Aligning pin code fields + +By default, all the pin fields are aligned to *Space Evenly*. Meaning there will be equal space between each pin field. + +The following options help you align the pin code fields: + +- **Start**: Place pin code fields as close to the beginning as possible. +- **Center**: Place pin code fields as close to the middle as possible. +- **End**: Place pin code fields as close to the end as possible. +- **Space Evenly**: Evenly space pin code fields. +- **Space Around**: Place the free space evenly between the pin code fields with some extra space at the beginning and end. +- **Space Between**: Place the free space evenly between the pin code fields. +To configure the space between and around the pin fields, select the **PinCode** widget, move to the properties panel, find the **Pin Code Alignment** property and select among the above options. + +
+ +
+

+ +### Changing pin field shape and size + +To change the pin field shape and size: + +1. Select the **PinCode** widget, move to the properties panel, find the **Pin Field Shape** property, and here you can set the shape to **Box**, **Circle**, and **Underline**. +2. To change the height and width, enter the value in **Field Height**, and **Field Width** boxes. +3. To create a rounded border when the shape is set to *Box*, use the **Border Radius** and **Border Width** properties. + +
+ +
+

+ +### Change colors +You can change colors for the different states of the pin fields. To do so: + +1. Select the **PinCode** widget, move to the properties panel, and change the colors for the following properties: + - **Active Color**: This sets the border color when the value is entered. + - **Inactive Color**: This sets the border color when there is no value. + - **Selected Color**: This sets the border color when the cursor is inside the pin field and the user is about to enter the value. +2. To change the background color instead of only the border color, **Enable Active Fill**. + +
+ +
+

+ +### Customizing cursor + +You can show/hide the cursor using the **Show Cursor** toggle and change the color using the **Cursor Color** property. + +:::info[Clear pin code value] +See how to [**reset the pin code value**](../../../../resources/forms/reset-form-field). +::: \ No newline at end of file diff --git a/docs/resources/ui-building-blocks/components/built-in-components/ratingbar.md b/docs/resources/ui-building-blocks/components/built-in-components/ratingbar.md new file mode 100644 index 00000000..50354de0 --- /dev/null +++ b/docs/resources/ui-building-blocks/components/built-in-components/ratingbar.md @@ -0,0 +1,271 @@ +--- +slug: ratingbar +title: RatingBar +tags: [FlutterFlow, RatingBar, Form Widget, App Development] +keywords: [FlutterFlow, RatingBar, Form Widget, App Development, Input Field, Flutter] +description: Learn how to add RatingBar in your FlutterFlow app. +--- + + +# RatingBar + +The RatingBar widget is used to show a rating or collect ratings from users (this is an interactive RatingBar). For example, you can use the RatingBar widget inside an e-commerce app to show ratings for a product. + +## Adding a RatingBar to Your Project + +Here's an example of how you can use the RatingBar widget in your project: + +1. First, drag the **Column** widget from the **Layout Elements** tab (in the Widget Panel) or add it directly from the widget tree. Set its **Cross Axis Alignment** to **Start**. +2. Now add one **Image** widget inside the column and set its **Width** property to **inf** and **Height** property to 200. +3. Add a **Text** widget (Inside the Column). Change the **name** to **Item Name** and the **Theme Style** to **Title 1.** Set the **Left Padding** to 10. +4. Add another **Text** widget. Change the **name** to **Item Description** and the **Theme Style** to **Subtitle 2.** Set the **Left Padding** to 10. +5. Finally, add the **RatingBar** widget from the **Form Elements** tab or add it directly from the widget tree. + +
+ +
+

+ +### Collectings Ratings from Users (Interactive RatingBar) + +To collect ratings from users: + +1. Select **RatingBar** from the widget tree or from the canvas area. +2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section. +3. Find the **Interactive** property and checkmark it (click on it). + +
+ +
+

+ +### Setting The Rating Value + +The Rating can be set by inputting an amount or set from a variable. This is only for a RatingBar that is not interactive. + +To manually set the Rating value for the RatingBar: + +1. Select **RatingBar** from the widget tree or from the canvas area. +2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section. +3. Find the **Rating** property and change the default value. + +:::info +You can also enter the value in decimal such as 1.5. When a decimal is used, a portion of the icon will be colored. +::: + +
+ +
+

+ +### Customize the Icon + +Here's an example of how you can customize the icons appearing in the RatingBar: + +1. Select **RatingBar** from the widget tree or from the canvas area. +2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section. +3. Find the **Icon Count** property and change the value to 10. +4. Set the **Icon Size** property to 30. +5. Find the **Icon Selector** property below, Click on the **Start Rounded** button, then search and select the icon name with **FontAwesome.smile**. + +
+ +
+

+ +### Changing the Rated/Unrated Color + +To change the rated and unrated color (color for icons that are not filled in) for the RatingBar: + +1. Select **RatingBar** from the widget tree or from the canvas area. +2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section. +3. Now, find the **Rated Color** property, Click on the box next to **Secondary**, select the color, and then click **Use Selected Color** or click on **Secondary** and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button. +4. Similarly, set the **Unrated** **Color** as well. + +
+ +
+

+ +### Add Padding between Icons + +To add padding between icons: + +1. Select **RatingBar** from the widget tree or from the canvas area. +2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section. +3. Find the **Icon Padding** property and enter the values. + +:::info +Use the Lock button to change the Left, Top, Right and Bottom padding all at the same time. Unlocking will allow you to modify each value separately. +::: + +
+ +
+

+ +### Changing the Axis + +In a very rare case, you may want to make all icons (inside the RatingBar) appear vertically. This can be done using the Axis property. + +To change the Axis: + +1. Select **RatingBar** from the widget tree or from the canvas area. +2. Move to the Property Editor and scroll down to the **Rating Bar Properties** section. +3. Find the **Axis** dropdown and change it to **Vertical**. + +
+ +
+

+ +:::info[Trigger action on change] +See how to [**trigger an action when a selection changes**](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget. +::: \ No newline at end of file diff --git a/docs/resources/ui-building-blocks/components/built-in-components/slider.md b/docs/resources/ui-building-blocks/components/built-in-components/slider.md new file mode 100644 index 00000000..584f6b38 --- /dev/null +++ b/docs/resources/ui-building-blocks/components/built-in-components/slider.md @@ -0,0 +1,304 @@ +--- +slug: slider +title: Slider +tags: [FlutterFlow, Slider, Form Widget, App Development] +keywords: [FlutterFlow, Slider, Form Widget, App Development, Input Field, Flutter] +description: Learn how to add Slider in your FlutterFlow app. +--- + + +# Slider + +The Slider widget is used to select a single value from a range of values. You define the min and max value for the slider, and users can choose the value between the specified range by dragging the slider thumb (sliding circle). + +For example, you can use the Slider widget to allow users to set the volume, set the donation amount, etc. + +## Adding Slider + +Let's build an example of using the Slider widget and retrieve its value in a Text widget. + +
+ +
+

+ +The steps to build the example are as follows: + +1. First, add the **Slider** widget from the **Form Elements** tab or add it directly from the widget tree. +2. Now, add the **Text** widget to display the slider value. +3. Keep the **Text** widget selected, Move to the properties panel, and click on the **Set from Variable**. This will open a new panel. + 1. Set **Source** to **Widget State**. + 2. Set the **Available Options** to **Slider**. If you add multiple sliders, the names would be like Slider1, Slider2, and so on. + 3. Set the **Number Format Option** if you wish to. + 4. Click **Confirm**. + +
+ +
+

+ +## Setting initial value + +Sometimes you might want to display the slider with the default value. For example, showing the volume slider with the audible volume value. You can do so by setting the initial value for the Slider. + +
+ +
+

+ +## Customization + +You can customize the appearance and behavior of the widget using the various properties available under the properties panel. + +### Setting platform type + +You can set the platform type to *Adaptive or Android* for **this widget. Selecting the Adaptive type will display the widget in its native style. That means the widget will show iOS-style rendering when running on iOS devices and Android-style rendering when running on Android devices. + +To set the platform type: + +1. Select the **Slider** widget from the widget tree or the canvas area. +2. Move to the properties panel and open the **Platform** section. +3. Set the **Platform Type** among the **Android** or **Adaptive**. + +
+ +
+

+ +### Defining slider range + +You can define the slider range by setting the min and max values. + +To set the min and max values: + +1. Select the **Slider** widget from the widget tree or the canvas area. +2. Move to the properties panel and scroll down to the **Slider Properties** section. +3. Find the **Min** property and enter the value. This will be the start value of the range. +4. Find the **Max** property and enter the value. This will be the end value of the range. + +
+ +
+

+ +### Setting step size + +By default, you can move and stop the slider thumb at any place on the slider track. To make the slider thumb stop at a specific interval, you can set the step size value. + +:::info +If the range is not evenly divisible by the step size, the slider thumb will stop at the closest value in the range. +::: + +To set the step size: + +1. Select the **Slider** widget from the widget tree or the canvas area. +2. Move to the properties panel and scroll down to the **Slider Properties** section. +3. Find the **Step Size** property and enter the value. + + +
+ +
+

+ +### Changing color + +To change the slider colors: + +1. Select the **Slider** widget from the widget tree or the canvas area. +2. Move to the properties panel and scroll down to the **Slider Properties** section. +3. To change the active color, find the **Active Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected color ****and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button. +4. To change the inactive color, find the **Inactive Color** property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected color ****and enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button. + +
+ +
+

+ +### Showing slider value + +You can show the slider value while moving the slider thumb on the track. The value appears as a tooltip above the slider thumb. + +To show the slider value: + +1. Select the **Slider** widget from the widget tree or the canvas area. +2. Move to the properties panel and scroll down to the **Slider Properties** section. +3. Find the **Show Value** property and turn on the toggle. + +
+ +
+

+ + +:::info[Trigger action on change] +See how to [**trigger an action when a selection changes**](../../../../../resources/ui-building-blocks/widgets/widget-commonalities#trigger-action-on-selection-change) on this widget. +::: \ No newline at end of file diff --git a/docs/resources/ui-building-blocks/widgets/widget-commonalities.md b/docs/resources/ui-building-blocks/widgets/widget-commonalities.md index 2ab4487f..f3aaa584 100644 --- a/docs/resources/ui-building-blocks/widgets/widget-commonalities.md +++ b/docs/resources/ui-building-blocks/widgets/widget-commonalities.md @@ -322,3 +322,110 @@ This is helpful in assessing spacing and alignment without the need to remove va ![img_4.png](img_4.png) + +## Trigger action on selection change + +Here, you will see how to trigger an action when the selection changes for any Form widget such as Dropdown, RadioButton, ChoiseChips, Slider, and RatingBar. + +:::info +To simplify, we've used the Dropdown widget as an example. However, the same instructions apply to other Form widgets as well. +::: + +
+ +
+

+ +To do so: + +1. Select the widget. +2. Select **Actions** from the properties panel, and click **+ Add Action**. +3. You will notice that the **Type of Action** (aka callback) is already set to **On Selected**. That means actions added under this will be called whenever the selection changes. +4. Now you can add any action here. + +Here is an example showing the snackbar message when the Dropdown selection changes. + +
+ +
+

+ +## Adding border + +To add a border to any widget: + +1. Find the **Border Color** property and change the color using the instructions [here](https://docs.flutterflow.io/widgets-and-components/widgets/widget-commonalities#change-color). +2. To create the rounded border, use the **Border Radius** property. +3. Enter values for TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). +4. To apply the same radius on all sides, switch to the **Uniform Radius** option. You can then adjust the radius by either moving the slider or entering the desired value directly. +5. Use the refresh icon button to reset all values. +6. To increase the border thickness, use the **Border Width** property. + + +
+ +
+

\ No newline at end of file