FlutterFlow Docs
Search…
⌃K

Widget Commonalities

While working with widgets, you may find some features or properties that are common in widgets. This page describes how to add features or change the properties that work in a similar fashion for several widget.
Here are they:

Changing the size

Use the instructions below to change the height or width of any widget.
  1. 1.
    Navigate to the Height or Width property of the widget.
  2. 2.
    There are three ways you can change the size:
    1. 1.
      To set to an exact size, select PX and enter the desired value.
    2. 2.
      To make the height or width of the widget the screen's height or width, click on the infinity icon (
      ).
    3. 3.
      To set the size as a % of the screen size, select % and enter the desired value.
Changing the size

Add padding

Padding is the empty space around the outer side of the widget.
To add a padding:
  1. 1.
    Select the widget from the widget tree or from the canvas area.
  2. 2.
    Move to the Property panel and navigate to the Padding & Alignment section.
  3. 3.
    Enter the L(left), T(top), R(right), B(bottom) values.
  4. 4.
    You can use the (
    ) Lock button to change all values together and refresh button(
    ) to reset the values.
Add padding

Adjust alignment

The Alignment property helps you position the widget.
Here are the alignment options:
Horizontal Alignment determines where the widget is placed horizontally inside of its parent. You can adjust this by using the slider or entering a value. A value of -1 will place the widget all the way to the left, while a value of 1 will place the widget all the way to the right.
Vertical Alignment determines where the widget is placed vertically inside of a parent. You can adjust this by using the slider or entering a value. A value of -1 will place the widget all the way to the top, while a value of 1 will place the widget all the way to the bottom.
To change the alignment:
  1. 1.
    Select the widget from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor and navigate to the Alignment section.
  3. 3.
    Adjust this by using the slider or entering a value.

Change color

To change color for any widget property:
  1. 1.
    Navigate to a widget property that allows you to set a color.
  2. 2.
    Click on the box next to Unset or already selected color, select the color, and then click Use Color or click on Unset or already selected color and enter a Hex Code directly.
  3. 3.
    You can also set a color from variable.
Change color

Opening Drawer from an AppBar

To open the Drawer (without an AppBar widget), you have to swipe on the page. This could be a little confusing to users since they don't have any signal that the Drawer exists. This can be solved by adding the AppBar widget. Once you add the AppBar, the AppBar automatically shows the menu icon (icon with three lines) button.
To add an AppBar:
  1. 1.
    Select the Page Name from the Widget Tree.
  2. 2.
    Drag the AppBar widget from the Page Elements tab (in the Widget Panel) or add it directly from the widget tree.
Opening the Drawer widget by clicking the menu icon in the AppBar:
Opening the EndDrawer:

Styling text

Using various properties under the Text Properties section, you can customize the Text widget as per your design.

Using predefined theme text style

When you create any project on FlutterFlow, predefined text styles are created.
To use the predefined theme text style:
  1. 1.
    Select Text from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
  3. 3.
    Find the Theme Text Style dropdown. Click on the already selected Text Style (inside the dropdown) to see other options and choose any.

Create and use the custom text style

If the predefined text style doesn't match your design, you can always create and use your own.
Here's an example of how to create a custom text style:
  1. 1.
    Select Text from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
  3. 3.
    Find the Theme Text Style dropdown. Click on Dropdown and select Custom (at the bottom).
  4. 4.
    Click on the button below the Font Family. Choose the font from the list. If the list doesn't contain the font you are looking for, you can search for it.
  5. 5.
    Find the Font Weight dropdown and select the appropriate weight.
  6. 6.
    To change the size, enter the value in the Font Size property.
  7. 7.
    Now, find the Text Color property, Click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
  8. 8.
    Make it Italic by marking the Italic checkbox.
For consistency, we recommend creating your custom text styles before starting your project.

Changing line height

Sometimes you may want to make manual adjustments to the height of the Text line.
To change the line height of a text:
  1. 1.
    Select Text from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
  3. 3.
    Scroll down to find the Line Height property and enter the value. (e.g. a value of 1.5 would make the line height 50% larger than the font size.)

Set max lines

When you have a long text that won't fit in a single line, it will start from the new line. You can limit your text up to certain lines if you wish to. For example, initially showing the product information up to a few lines.
To set the max lines:
  1. 1.
    Select Text from the widget tree or the canvas area.
  2. 2.
    Move to the Property panel (on the right side of your screen) and scroll down to the Text Properties section.
  3. 3.
    Find the Max Lines property and enter the value.
