FlutterFlow Docs
Search…
Local State
Local State allows you to store values that you can use on different pages. For example, your language selection on one page can be used to show the text (in the selected language) on other pages of the app.
You can also mark the Local State variable as 'Persisted' to store values that can be used when the app is restarted.

Supported Data Types

The following data types are available within FlutterFlow:
  • Integer: To store numbers such as 100, 4302, 50000, etc.
  • Double: To store a decimal number such as 12.43, 3233.50, 65.5666, etc.
  • String: To store plain text such as title, description, etc.
  • Image Path: To store the URL of the uploaded image.
  • Video Path: To store the URL of the uploaded video.
  • Audio Path: To store the URL of the uploaded audio.
  • Boolean: To store either a true or false value.
  • Record Reference: To store a reference of a document. Storing a reference helps you fetch the document data.
  • Timestamp: To store date and time value.
  • Lat Lng: To store the latitude and longitude of a particular place. Storing Lat Lng value helps you locate a place in Google Maps.

Creating Local State Variable

To create a Local State variable:
  • Click on the Local State (
    ) from the Navigation Menu (left side of your screen).
  • Click on the + Add State Variable. A popup will open.
    • Inside the field_name box, enter the name of the variable.
    • Click on the dropdown list below (already selected with String) and select the suitable Data Type.
    • (Optional) Enable the List for storing multiple values of the same data type. For example, storing the list of Fruit Names.
    • (Optional) Enabled the Persisted for preserving the variable values even when the app restarts. For example, preserving the dark/light theme preference.
    • Click Create.

Setting Local State Variable

To set any value to the Local State variable, you must design a page then add an action to update the Local State variable. You can skip this step if you have already designed your page.
Setting the Local State variable consists of the following steps:
  1. 1.
    Designing a page (you can skip this if you already have a page designed)
  2. 2.
    Adding an Action Update Local State.

Designing a page

To design a page:
  • Create/Select a page.
  • Drag the Column widget from the Layout Elements tab.
  • Add the DropDown widget with multiple language options.
  • Add a Button to add an action to update the Local State variable.
  • Add another Button to move to the next page.

Adding an Action update Local State

You can add an action to update the Local State by visiting the following page.

Retrieving Local State Variable

To retrieve the local state variable value:
  • Select the widget from the widget tree or from the canvas area.
  • Move to property editor and click on the Set from Variable text. (This will open a new panel)
  • Set the Source to Local State.
  • Set the Available Options to the Local State Variable name that you have defined.
  • (Optional) Set the default value if you wish to.
  • Click Save.
You must set the local state variable before you try to use it.
Here's is how it works when you run the app:
See how the selected language has been displayed even after app restart.
You can simply refresh your browser to mimic the app restart behavior.

Using Local State Variable in Custom Widget

Using the Local State variable, you can use the data that is created on another page in your custom widget. For example, showing chart widget (e.g bar chart, line chart, etc.) on a separate page using the data that is generated somewhere else in the app.
Here are the steps to use local state variable in Custom Widget:
  1. 1.
    Create Local State Variable
  2. 2.
    Set Data into Local State Variable
  3. 3.
    Create/Add Custom Widget
  4. 4.
    Pass Local State Variable into Custom Widget

1. Create Local State Variable

To create the local state variable, please find the instructions here.

2. Set Data into Local State Variable

You must have a page where data is being created and add an action that sets the date into the local state variable. You can find the instructions to do so here.

3. Create/Add Custom Widget

Create a Custom Widget using the instruction here.

4. Pass Local State Variable into Custom Widget

To pass the local state variable into the Custom Widget
  • Select Custom Widget from the widget tree or from the canvas area.
  • Move to the Property Editor and scroll down to the Custom Widget Properties section.
  • Find the parameter in which you want to pass a value from the local state variable and click on the Set From Variable.
  • Set the Source to Local State.
  • Set the Available Options to the Local State Variable name that you have defined.
  • (Optional) Set the default value if you wish to.
  • Click Save.
Last modified 11d ago