Aachman Garg I'm a student and Flutter developer. Other than that, my skills and interests revolve around graphic design, PowerPoint, technical writing, and music production.

Flutter FloatingActionButton: A complete tutorial with examples

5 min read 1521

Flutter FloatingActionButton: A Complete Tutorial With Examples

Adhering to Material Design Guidelines, Flutter offers different kinds of buttons for various use cases. Out of these, FloatingActionButton (FAB) is especially important because of its unique properties and the rules to use it.

In this tutorial, we’ll introduce you to these rules and show you how to use and customize the FloatingActionButton widget in Flutter.

Here’s what we’ll cover:

What is FloatingActionButton in Flutter?

Each component in Flutter is called a widget, and FloatingActionButton is no exception. As the name suggests, this widget floats on top of other widgets on the screen.

Usually, the FloatingActionButton widget is placed in the bottom-right corner of the screen and is circular in shape. It also has an elevation to give that floating effect. Best of all, all of these properties are customizable.

Here’s what a typical FloatingActionButton in Flutter looks like:

Flutter FloatingActionBar Example

To use FloatingActionButton in Flutter, use Scaffold‘s floatingActionButton property:

Scaffold(
  floatingActionButton: FloatingActionButton(),
),

This will add FAB at its default position on the screen:

Default Position of FloatingActionButton in a Flutter App

You can also create an extended FAB by using FloatingActionButton.extended():

Scaffold(
  floatingActionButton: FloatingActionButton(
    label: Text('Action'),
  ),
),
Extended FloatingActionBar Example

Here we have a default FAB on the screen.

We made a custom demo for .
No really. Click here to check it out.

FloatingActionButton rules and principles

Before we dive deeper and explore the customization options, let’s make sure we understand the rules and principles to keep in mind when using FAB. These best practices are important to keep your app consistent with Material Design.

Primary action

FAB takes a prominent place in the UI. Hence, it should perform the primary action on the screen.

The action should be the most commonly used and important action on that screen. For example, composing a tweet is the primary action in Twitter’s feed page:

Twitter App Exemplifying Primary Action

Minor actions, such as adjusting volume, copying text, and opening a drawer, should not be performed using FAB. These actions can always be performed with widgets that are hidden or subtly placed in the UI.

Constructive action

You should only use FAB for constructive actions and avoid using it for destructive actions. Actions such as adding to cart, sharing a picture, and writing an email are considered constructive actions. Destructive actions include archiving, deleting, navigating to previous page, etc.

Context is key

Floating action button should be relevant to the context of the screen; the icon and action should both make sense.

Taking an example from the Twitter app again, the icon clearly indicates what the button does — that is, it creates a new tweet.

How could this be done in the wrong way? One example would be setting the button to open a profile page, which is clearly not the most important action in the context of the screen.

Don’t use multiple FABs (in most cases)

In most cases, there should be no more than one floating action button on the screen. This makes sense because the role of FAB is to perform the most important action and having multiple FABs reduces its importance.

Google Maps App Using Multiple FloatingActionButtons

However, there is an exception to this rule: if the screen has two distinct and highly important actions, it may make sense to use two FABs. A good example of this is the Google Maps app:

Here, choosing a destination and centering at current location are both equally important actions that should be readily available on the screen.

Icon and label

By default, only the FAB’s icon should be displayed on the screen; including text, to some degree, defeats the purpose of using the FAB widget.

Flutter FloatingActionButton Icon Example
Right
Flutter FloatingActionButton Icon Wrongly Using Text
Wrong

However, in the case of extended FAB, this rule is inverted. With an extended FAB, you may display only the label or icon and label both. By contrast, displaying only the icon in an extended floating action button is not allowed.

Extended FloatingActionButton With Text Only
Right
Extended FloatingActionButton With Icon and Text
Right
Extended FloatingActionButton With Icon Only
Wrong

Customizing FloatingActionButton

Now that you understand the important principles and best practices for creating a floating action button, let’s explore the customization options Flutter’s FloatingActionButton widget has to offer.

Colors

You can customize the color of the FloatingActionBar. To change the FAB’s background color to red, enter the following:

The forgroundColor property is used to change the color of a child — in this case, the icon’s color. Let’s change it to pink:

FloatingActionButton(
	foregroundColor: Colors.pink,
),
 
Flutter FloatingActionButton With Pink Foreground

When you tap on the FAB, there’s an animation in which a color originates from the tapped position and covers the entire button area. This is called the splash color.

Let’s change the splash color of our FloatingActionButton to purple:

FloatingActionButton(
	splashColor: Colors.purple,
),
 
Flutter FloatingActionButton With Pink Foreground

There’s also a color change when mouse cursor is hovered over the button. This produces nice feedback before the button is actually tapped.

To change this color to orange, set the hoverColor property as follows:

FloatingActionButton(
  hoverColor: Colors.orange,
),
 
Flutter FloatingActionButton With Orange Hover Color

Lastly, there’s an option to change the focus color. Basically, when the button is focused using FocusNode, the color can be changed to indicate that the button is now in focus.