Set max lines

Adjust letter spacing

To adjust the spacing between the letters:
  1. 1.
    Select Text from the widget tree or the canvas area.
  2. 2.
    Move to the Property panel (on the right side of your screen) and scroll down to the Text Properties section.
  3. 3.
    Find the Letter Spacing property and enter the value.
Adjust letter spacing

Changing Image type

By default, the widget is set to an Image Type of Network. However, you can change this to use an image uploaded directly to your app.
Here's how you can change the Image Type:
  1. 1.
    Select the widget from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
  3. 3.
    Find the Image Type dropdown. Click on Network (inside the dropdown) and select Asset.
  4. 4.
    Now, find the Asset Image property, Click on the Upload Image button, select the image and upload it.
If you want to use the same image multiple times in your app, you don't need to upload the same image multiple times. You can use the uploaded image for other Image widgets as well.
Once you upload an image, you can use it throughout your app. You can manage your uploaded images with the Project Media Asset Manager.
To use an uploaded image:
  1. 1.
    Select the widget from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
  3. 3.
    Find the Image Type dropdown. Click on Network (inside the dropdown) and select Asset.
  4. 4.
    Click on No asset select (inside the dropdown) and choose the image.

Showing Image on fullscreen

The displayed image might look small on some devices. You can allow users to see the image on a full screen and then zoom/pan the image by making the image Expandable.
To make the image expandable:
  1. 1.
    Select Image or CircleImage from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
  3. 3.
    Checkmark the Make Expandable property (click on it).
  • The zoom/pan image feature works only on a mobile device.
  • Checking the Make Expandable will add an Expand Image Action on the Image. See more details about the Expand Image Action here.

Customizing Icon

To change the size and color of the Icon widget:
  1. 1.
    Select the widget from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Icon section.
  3. 3.
    Set the Icon Size by entering the value in the Icon Size property.
  4. 4.
    To change the color, find the Icon Color property, click on the box next to Black, select the color, and then click Use Selected Color or click on Black and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Styling ListTile

Changing background color

To change the background color:
  1. 1.
    Select ListTile from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Style Properties section.
  3. 3.
    Find the Color property, click on the box next to #f5f5f5, select the color, and then click Use Selected Color. Or click on #f5f5f5 and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Add content padding

Content Padding adds space between the item content and the border of your ListTile.
To add the content padding:
  1. 1.
    Select ListTile from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Style Properties section.
  3. 3.
    Find the Content Padding property and enter the values for L(left), T(top), R(right), and B(bottom) input boxes.

Reducing ListTile height

When you have a long list and you want to fit more content on the screen, you can use the dense property to reduce the height of the ListTile a bit.
To reduce the height:
  1. 1.
    Select ListTile from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Style Properties section.
  3. 3.
    Checkmark the Dense property (click on it).

Customizing ListTile title

To customize the title:
  1. 1.
    Select ListTile from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Title section.
  3. 3.
    Find the Theme Text Style dropdown. Click on Body Text 1 (inside the dropdown) to see other options and choose any.
  4. 4.
    Click on the button below the Font Family. Choose the font from the list. If the list doesn't contain the font you are looking for, you can search for it.
  5. 5.
    To change the size, enter the value in the Font Size property.
  6. 6.
    Now, find the Text Color property, Click on the box next to the already selected color, select the color, and then click Use Selected Color. Or click on the already selected color and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Customizing ListTile subtitle

To customize the subtitle:
  1. 1.
    Select ListTile from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Subtitle section.
  3. 3.
    Find the Theme Text Style dropdown. Click on Body Text 1 (inside the dropdown) to see other options and choose any.
  4. 4.
    Click on the button below the Font Family. Choose the font from the list. If the list doesn't contain the font you are looking for, you can search for it.

Add ListTile leading icon

The Leading Icon appears at the start (left side) of the ListTile.
Here's an example of how you can add a leading icon:
  1. 1.
    Select ListTile from the widget tree or from the canvas area.
  2. 2.
    Move to the Property Editor (on the right side of your screen) and scroll down to the Leading Icon section.
  3. 3.
    Click on the None button then search and select the icon name from the image picker popup.
  4. 4.
    Set the Icon Size by entering the value in the Icon Size property.
  5. 5.
    To change the color, find the Icon Color property, click on the box next to Unset, select the color, and then click Use Selected Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Adding border

