FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

Button

The Button widget allows users to take action such as saving data, opening a new page, etc. You can use it in forms, dialogs, cards, etc.
Button

Adding Button widget

Here's an example of how you can use a Button widget in your project:
  1. 1.
    First, add the Button widget, move to the Properties Panel > Button Text > Text, and provide the text to be displayed on the button.
  2. 2.
    You can resize the button using the handles displayed inside the button.
Adding Button widget

Adding icon to button

To add an icon before the text of the button:
  1. 1.
    Select the Button widget, move to the Properties Panel > find the Icon property > Click on the None > search and select the icon.
    1. 1.
      You can also customize the icon's size and color.
  2. 2.
    To adjust the space around the icon, use the Icon Padding property.
Adding icon to button

Customizing

You can customize the appearance and behavior of this widget using the various properties available under the properties panel.

Changing button size

To change the height and width of the Button:
  1. 1.
    Select the Button widget, move to the Properties Panel > Button Default Style > enter the Width and Height value.
    1. 1.
      To set it to an exact size, select PX and enter the desired values.
    2. 2.
      To make the height or width of the image the screen's height or width, just click on the infinity icon(
      ).
Changing button size

Changing background color

To change the background color, move to the Properties Panel > Button Default Style > set the Fill Color.
Changing background color

Adding border

See how to add a border.

Changing elevation

To change the elevation (depth or Z-axis), move the Properties Panel > enter the Elevation value.
The higher value draws the bigger size of the shadow.
Changing elevation

Styling the text

See how to style a text.

Changing line height

Set color dynamically

See how to set a color from variable to any color property of this widget.

Disable button

You can disable a button if a specific condition is met. For example, on a login page, you could disable the "Login" button if a user has not filled in their username and password or has not agreed to the terms and conditions.
Disable a button
To disable a button:
  1. 1.
    Select the Button widget, move to the Properties Panel > turn on the Button Disable Style > click Unset, and set the Conditions. This can be the Single Condition or Combine Conditions based on your requirement. Note that the button will be disabled only when the condition(s) are true.
  2. 2.
    Using the Disabled Color and Text Color properties, you can customize how the button will look in a disabled state.
Adding conditions to disable a button.

Change button style on hover

You might want to change the button style when the user hovers over it to indicate that the button is interactable.
To change the button style on hover, select the Button widget, move to the properties panel, and turn on the Button Hover Style. Use the properties such as Fill, Border, Text Color, and Elevation to customize the button's appearance.
Button changes the color when hovered over it
Changing button hover style

Show/Hide widget

See how to show or hide any widget using the Conditional Visibility property.

Responsive Visibility

See how to add responsive visibility to any widget.

Add padding & alignment

See how to add padding and alignment to any widget.
Previous
Icon
Next
IconButton
Last modified 1mo ago