Page State Variables in FlutterFlow with Update Action

The page state variable allows you to update the user interface to reflect the changes on the screen in FlutterFlow. It is one of the most important key parts of state management. Passing data to another page and displaying it on the screen is a different mechanism in FlutterFlow. State management involves monitoring the user interface to reflect changes accordingly using three mechanisms. We already discussed how app state variables and component state variables are working in FlutterFlow.

In this article, we will see what FlutterFlow page state is, how to use page state variables in FlutterFlow, and how to update FlutterFlow page state.

What is Page State in FlutterFlow?

Page state holds a value of a variable at the page level. It can be accessed and modified within the page. Let’s say, for example, that if you want to hide a widget on the screen, some calculation functionality or filtering content, and validation of TextFormField widget, then you need to create a page state variable to hold the access within the page.

How to Use Page State Variables in FlutterFlow?

To use page state variables in FlutterFlow, we will see a step-by-step guide with an example to create, update, and get page state variables with the update page state action.

Step 1: Create a page state variable

• Select a page under pages and components from the left panel. On the right side properties panel, select the state management section. Add a local page state variable.

• Create a new page state variable using Field Name, Type, is List, and Nullable. Make sure you have selected the datatype that you want to create for a variable. Is List property defines that the variable can hold multiple values of the same data type (e.g.,  List or Array). If Nullable is set to true, which means that this variable can hold the value and can have null or empty. It is generally dealing with optional data. Initial field value is optional. You can set a defaultlt value by using this property.

 

 

• In this example scenario, we will use the course dropdown. We will create a page state variable called selectedCourse. We will hold this variable value while selecting courses from the dropdown and reflect this value in the text widget. I created the selectedCourse variable using the String data type and made it nullable here. You can create your descriptive variable name for any other widget.

Step 2: Update page state variable using action

• To create an update page state action, select dropdown from the screen. In the right panel under the On Selected method, update the value of the page state variable, which we already created. Bind the dropdown value to the page state variable to store that user-selected value from the dropdown. 

 

 

 

• In this example scenario, when the user selects a course from the dropdown. We will store that value in a page state variable called selectedCourse. Make sure you need to set a value for the select update type property and bind the dropdown from the widget state in value to set the property.

 

Step 3: Get page state variable 

• To display the page state variable in a text widget, you need to bind the text value property with the page state variable called selectedCourse. You can see the image below for reference to process steps in your project.

 

In the example scenario, we will see that while the user selects any course from the dropdown, it will display in the text widget.

 

Output of the project

While you run the project, the output looks like the below images:

 

 

 

 

 

 

Benefits of Using Page State in FlutterFlow

There are some benefits to using a page state variable in FlutterFlow. It is described as below:

(1) Page-specific data: To access and modify data within a single page, the page state variable plays an important role in the state management of FlutterFlow. You can use that data only for a particular page. You cannot use this variable data pass to another page.

(2) Better control of data: You can maintain and control the variable using this mechanism.

(3) Simple and manageable: You don’t need to declare any variable at the global level. It allows you to manage data in a simple way.

 

 

Tips for Working with Page State

(1) Use a meaningful and descriptive name for the page state variable. (E.g., isSelectedTab, isFormValid)

(2) If you need to use a variable value for multiple pages, then avoid the use of a page state variable. Use the app state variable instead of it.

(3) Test the flow of the page state variable to perform as expected or not.

 

Conclusion

Page state in FlutterFlow is a great way to manage data for a specific page. With page state variables, you can create mutual and effective user experiences while keeping your app well. Whether you are submitting a form or toggling functionality, FlutterFlow page state gives you the flexibility. By understanding and effectively using page state, you can take full control of your application functionality and design.

 

Frequently Asked Questions (FAQs)