Flutter: Using FloatingActionButton (FAB)

The FloatingActionButton (FAB) is a circular button that represents the primary action in your application (create, share, search, etc.), typically found in the bottom right corner of the screen. It is one of the most iconic elements of Material Design.

Live Demo

You can try this widget in the interactive example below:

Basic Usage

The FAB is usually assigned to the floatingActionButton parameter of the Scaffold widget.

Scaffold(
  appBar: AppBar(title: Text('FAB Example')),
  body: Center(child: Text('Hello Flutter')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      print('FAB clicked!');
    },
    child: Icon(Icons.add),
  ),
)

Customization Options

You can easily change the color, shape, and other properties of the FAB.

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.download),
  backgroundColor: Colors.purple, // Button color
  foregroundColor: Colors.white, // Icon color
  elevation: 8.0, // Shadow amount
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10), // Rounded square
  ),
  tooltip: 'Download', // Text shown on long press
)

Mini FAB

When a smaller button is needed, you can use the mini property.

FloatingActionButton(
  mini: true, // Small sized FAB
  onPressed: () {},
  child: Icon(Icons.reply),
)

FloatingActionButton.extended

If you want to show text alongside the icon, you should use the extended variation.

FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Text('New Task'),
  backgroundColor: Colors.green,
)

Positioning (FloatingActionButtonLocation)

You can change the position of the FAB on the screen using the floatingActionButtonLocation parameter of the Scaffold.

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // Bottom center, integrated with BottomNavigationBar
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(), // Creates a notch for the FAB
    child: Container(height: 50.0),
  ),
  // ...
)

Common locations:

• endFloat (Default: Bottom right)
• centerFloat (Bottom center)
• startFloat (Bottom left)
• endDocked, centerDocked (For use with BottomAppBar)

Multiple FAB Usage

If you need to use multiple FABs on a page, you can wrap them in a Column or Row. However, you must specify a unique heroTag for each FAB, otherwise, you will get an error.

Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    FloatingActionButton(
      heroTag: "btn1",
      onPressed: () {},
      child: Icon(Icons.refresh),
    ),
    SizedBox(height: 10),
    FloatingActionButton(
      heroTag: "btn2",
      onPressed: () {},
      child: Icon(Icons.add),
    ),
  ],
)

Summary

• FloatingActionButton: Primary action button.
• mini: Reduces the size.
• extended: Contains icon and text.
• heroTag: Must be unique if there are multiple FABs.
• Location: Set via Scaffold.

The FAB is an excellent tool for highlighting the most frequent action users perform.