Floating Action Button in Flutter

Introduction

Floating Action Button (FAB) is a circular icon button that floats above the user interface. In this section, you will learn how to use the FAB widget in Flutter to create a variety of floating action buttons with different styles and functionalities. It is commonly used to trigger primary actions in an application, such as adding a new item, composing a new message, or initiating a new task.

Example 1: Simple FAB

In this example below, you will learn to create a basic FAB with a default icon.

// put FAB inside Scaffold.
floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
)

Example 2: Custom Color FAB

In this example, you will learn to create a FAB with a custom background color.

FloatingActionButton(
  onPressed: () {},
  backgroundColor: Colors.green,
  child: Icon(Icons.phone),
)

Example 3: Mini FAB

In this example below, you will learn to implement a smaller version of the FAB suitable for limited spaces.

FloatingActionButton(
  mini: true,
  onPressed: () {},
  child: Icon(Icons.star),
)

Example 4: Extended FAB

In this example below, you will learn to create an extended FAB with a label and icon.

FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Text('Add Item'),
)

Challenge

Create floating action button which change its background color from green to red when pressed.