# Variable

> This page is about FlutterFlow Studio (the visual builder), not FlutterFlow (the app builder you use by describing your app).

URL: https://docs.flutterflow.io/resources/data-representation/variables

Variables

Variables in FlutterFlow Studio let you store and manage dynamic data, which is essential for creating interactive and responsive applications. By using variables, you can capture user inputs, track states, and manipulate data across different parts of your app.

![variable](https://docs.flutterflow.io/assets/images/variable-c8dba55586bec76e5d8d02e8a5769538.avif)

In this section, we'll dive into the different types of variables available in FlutterFlow Studio, including:

- **Local Variables:** Variables that are confined to a specific widget or page, used for handling data within a localized context. For example, Page State variables or Component State variables are scoped to the entity they were created in.
- **Global Variables:** Variables that can be accessed and modified throughout the entire app, allowing for consistent data management across pages. For example, App State variables can be accessed from anywhere in the app.

:::note[What are scopes?]
The scope of a variable is determined by where it is created. For instance, if it's created at the app level, it can be accessed throughout the app. However, a variable created at the page level can only be accessed on that page.
:::

## Creating Variables

When creating variables in FlutterFlow Studio, there are a few important considerations regarding their name, data type, nullability, and initial values. The specific _process_ for creating variables differs depending on whether you are working with App State, Page State, or Component State variables, and you can find detailed instructions linked below.

### Naming Variable
Start by giving your variable a meaningful and descriptive name that reflects its purpose. This name will be used throughout your app to reference the variable, so it's important to keep it clear and consistent with your naming conventions. 

:::tip[Recommended naming convention]
We recommend the `lowerCamelCase` naming convention for variables. Learn more about the **[recommended naming conventions](https://docs.flutterflow.io/resources/style-guide)** used in FlutterFlow Studio and Flutter projects. 
:::

### Assigning a Data Type to a Variable
Next, you need to select the appropriate data type for your variable. FlutterFlow Studio offers several data types, such as **Text, Integer, Boolean,** or **String**. Refer to the **[Data Types guide](https://docs.flutterflow.io/resources/data-representation/data-types)** to learn more about the available data types.

Choosing the correct data type is crucial, as it determines how the variable can be used and what kind of data it can store.

### Is List Property
Enable the **Is List** toggle to indicate that this field should be of the **list** type.

:::note[Example]

If the data type selected is `String` and the `Is List` toggle is enabled, FlutterFlow Studio will create a **list of String variables**. This list can hold multiple string values, such as a list of city names.
:::

### Nullable & Initial Value
When creating variables in FlutterFlow Studio, you have the option to make them **nullable** or **non-nullable**. This setting is crucial because it determines whether the variable can hold a null value (i.e., no value). Alongside this, you can also define an initial value for your variable, which ensures that it starts with a specific value as soon as it’s created.

![variables-null-initial-value.png](https://docs.flutterflow.io/assets/images/variables-null-initial-value-3b9551914e84a3be7ba26a84e5f0a070.png)

- **Nullable:** This option determines if a variable can hold a null value, meaning it can exist without any data. If the Nullable option is enabled, the variable can start as null and only receive a value when needed. If disabled, the variable must always have a value, which means you’ll need to provide an initial value when it’s created.

- **Initial Value:** If a variable is non-nullable (i.e., cannot be null), you are required to provide an initial value to ensure it always contains data. For nullable variables, setting an initial value is optional, allowing them to remain empty until a value is assigned.

:::tip[What is a null value?]
A null value represents the **absence of a value**. In FlutterFlow Studio, allowing a variable to be null can be beneficial in scenarios such as:

- **User Input:** Before a user enters data, a variable can start as null and only hold a value once the user provides input.
- **Conditional Logic:** In cases where certain data might not always be applicable (e.g., an optional user setting), a null value allows you to handle the absence of data more flexibly.
- **Loading States:** When fetching data from an API, variables can be null until the data is loaded, allowing you to differentiate between "loading" and "loaded" states easily.
:::

### How to create variables?
For step-by-step guides on how to create App State, Page State, and Component State variables, please refer to the following links:
- [Creating App State Variables](https://docs.flutterflow.io/resources/data-representation/app-state)
- [Creating Page State Variables](https://docs.flutterflow.io/resources/ui/pages/page-lifecycle#page-state)
- [Creating Component State Variables](https://docs.flutterflow.io/resources/ui/components/component-lifecycle#component-state)

## Set Variable

The **Set from Variable** or **Set Variable** menu in FlutterFlow Studio is a powerful feature that allows you to dynamically control the content or behavior of your widgets using **data** stored in variables. When you select a variable from this menu, you're instructing FlutterFlow Studio to use the value of that variable to populate or modify the widget's properties, such as text, visibility, or styling.

This menu provides a variety of variable **sources**, including data that's specific to the page or component, global properties that apply across the entire app, constants, and more. By choosing the appropriate variable, you can make your app more interactive and responsive to user input, data changes, or other conditions.

![set-variable-menu3.png](https://docs.flutterflow.io/assets/images/set-variable-menu3-36c77114a93aedc24f17013a0a1293e7.png)

## Manipulating Variables

When setting variables via the **Set Variable** menu, you have the ability to manipulate or transform the data before applying it to a widget or another variable. This manipulation allows you to tailor the data to fit specific needs or contexts, enhancing the flexibility and functionality of your app.

For instance, you can:

- **[Concatenate or Combine Strings:](https://docs.flutterflow.io/resources/functions/utility#combine-text)** Combine multiple text values into a single string. To learn how to manipulate strings before setting variables, see the [Utility Functions](https://docs.flutterflow.io/resources/functions/utility#combine-text) guide. 
- **[Filter or Sort Lists](#list-options):** Organize or refine data in lists to display only what’s relevant or in a specific order.
- [**Convert DateTime to UNIX:**](https://docs.flutterflow.io/resources/data-representation/global-properties#current-time) Change a DateTime object into a UNIX timestamp for compatibility or calculation purposes.
- [**Apply Conditional Logic:**](https://docs.flutterflow.io/resources/functions/conditional-logic) Use If/Then/Else statements to set different values based on specific conditions.

These manipulations enable you to create more dynamic and responsive user interfaces by ensuring that the data presented or used in your app is always in the most appropriate form.

### List Options

Use list options to extract values, filter or sort items, remove duplicates, and check a list's contents.

#### Map List Items

**Map List Items** creates a list by extracting a field from each item in a list of documents, [custom data type records](https://docs.flutterflow.io/resources/data-representation/custom-data-types), or JSON objects.

For example, extract the `name` field from cat records that contain `name`, `age`, and `breed` fields, and display the names in a dropdown.

![Map List Items extracts the name field from each record to populate a dropdown with Luna, Milo, and Bella.](https://docs.flutterflow.io/assets/images/map-list-items-4dbd669211d94839df959bc926547a14.png)

#### Filter List Items

**Filter List Items** creates a list containing only the items that match a condition. For example, use `age > 18` to include only users older than 18.

![Filter List Items keeps Noah and Mia because their ages are greater than 18.](https://docs.flutterflow.io/assets/images/filter-list-items-f9c383700822f31e12d5b64e7074fd3a.png)

#### First Few Items

**First Few Items** returns the items at the start of a list, up to the count that you specify. For example, a count of `3` returns the first three items.

![First Few Items extracts Luna, Milo, and Bella from a list of five names when the count is 3.](https://docs.flutterflow.io/assets/images/first-few-items-59dc8a1c7152945f893b65c4baa17c43.png)

#### Sort List Items

**Sort List Items** orders items by a sort key. For a list of simple values, such as numbers or strings, use each item's value as the **Sort Key**. Numbers sort numerically, and strings sort alphabetically.

For example, sort a list of names alphabetically:

![Sort List Items arranges the names alphabetically as Bella, Luna, and Milo.](https://docs.flutterflow.io/assets/images/sort-list-items-4dd448c54ae0c800fafc0c1ce22c0db9.png)

:::note[Reversing the display order]
The ListView's [Reverse property](https://docs.flutterflow.io/resources/ui/widgets/composing-widgets/list-grid#advanced-functionalities) changes the direction in which items appear. It does not sort or change the underlying list.
:::

For a list of [custom data type records](https://docs.flutterflow.io/resources/data-representation/custom-data-types), use a field with sortable values, such as a number or string, as the **Sort Key**.

For example, use the `price` field to sort `Product` records from the lowest price to the highest.

![Sort List Items uses the price field to order product records from the lowest price to the highest.](https://docs.flutterflow.io/assets/images/sort-records-by-price-c3b74cf974ef730ef9261063d8278625.png)

#### Unique List Items

**Unique List Items** removes duplicate values from a list.

For example, remove repeated cat breeds so that each breed appears only once:

![Unique List Items removes duplicate cat breeds, leaving Siamese, Persian, and Bengal.](https://docs.flutterflow.io/assets/images/unique-list-items-71271e0d7cc7faaf39dadc74d229ceb4.png)

To extract unique field values from custom data types, first use **Map List Items** to extract the field, and then apply **Unique List Items**. For example, map `Product` records to their `name` values, and then remove duplicate names.

![Map List Items extracts product names, then Unique List Items removes duplicate names to return Jacket and Hat.](https://docs.flutterflow.io/assets/images/map-unique-list-items-b2ee3702b84ccff197f7a1ce6c7d2a57.png)

#### Number of Items

**Number of Items** returns the total number of items in a list.

![Number of Items returns 3 for a list containing Luna, Milo, and Bella.](https://docs.flutterflow.io/assets/images/number-of-items-7faf40a52efcdbb08328e5989b36c5b5.png)

#### Item at Index

**Item at Index** returns an item at a specific position in a list. Indexes start at `0`. For example, index `2` selects the third item, Bella, in the following illustration.

![Item at Index returns Bella at index 2, with list indexes starting at 0.](https://docs.flutterflow.io/assets/images/item-at-index-77d71209b759ad76c8425e2b7d590e06.png)

#### Is Set and Not Empty

**Is Set and Not Empty** returns `true` only when a list is set and contains at least one item. It returns `false` when the list is empty or not set. For example, use this option to check whether a search query returned any results.

![Is Set and Not Empty returns true for a populated list and false for an empty list or a value that is not set.](https://docs.flutterflow.io/assets/images/is-set-and-not-empty-38e881f2517db684681bb3a9bd92d2ec.png)

## Updating Variable Values

In FlutterFlow Studio, you can update the values of variables through **[actions](https://docs.flutterflow.io/resources/functions/action-flow-editor)**. For example, when a button is clicked or when a form field is modified, you can trigger an action that updates a variable with a new value.

Refer to the following guides for detailed instructions on updating and using these variables:

- [App State Variables](https://docs.flutterflow.io/resources/data-representation/app-state#update-app-state-action)
- [Page State Variables](https://docs.flutterflow.io/resources/ui/pages/page-lifecycle#update-page-state-action)
- [Component State Variables](https://docs.flutterflow.io/resources/ui/components/component-lifecycle#update-component-state-action)