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 in several widgets.

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 The 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 the Text

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

Using the 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 the 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.

Customizing the 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 The 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 The 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 The 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 A 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 picket 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 a 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.
Last modified 11d ago