Deep dive into FloatingActionButton in Flutter: Part 1

Share this post

You can find part 2 here

FloatingActionButton is a very useful Widget in a MaterialApp. It usually is (and should be) used as a primary action in a Scaffold, which is a top-level container in MaterialApp.

In this post, I want to talk about how to use FloatingActionButtons and explore their possibilities as much as I can.

Flutter made it very easy to use FloatingActionButton to any page that has a Scaffold as a top-level container:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButtons"),
      ),
      body: Center(
        child: Text('mrflutter.com'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

The default position is always bottom right corner of the page and the default background color comes from primarySwatch or primaryColor of the theme of the MaterialApp class.

FloatingActionButton with default colour and positioning

If you want to use the smaller version of the FAB you can set mini: true.

How to change FloatingActionButton’s position

For this we can use FloatingActionButtonLocation which has the following options:

  • centerDocked
  • centerFloat
  • endDocked
  • endFloat
  • endTop
  • miniStartTop
  • startTop

Start, center and end speak for themselves as they simply position the FAB accordingly. The interesting part is docked and float ones which come in handy when FAB is used together with BottomNavigationBar. Docked means that the center of FAB will nicely align with the top of the BottomNavigationBar and float means that FAB will be positioned above the BottomNavigationBar.

FloatingActionButtonLocation.centerDocked

Here’s the code I have used for the screenshot:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButtons"),
      ),
      body: Center(
        child: Text('mrflutter.com'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
        ),
      ),
    );
  }

If you would like to align the FAB with the AppBar, just use startTop or endTop as location.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButtons"),
        backgroundColor: Colors.purple,
      ),
      body: Center(
        child: Text('mrflutter.com'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.startTop,
    );
  }

It will then look like this:

FloatingActionButtonLocation.startTop

How to use FloatingActionButton.extended

If you want to add text to your FAB, there is a wider version that supports a text label together with an icon. Obviously, label becomes a mandatory parameter, but icon becomes optional. The child parameter goes away as it can now contain multiple widgets.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FloatingActionButtons"),
      ),
      body: Center(
        child: Text('mrflutter.com'),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {},
        tooltip: 'Tap to call',
        label: Text('CALL'),
        icon: Icon(Icons.call),
      ),
    );
  }

This will look like this:

FloatingActionButton.extended
FloatingActionButton.extended

I hope this post helped you do more with FloatingActionButtons. In the next part, I will explain what you can do with FABs and animations.