FloatingActionButton (FAB)

The FloatingActionButton widget (also known as FAB) floats above the content on the screen and is tied to an action. The FAB widget is circular in shape and resides in the bottom right corner of the screen.

You can use the FAB widget to perform the primary action on the screen, such as Add, Create, etc.

Adding the FloatingActionButton to Your Project

To add the FAB widget with an icon to your project:

1. First, drag the FAB widget from the Page Elements tab (in the Widget Panel) or add it directly from the widget tree.

2. Now add the Icon widget from the Base Elements tab and drop it inside the FAB widget.

3. Move to Property Editor and scroll down to the Icon section.

4. Click on the Settings Outlined button, then search and select the icon name with add. Also, set its Icon Color property to Tertiary.

The icon you use can convey different meanings. For example, the thumbs up icon () can be used to indicate like action and it can also be used for any approval action.

Changing the Properties

You may want to customize the default FAB widget to match your design. The Properties Panel can be used to modify the appearance of your FAB widget.

Customizing the FAB button

Sometimes you may want to show more than an icon in your FAB.

Here's an example of how you can customize a FAB widget:

1. Select the FloatingActionButton widget from the widget tree or from the canvas area.

2. Move to the Property Editor and scroll down to the FAB Properties section.

3. Checkmark the Extended check box.

4. Scroll down a bit and find the Icon section. Click on the None button, then search and select the icon name with thumb_up. Also, set its Icon Color property to Tertiary.

5. At this point, you will have two icons, add and thumb_up icon. Replace the add icon (child of FAB widget) with a Text widget. Change the name to Approve and Text Color to Tertiary.

You can further customize your FAB by adding additional child widgets (e.g. Row, Image, etc.).

Changing the Background Color

To change the background color of the FAB widget:

1. Select the FloatingActionButton widget from the widget tree or from the canvas area.

2. Move to the Property Editor and scroll down to the FAB Properties section.

3. Find the 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.

Changing the Elevation

To change the elevation (depth or Z-axis) of the FAB button:

1. Select the FloatingActionButton widget from the widget tree or from the canvas area.

2. Move to the Property Editor and scroll down to the FAB Properties section.

3. Find the Elevation property and enter the value to see the drop shadow effect below the Card. The Higher value sets the bigger size of the shadow.

Adding Action

To perform any action on click of the FloatingActionButton, add an Action in FlutterFlow. You can find the instructions on adding the Action here.

Show/Hide FloatingActionButton (FAB)

Please find the instructions to show/hide the widget here