FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

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

To stylize the text you can use any predefined style or create the custom one. Here' how you do it:
Example of styling text on Text widget
For consistency, we recommend creating your custom text styles before starting your project.

Changing line height

Sometimes you might want to make manual adjustments to the height of the Text line.
To change the line height of a text, move to the properties panel and find the Line Height (ratio) property and enter the value. (e.g. a value of 1.5 would make the line height 50% larger than the font size.)
Changing line height

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, move to the properties panel, 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.

Set dark mode image

You can display a dark mode version for any image in your app. This is particularly useful when you want to improve the user experience by displaying an alternate image when the user switches to dark mode. For instance, showing a dark version of your app's logo that blends seamlessly with the app's dark mode interface, like this:
Dark mode image
To set dark mode version of your image:
  1. 1.
    Select the Image widget > move to the Properties Panel > set Image Type to Asset.
  2. 2.
    Enable Set Dark Mode.
  3. 3.
    Select the Light Mode Asset and Dark Mode Asset. You can upload images directly from here as well.
Set light and dark mode images

Customizing Icon

Here's how you can customize the icon:
  • To change the default icon, navigate to the Properties Panel > find the Icon property > Click on the default icon > search and select the icon.
  • To change its size, use the Icon Size property.
  • To change its color, use the Icon Color property.
Customizing Icon

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 border to any widget:
  1. 1.
    Find the Border Color property, and change the color using the intructions here.
  2. 2.
    To create the rounded border, use the Border Radius property. By default, any value your enter 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. Use the refresh icon to reset the values.
  3. 3.
    To increase the border thickness, use the Border Width property.
Adding border

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

Responsive Visibility

Responsive visibility is a feature that allows you to control the visibility of a widget based on the size of the screen or device being used. This means that you can create different versions of your UI for different screen sizes or device types, making sure that your app looks appropriate on each platform.
Here's an example of showing the different navigation menus on the web and mobile:
The navigation menu on the web and mobile
You can achieve this by creating two separate widgets and setting their responsive visibility (under the properties panel).
In the example above, the navigation menu created for the web (on the left side) is made visible only on a wider screen by enabling the desktop icon. Similarly, the navigation menu for the mobile (on the right side) is made visible only on a small screen by enabling the mobile icon.
Here is how it is done:
Responsive visibility for mobile
Responsive visibility for web

Edit multiple widgets simultaneously

We allow you to modify the properties of multiple widgets at once rather than editing each one individually. This can be a time-saving and efficient way to make bulk changes to the user interface of an app.
For example, imagine that you want to change the background color of multiple buttons in an app from blue to green. Without the ability to edit multiple widgets simultaneously, you would need to select and edit each button individually. However, with this feature, you can select all of the buttons at once and modify their fill color property.
To edit multiple widgets simultaneously, you can select all the widgets you want to modify by clicking on each one while holding down the shift key. Once you have selected all the desired widgets, you can access and modify their common properties all at once from the properties panel.
Edit multiple widgets simultaneously
Previous
Signature
Next - Building UI
Component
Last modified 24d ago