FlutterFlow Docs
Search…
Button
The Button widget allows users to take an action such as saving data, opening a new page, etc. It is one of the most widely used widgets in Flutter.
You can use the Button widget in forms, dialogs, cards, etc.

Add a Button to Your Project

Here's an example of how you can use a Button widget in your project:
  • First, drag the Column widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Padding section. Click on the lock icon (
    ) and enter the value 10.
  • Now add one TextField widget inside the column and change its Hint Text property to Email.
  • Similarly, add one more TextField widget inside the column and change its Hint Text property to Password.
  • Finally, add the Button widget from the Base Elements tab or add it directly from the widget tree.
  • Move to the Property Editor (on the right side of your screen) and scroll down to the Button Text section. Find the Text property and change it to Login.

Adding An Icon to Button

To add an icon before the text of the button:
  • Select Button 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.
  • Click on the None button then search and select the suitable icon.
  • 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.
  • To have some space between icon and text, enter the suitable values in the Icon Padding property.

Changing the Properties

The Properties Panel can be used to customize the appearance and behavior of your widget.

Add Padding

​Here are the instructions on how to add padding.

Adjust the Alignment

​Here are the instructions on adjusting the alignment.

Styling a Button

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

Changing Button Dimension

To change the height and width of the Button:
  • Select the Button 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 Button Style section.
  • Find the Width and Height.
  • There are three ways to set the image dimensions:
    • To set to an exact size, select PX and enter the desired values.
    • To set the dimensions as a % of the screen size, select % and enter the desired value.
    • To make the height or width of the image the screen's height or width, just click on the infinity icon (
      ).

Changing the Background Color

Here's how you change the background color of a Button:
  • Select Button 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 Button Style section.
  • Find the Fill Color property, click on the box next to Primary, select the color, and then click Use Selected Color or click on Primary and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.

Adding a Border

Here's an example of how you can add a border around the Button:
  • Select Button 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 Button Style section.
  • ​Here are the further instructions on adding a border.

Changing The Elevation

To change the elevation (depth or Z-axis) of the Button
  • Select Button 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 Button Style section.
  • Find the Elevation property and enter the value to see the drop shadow effect below the selected chip. The higher value draws the bigger size of the shadow.

Styling the Text

Using various properties under the Button Text section, you can customize the text of the Button widget as per your design.
​Here are the instructions on styling the Text.
Last modified 11d ago