Form and Dynamic Field in Flutter
Published in
4 min readSep 29, 2023
Form is a fundamental component used in User Interface (UI). Form used to get data from users for interacting with databases. The form usually consists of text boxes, checkboxes, a radio button, or a submit button.
In this article, I will show you how to use the form in Flutter and make a small adjustment like adding a dynamic field.
Project Requirement
- flutter 3.7.12
How To Implement basic form in the flutter
- Let's assume we have 2 class which is formClass(A) and displayClass(B). we want to get user input in formClass and display it in displayClass.
- we will now create formClass(A). You can adjust the layout however you like. but the most important is you need to create a Form Class with a form key, and then you create the form content inside it for example text field, and the submit button.
- There are 2 things you need to keep track of. First, you need to make sure every field you declare inside the forms has onSaved function defined. onSaved function will be used to define what to do after the data is submitted.
In this case, I will assign a data variable with the new value inputted to the text field.
- Second, you need to define what to do after you get the saved data. In my example, I will send it to the displayClass(B), but you can replace it to send data to API.
- Then I will create displayClass(B), where the data will be displayed.
- Your simple form contents should displayed on your device screen.
How To Implement Form with Dynamic Fields in Flutter.
- we will do the same with the above example but this time we will make the form consist of dynamic fields that can be increased or decreased at will.
- we will create formClass(A) that consists of Form Class with fields inside, but fields will build dynamically with the help of a stateful widget and list view builder.
- When trying to make a form with a dynamic field you need to keep track of the onSaved function, the submit button function, and the state changes.
- As you can see from the above image the UI will be built using a list view builder based on the listData variable. So every time we need to add a new field we need to add the length of the listData variable and call a state change using the Add Data Button.
- Then the data will be saved in the listData variable using onSaved function,
- We sent the data to the next page using the submit button. Same with the previous example we can replace this step with sending data to the backend API.
- Then I will create displayClass(B), where the data will be displayed.
Conclusion
The form is a fundamental component that is used to get data from users. In Flutter we can implement forms using Form Class and We can add a dynamic field to the forms with the help of state management.
References
- flutter documentation: https://docs.flutter.dev/
- GitHub code: https://github.com/masssster/formExample