To understand exactly how this happens, you’ll need to review the concept of focus in Flutter, which is beyond the scope of this article.

For now, we can see the color change by setting autoFocus parameter to true. This will focus the FAB automatically and we can see the color change to green:

FloatingActionButton(
	focusColor: Colors.green,
	autoFocus: true,
),
 
Flutter FloatingActionButton With Green Focus Color

Elevation

Elevation is basically the position of button in Z-axis. The shadow is adjusted according to the elevation, which creates the illusion that the button is floating.

The default elevation of our FAB is set to 6, so let’s increase the elevation by changing it to 12:

FloatingActionButton(
	elevation: 12,
),
 
Flutter FloatingActionButton Elevation Set to 6
Flutter FloatingActionButton Elevation Set to 12

If FAB’s onPressed property is set to null, the button is marked as disabled. We can customize disabled elevation specifically.

Let’s set it to 0:

FloatingActionButton(
	onPressed: null,
	disabledElevation: 0,
),
 
Flutter FloatingActionButton Elevation Disabled

Just like focusColor, here we have focusElevation to gain some extra control over the feedback the user sees when the button is focused.

Let’s set it as 5 for this example. Don’t forget to set autoFocus to true to test it immediately.

FloatingActionButton(
	autoFocus: true,
	focusElevation: 5,
),
 
Flutter FloatingActionButton Focus Elevation Set to 5

Highlight elevation is the elevation of the button when tapped, just like splash color. We’ll set it to 50 to see a real difference in elevation:

FloatingActionButton(
	higlightElevation: 50,
),
 
Flutter FloatingActionButton Highlight Elevation Set to 50

Finally, we have hover elevation. This represents the elevation when the FAB is hovered over with the mouse cursor. Once again, we’ll keep it at 50:

FloatingActionButton(
	hoverElevation: 50,
),

 

 
Flutter FloatingActionButton Hover Elevation Set to 50

Miscellaneous properties

Let’s quickly walk through the miscellaneous properties of the FloatingActionButton widget.

First, there’s mini. Setting mini to true renders a mini version of FAB:

FloatingActionButton(
	mini: true,
),
 
Flutter FloatingActionButton mini

mouseCursor enables you to change the cursor type when it’s hovered over the button.

FloatingActionButton(
  mouseCursor: MaterialStateMouseCursor.textable,
),

toolTip enables you to provide additional accessibility to the user. What if, for example, the user does not understand what the button icon means? You can create a tooltip that says something — for instance, “Save” — and it’ll appear whenever button is hovered or long-pressed:

FloatingActionButton(
	tooltip: 'Save',
),
 
Flutter FloatingActionButton toolTip

You can customize the button’s shape using the shape parameter. For example, you can make it rectangular like this:

FloatingActionButton(
	shape: RoundedRectangleBorder(),
),
 
Flutter FloatingActionButton shape

Adding animations and transitions

FloatingActionButton uses hero animation for page transitions. The button essentially morphs into a new widget when transitioning, and it looks really cool. Let’s see it in action, shall we?

First, create a new page to navigate to. We’ll call it SecondPage:

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

Next, create a Hero widget at the center of the page:

return Scaffold(
  body: Center(
    child: Hero(tag: 'uniqueTag', child: Icon(Icons.save)),
  ),
);

The tag property enables us to connect two widgets by providing unique tags, so the framework is not confused as to which widget to morph to. For this example, we’ll use the same “Save” **icon as the child.

Now provide the same tag to FAB in the first page:

FloatingActionButton(
  heroTag: 'uniqueTag',
),

The FAB now knows that it has to animate to that specific icon widget.

Since the FAB can animate to only one widget, you cannot create multiple Hero widgets with the same tag. Each widget should have a unique tag.

Finally, we’ll have the FAB navigate to SecondPage when it’s pressed. To do that, use Navigator.push() in the FAB’s onPressed property:

FloatingActionButton(
        heroTag: 'uniqueTag',
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => SecondPage(),
            ));
        }
),

Here’s what the transition looks like:

Flutter FloatingActionButton Transition Animation

Let’s try animating another floating action button and see what that looks like.

Create a FAB in the second page. This time, we can have an extended FloatingActionButton:

FloatingActionButton.extended(
  heroTag: 'uniqueTag',
  label: Row(
    children: [Icon(Icons.save), Text('Save')],
  ),
),

Now navigating to second page should look like this:

 

Pretty cool, right?

Conclusion

Having completed this tutorial, you should now understand:

  • What FloatingActionButton is and how to use it in a Flutter app
  • Rules and principles to keep in mind when using FAB
  • How to customize FAB to your liking
  • How to add a hero animation to FAB

With this knowledge, I hope you’ll be able to implement FAB in your Flutter apps and make them even more beautiful and functional. Thanks for reading!

: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Aachman Garg I'm a student and Flutter developer. Other than that, my skills and interests revolve around graphic design, PowerPoint, technical writing, and music production.

Leave a Reply