How to Create and Customize the Floating Action Button in Flutter

The Floating Action Button (FAB) represents the critical user action on that screen. This widget looks like a round button floating in the bottom right corner of the screen and hence it is very accessible and within the reach of the users.

Creating a Floating Action Button

The FloatingActionButton widget class in Flutter can be used to create a floating button. The following code shows how to create a simple floating button in Flutter.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.format_size_sharp, color: Colors.white),
          onPressed: () {
            // Do something
          },
        ),
      ),

    );
  }
}

Customize the Floating Action Button

The FloatingActionButton widget has a number of properties that can be used to customize its appearance and behavior. For example, we can use the backgroundColor property to set the button background colour and the onPressed property to set a callback that is executed when the button is pressed.

floatingActionButton: FloatingActionButton(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  child: const Icon(Icons.format_size_sharp, color: Colors.white),
),

Displaying Icon and label on the floating action button

floatingActionButton: FloatingActionButton.extended(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  icon: const Icon(Icons.format_size_sharp, color: Colors.white),
  label: const Text("Settings"),
),

Small Floating Action Button

floatingActionButton: FloatingActionButton.small(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  child: const Icon(Icons.format_size_sharp, color: Colors.white),
),

Large Floating Action Button

floatingActionButton: FloatingActionButton.large(
  tooltip: "Settings",
  backgroundColor: Colors.cyan.shade800,
  foregroundColor: Colors.white,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18),
  ),
  onPressed: () {
    // Do something here.
  },
  child: const Icon(Icons.format_size_sharp, color: Colors.white),
),