Component State Variable FlutterFlow With Update Action

Managing data using reusable components is an important part of the application. In FlutterFlow, a component state variable helps you to store and manage data for a specific component. It allows you to create flexible, reusable elements that can be used on different pages across the application.

In this article, we will see about component state in FlutterFlow, how to use the component state variable, and update or access component state using action with a step-by-step guide. How component state is differentiated with app state variable and page state variable, we already discussed in other articles. Each state has its own features and functionalities to use it.

 

 

What is component state in FlutterFlow?

Component state in FlutterFlow allows you to create and update variables for a specific component. It is also called reusable components. Many times we need to use buttons, forms, and cards to display lists of data on different pages in the application. It provides a better mechanism to manage data throughout the app. Using this variable, you can control individual components.

How to use component state variables in FlutterFlow?

We will see how to create, use, and update a component state variable in your FlutterFlow project below:

Step 1: Create a new component state variable

• Create a new or existing project from the FlutterFlow official website. Select the page selector tab from the left side navigation menu. Now you can see the ‘+’ button on the top right (Add page, component, or flow). Select the state management section in the right side panel; you can create multiple component state variables here.

 

• Field Name, Data Type, Is List, and Nullable are main properties for a variable. Is List consists of a list of data types. It can hold multiple values. Nullable is set to true, meaning the variable can be null or empty. The optional variable belongs to these properties.

• In the example scenario, we create a card component that consists of an icon widget called a favorite icon. We will use this component on the page. While tapping on the icon, we reflect the favourite and unfavourite icons and vice versa using the update component state action. We create a component state variable called isFavourite with a boolean data type.

 

Step 2: Update the component state variable

• Wrap the icon widget with the ConditionalBuilder widget of the component. In the right panel properties, select the icon widget from the If part. On tap action of the icon widget, we will update the component state of a variable. Set the value of the component state variable (isFavourite) by applying the opposite statement. You can see the image below.

 

Make sure to set different icons (favourite and unfavourite) to properties for both icon widgets. (If part Icon widget & else part icon widget)

• In the example scenario, we will set the tap action for both icon widgets. For each action under update component state, we will set the value of isFavourite (component state variable) applying the opposite statement. Once you create both actions, then we will see to use that variable on screen.

 

 

Step 3: Use the component state variable

• To access the component state variable, set conditional builder properties in the right panel. Select the Conditional Builder Widget from the widget tree (Left Panel) and bind the if and else values shown in the below image. This property allows you to check whether isFavourite is false. If yes, then enable the icon with the Show in UI Builder option and vice versa.

 

 

In the example scenario, tapping on the favourite icon will show the unfavourite icon on the screen and vice versa. After page selection, we drag the component on the part of the screen where we need to use it.

 

Output of the project

We will see the below output while you integrate and test component state in your project.

 

 

Benefits of Using Component State in FlutterFlow

There are several benefits of using component state in FlutterFlow. Some of them we will see as below:

(1) Reusability: The most common benefit of using component state in FlutterFlow. Once you create the components, then you can reuse them in any child widget across any screens in the app. component variable manage data in one place. It reduces the time and effort to develop a dynamic app. If you need to change any flow of the component and reflect it across the app, you can implement it in an effortless manner.

(2) Dynamic behaviour: Easily control or maintain a widget using its dynamic behaviour.

(3) Better manageable: As per its name, you can hold the data for a specific component. It seems to use a very simple and manageable way.

 

Tips for Using Component State

(1) Make sure to take a simple and descriptive variable name. (e.g., isFavouriteSelected, isCardSelected) 

(2) Avoid using a variable throughout the app; it allows you to hold it within the component. For global access, use the app state variable rather than the component state. To use variable data in another screen, you need to just pass variable data to another page rather than using the app state variable. 

(3) Make sure the component variable executes as per your expected result. If not, check your entire process once again with creating, updating, and using a component variable in FlutterFlow. 

 

Conclusion

Component state in FlutterFlow is a powerful feature for creating reusable and interactive components. By using component state variables, you can control the behavior and appearance of individual components without affecting the rest of your app. Whether you are building collapsible menus, interactive cards, or dynamic forms, FlutterFlow component state makes it easy to manage and update data within components. 

 

Frequently Asked Questions (FAQs)