FlutterFlow Docs
Search…
Common Properties
While working with widgets, you may find some properties that are common across most of the widgets. This page describes the properties that work in a similar fashion for several widget.
Here are they:

Add padding

Adding a padding value allows for adjusting the overall size of the widget.
To add a Padding:
  • Select the widget from the widget tree or from the canvas area.
  • Move to the Property Editor and navigate to the Padding section.
  • Enter the desired value.
  • Click on the Refresh icon
    to reset the values.
Use the
Lock button to change the Left, Top, Right, and Bottom padding all at the same time. Unlocking will allow you to modify each value separately.

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:
  • Select the widget from the widget tree or from the canvas area.
  • Move to the Property Editor and navigate to the Alignment section.
  • Adjust this by using the slider or entering a value.

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:
  • Select the Page Name from the Widget Tree.
  • 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:
  • Select Text from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
  • 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:
  • Select Text from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
  • Find the Theme Text Style dropdown. Click on Dropdown and select Custom (at the bottom).
  • 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.
  • Find the Font Weight dropdown and select the appropriate weight.
  • To change the size, enter the value in the Font Size property.
  • 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.
  • 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:
  • Select Text from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Text Properties section.
  • 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.)

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:
  • Select the widget from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
  • Find the Image Type dropdown. Click on Network (inside the dropdown) and select Asset.
  • 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:
  • Select the widget from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
  • Find the Image Type dropdown. Click on Network (inside the dropdown) and select Asset.
  • 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:
  • Select Image or CircleImage from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
  • 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:
  • Select the widget from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Icon section.
  • Set the Icon Size by entering the value in the Icon Size property.
  • 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:
  • Select ListTile from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Style Properties section.
  • 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:
  • Select ListTile from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Style Properties section.
  • 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:
  • Select ListTile from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Style Properties section.
  • Checkmark the Dense property (click on it).

Customizing ListTile title

To customize the title:
  • Select ListTile from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Title section.
  • Find the Theme Text Style dropdown. Click on Body Text 1 (inside the dropdown) to see other options and choose any.
  • 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.
  • To change the size, enter the value in the Font Size property.
  • 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:
  • Select ListTile from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Subtitle section.
  • Find the Theme Text Style dropdown. Click on Body Text 1 (inside the dropdown) to see other options and choose any.
  • 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:
  • Select ListTile from the widget tree or from the canvas area.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Leading Icon section.
  • Click on the None button then search and select the icon name from the image picker popup.
  • Set the Icon Size by entering the value in the Icon Size property.
  • 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:
  • 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.
  • 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.
  • 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:
  • Select the widget from the widget tree or from the canvas area.
  • Click on the Actions tab (on the right side of your screen).
  • Click on + Add Action and select any action from the On Tap, On Double Tap, On Long Press.
  • Select the Action Type from the dropdown menu.
  • 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:
  • Select the ListView/GridView/StaggeredView from the widget tree or the canvas area.
  • Move to the properties panel and select the Backend Query.
  • Scroll down through the already added query (e.g. Query collection or API call) and make sure the Single Time Query is enabled.
  • 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