FlutterFlow Docs
Search…
⌃K

Local State

Local State allows you to store values that you can use on different pages of your app. For example, your language selection on one page can be used to translate the text 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.
In this guide, you'll learn to work with Local State variables by building an example that stores language from the dropdown into the local state variable. The selected language is then shown on another page of the app (i.e., without passing it from the previous page).
Storing language selection using local state variable

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.

Working with Local State Variable

Working with local state variables includes the following:

Creating Local State Variable

To create a Local State variable:
  1. 1.
    Click on the Local State (
    ) from the Navigation Menu (left side of your screen).
  2. 2.
    Click on the + Add State Variable. A popup will open.
    1. 1.
      Inside the field_name box, enter the name of the variable.
    2. 2.
      Click on the dropdown list below (already selected with String) and select the suitable Data Type.
    3. 3.
      (Optional) Enable the List for storing multiple values of the same data type. For example, storing the list of Fruit Names.
    4. 4.
      (Optional) Enabled the Persisted for preserving the variable values even when the app restarts. For example, preserving the dark/light theme preference.
    5. 5.
      Click Create.
  3. 3.
    Once the Local State Variable is created, you can give a default value to it. (e.g. isDarkTheme -> False, language -> English, etc.)
Creating local state variable

Setting Local State Variable

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

1. Building a page

To design a page:
  1. 1.
    Create/Select a page and give it a name.
  2. 2.
    Select the AppBar widget and remove the existing back button. Move to the property editor (on the right) and turn on the Show Default Button.
  3. 3.
    Select the Column and set its Horizontal Alignment to 0.
  4. 4.
    Inside the Column widget, add the DropDown widget with multiple language options.
  5. 5.
    Add a Button to add an action to update the Local State variable and set its padding to 10 on all sides.
  6. 6.
    Add another Button to move to the next page and set its padding to 10 on all sides.
Building a page

2. 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:
  1. 1.
    Select the widget, move to the properties panel, and click Set from Variable.
  2. 2.
    Select Source as Local State and Available Options to the Local State Variable name that you have defined.
  3. 3.
    (Optional) Set the default value if you wish to.
  4. 4.
    Click Confirm.
Retrieving Local State Variable

Securing persisted fields

You might want to store sensitive information in a local state variable (e.g., auth token, API keys, or anything that could reveal the user's personal information). The secure local state enables you to keep private data on a user's device securely.
  • This option is only available if you have any variable marked as 'Persisted'.
  • This will use the device-specific encrypted storage (KeyChain for iOS and EncryptedSharedPreferences on Android).
To secure the persisted fields, turn on the Secure Persisted Fields toggle.
Securing persisted fields

Using Local State Variable in Custom Widget

Using the Local State variable, you can use the data created on another page in your custom widget. For example, showing the progress bar value that is obtained on another page.
Using Local State Variable in Custom Widget
Here are the steps to use the local state variable in Custom Widget:

1. Create a local state variable

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

2. Set data into the local state variable

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

3. Create/add a custom widget

Create a Custom Widget using the instruction here. You can find the widget used in the example here.

4. Pass local state variable into a custom widget

To pass the local state variable into the Custom Widget
  1. 1.
    Select Custom Widget, move to the properties panel, and scroll down to the Custom Widget Properties section.
  2. 2.
    Find the parameter in which you want to pass a value from the local state variable and click on the Set From Variable.
  3. 3.
    Select Source as Local State and Available Options to the Local State Variable name that you have defined.
  4. 4.
    (Optional) Set the default value if you wish to.
  5. 5.
    Click Confirm.
Pass local state variable into a custom widget