How to Create Floating Action Button in Flutter

Flutter / By Rakesh Saini / April 2, 2024

In Flutter, the Floating Action Button (FAB) is a prominent, circular-shaped UI element typically used for promoting the primary action in an application. It usually rests above the main content of the screen and represents the most common and essential action for the user to take.

Here’s a breakdown of key points regarding the Floating Action Button in Flutter:

Widget: In Flutter, the Floating Action Button is represented by the FloatingActionButton widget. This widget allows you to customize its appearance and behavior according to your application’s requirements.
Positioning: By default, the Floating Action Button is anchored to the bottom-right corner of the screen. However, you can adjust its position using the floatingActionButtonLocation property of the Scaffold widget, allowing you to place it at different positions on the screen.
Appearance: The FAB typically has a circular shape with an icon displayed inside it. You can customize its appearance using properties such as backgroundColor, foregroundColor (for the icon color), elevation, and shape.
Interactivity: The Floating Action Button is interactive and responds to user inputs such as taps. You can attach callback functions to handle these interactions using the onPressed property. This function gets executed when the button is pressed, allowing you to define the action that should occur.
Accessibility: It’s essential to consider accessibility when using the Floating Action Button. Ensure that the action triggered by the FAB is understandable and meaningful to all users. Also, make sure to provide alternative ways to access the functionality it represents for users who may not be able to interact with it directly.
Usage: While the Floating Action Button is commonly used for primary actions, it’s essential to use it judiciously. Avoid overloading it with too many actions, as it may lead to cluttered and confusing UI. Reserve it for the most critical and frequently used actions in your application.

Code Sample for The Floating Action 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(
        appBar: AppBar(
          title: Text('FAB Example'),
        ),
        body: Center(
          child: Text('Press the button below!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Add your action here
            print('FAB pressed!');
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.blue,
        ),
      ),
    );
  }
}