To add a border:
  1. 1.
    Find the Border Color property, click on the box next to Transparent, select the color, and then click Use Selected Color or click on Transparent and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
  2. 2.
    Now, Find the Border Radius property below, enter the value 50. By default, the value 50 will be set for all corners which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). Click on the lock icon (
    ) to change each corner separately.
  3. 3.
    Find the Border Width property below, enter the value 5.

Adding action

Actions help in handling user gestures inside the app. Some of the common Actions that you can define include On Tap, On Double Tap, On Long Press, On Submit, and so on.
To add an action:
  1. 1.
    Select the widget from the widget tree or from the canvas area.
  2. 2.
    Click on the Actions tab (on the right side of your screen).
  3. 3.
    Click on + Add Action and select any action from the On Tap, On Double Tap, On Long Press.
  4. 4.
    Select the Action Type from the dropdown menu.
  5. 5.
    Further options are displayed based on the Action Type you selected.
You can find a full list of Action Types here.

Enable pull to refresh

For some reason, you might have enabled the Single Time Query while making a Backend Query on a scrollable widget. This does refresh the list if the item is updated in the backend. In such a case, you can add a pull-to-refresh feature to allow the users manually refresh the list.
Pull to refresh on ListView
To enable pull to refresh:
  1. 1.
    Select the ListView/GridView/StaggeredView from the widget tree or the canvas area.
  2. 2.
    Move to the properties panel and select the Backend Query.
  3. 3.
    Scroll down through the already added query (e.g. Query collection or API call) and make sure the Single Time Query is enabled.
  4. 4.
    Find the Enable Pull to Refresh property and turn on the toggle. This will automatically add the Refresh Database Request action on a pull to refresh gesture.
Enable Pull to Refresh on ListView

Setting color from variable

You might need to set a dynamic color to any widget property such as Container background and Text color. You can do so by setting a color from a variable. For example, displaying the temperature color based on or directly from a local state variable, Firestore document, API call response, or any other source.
Setting color from variable
To set a color from a variable:
  1. 1.
    Navigate to a widget property that allows you to set a color.
  2. 2.
    Click on the Set. This will open the Set from Variable menu.
  3. 3.
    From this menu, you can select the source of your color. For example, to set it from a local state variable, choose the Local State -> variable name.
Setting color from variable
Here is another example of setting the color from Conditional Value.

Trigger action on selection change

Here you will see how to trigger an action when the selection changes for any Form widget such as Dropdown, RadioButton, ChoiseChips, Slider, and RatingBar.
For simplification purposes, we have used the Dropdown widget. The instructions go the same for the other Form widgets.
Triggering snackbar message on dropdown selection change
To do so:
  1. 1.
    Select the widget from the widget tree or canvas area.
  2. 2.
    Select Actions from the Properties panel (the right menu), and click + Add Action.
  3. 3.
    You will notice that the Type of Action (aka callback) is already set to On Selected. That means actions added under this will be called whenever the selection changes.
  4. 4.
    Now you can add any action here.
Here is an example showing the snackbar message when the Dropdown selection changes.
Triggering snackbar message on dropdown selection change

Copy variable

If you have set a complex variable value (e.g., using Conditional Logic) and want to use the same logic to set another variable value, you can do so by copying a variable.
To copy-paste a variable:
  1. 1.
    Open the Set from Variable menu and select the Variable Options icon.
  2. 2.
    Select the Copy Variable.
  3. 3.
    Move to the place where you want to paste the variable, and open the Set from Variable menu.
  4. 4.
    Click on the Paste Variable icon.
  5. 5.
    Click Confirm.
Copy variable

Combine text

Using this you can combine multiple texts that look like one. For example 'you have 3 notifications' text is a combination of 3 different texts, where 'you have' and 'notifications' are static texts, and '3' is a dynamic value from a variable.
Here's how you can display a combined text:
  1. 1.
    Select the widget property that can show a text (e.g., Text, TextField).
  2. 2.
    Click Set from Variable and select Combine Text.
  3. 3.
    To show the static text, directly enter the value.
  4. 4.
    To show the dynamic text, click on the
    icon, select From Variable, and choose the variable.
  5. 5.
    Click on Add Text to add new text.
To have a space between multiple texts, you must enter it manually.
Combine text