Form

The Form widget allows you to validate the user input and display a message if validation fails. For example, you can use a Form widget to check if a user has given the email and password combination.
Building a Form
Let's build a basic example of a signup form that looks like below:
Building and validating a Form includes the following steps:
1.​Building Page​
2.​Adding Validations​
3.​Adding Action to Validate Form​
1. Building Page
Here's an example of building a page that contains the signup form:
First, drag the Form widget from the Form Elements tab (in the Widget Panel) or add it directly from the widget tree.
Inside the form, add the  Column widget from the Layout Elements tab and add some padding around it.
Add a TextField (under Form Elements) inside the Column to accept the email and give it a name.
Add one more TextField inside the Column to accept the password and give it a name.
Add a Button widget and add Date/Time Picker Action to get the date of birth.
Add one more Button to submit the form.
2. Adding Validations
To add validation on a Form:
Select the Form widget from the widget tree or from the canvas area. 
Move to the Property Editor (on the right side of your screen) and scroll down to the Validation section.
Identify the TextField on which you would like to add the validation and checkmark the box on the right side.
Inside the Error Message input box, provide the message that will be displayed below the TextField if a user leaves the TextField without entering anything inside.
Inside the Min Required Character, enter the number. This is the minimum character required for the validation to pass. For example, If you provide a value as 9 and a user enters value as [email protected] (which is 6 characters) then the validation fails and an error message will be displayed.
Inside the Minimum Character Error Text input box, provide the message that will be displayed if a user doesn't provide the required characters.
To add validation on actions such as Date/Time Picker, PlacePicker, etc, find the action name and checkmark the box on the right side.
Checkmark the Add Action on Error. This will perform an action if a user has not specified the value.
Select the Action Type to Show Snack Bar. You can also choose to show the Alert Dialog for the error message.
Under the Snack Bar Message Section, Inside the Value input box, specify the message you would like to appear on the snack bar.
Find the Background Color property, click on the box next to Unset, select any dark/light color, and then click Use 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.
Similarly, find the Text Color property and set the color.
3. Adding Action to Validate Form
You can add an action to validate a form by visiting the following page:
Validate Form
Auto Validating a Form
Instead of showing an error message when the user submits the form, you can let them know about the error as they type inside the TextField widget if the validation fails. This becomes really helpful if you are presenting a long form to users.
To auto validate a form:
Select the Form widget from the widget tree or from the canvas area. 
Move to the Property Editor (on the right side of your screen) and scroll down to the Validation section.
Checkmark the Automatically Validate property (click on it).
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:
Select the TextField widget from the widget tree or from the canvas area. 
Select Actions from the Properties panel (the right menu)
Click + Add Action button
Select the On Submit.
Select the Action Type as Validate Form.
Set the Select Form to Validate to your Form name.
Changing the properties
The Properties Panel can be used to customize the behavior of your Container widget.
Add Padding
​Here are the instructions on how to add padding.
Adjust The Alignment
​Here are the instructions on adjusting the alignment.
Set color dynamically
See how to set a color from variable to any color property of this widget.
Show/Hide Form
Please find the instructions to show/hide the widget here​

PlacePicker

CheckboxGroup

Last modified 3mo ago