FloatingActionButton Class in Flutter Material Library with Example

The Floating Action Button is the most unique type of button widget provided in flutter. It is a widget that floats on the screen over other widgets. It appears as a circular icon on the screen with an icon in its center as its child. It is by default placed at the bottom-right corner of the screen. To be able to use a floating action button in your application use the floatingActionButton provided in the Scaffold properties. 

Constructor

FloatingActionButton(
    {Key key, 
    Widget child, 
    String tooltip, 
    Color foregroundColor, 
    Color backgroundColor, 
    Color focusColor, 
    Color hoverColor, 
    Color splashColor, 
    Object heroTag: const _DefaultHeroTag(), 
    double elevation, 
    double focusElevation, 
    double hoverElevation, 
    double highlightElevation, 
    double disabledElevation, 
    @required VoidCallback onPressed, 
    MouseCursor mouseCursor, 
    bool mini: false, 
    ShapeBorder shape, 
    Clip clipBehavior: Clip.none, 
    FocusNode focusNode, 
    bool autofocus: false, 
    MaterialTapTargetSize materialTapTargetSize, 
    bool isExtended: false}
)

There are three categories of a floating action button namely:

Regular floating action button 

FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.black,
        onPressed: () {},
        child: Icon(Icons.add),
      )

Output:

Mini floating action button

FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.black,
        mini: true,
        onPressed: () {},
        child: Icon(Icons.add),
      )

Output:

Extended floating action button

FloatingActionButton.extended(
          backgroundColor: Colors.green,
          foregroundColor: Colors.black,
          onPressed: () {
            // Respond to button press
          },
          icon: Icon(Icons.add),
          label: Text('Floating Action Button'),
        )

Output:

Properties

• autofocus: gives a boolean value corresponding to the initial focus of the button.
• backgroundColor: background color of button.
• clipBehaviour: decides whether the content is clipped or not.
• focusNode: represents the focus node of the widget
• ButtonStyle style: decides the styling of the buttonfocusColor.
• focusElevtion: It decided the location of the button on the z-axis to place the button at the time of input focus.
• focusNode: It provides an additional focus node for the button.
• foregroundColor: It controls the default color of the text and icon inside the button.
• mini: it controls the size of the button
• mouseCursor:  controls the cursor for the mouse pointer when it interacts with the button.
• onPressed: callback function.
• splashColor: splash color of FloatingActionButton.
• shape: the shape of the button.
• onLongPress: the action to be executed when the button is long pressed by the user
• enabled: gives a boolean value for the activity of the button
• hashcode: decides the hashcode of the button
• Key: Controls how one widget replaces another widget in the tree.
• onFocusChanged: a method to be executed on changing the focus of the button
• onHover: actin to be executed when the user hovers the button

Methods

• createElement(): create a StatefulElement to manage the button’s location in the widget tree.
• build(BuildContext context): Describes the part of the user interface.
• debugDescribeChildren(): Returns a list of DiagnosticsNode objects describing this node’s children
• debugFillProperties(): Add additional properties associated with the node
• noSuchMethod(): Invoked when a non-existent method or property is accessed
• toDiagnosticsNode(): Returns a debug representation of the object that is used by debugging tools 
• toString(): A string representation of this object
• toStringDeep(): Returns a string representation of this node and its descendants.
• toStringShallow(): Returns a one-line detailed description of the object
• toStringShort(): A short, textual description of this widget

Some of the commonly used properties are explained below as follows:

Color

1. backgroundColor

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

2. foregroundColor

FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        onPressed: (){},
        child: Icon(Icons.perm_camera_mic),
      )

3. splashColor

FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        splashColor: Colors.yellow,
        onPressed: (){},
        child: Icon(Icons.perm_camera_mic),
      )

4. hoverColor

FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        splashColor: Colors.yellow,
        hoverColor: Colors.red,
        onPressed: (){},
        child: Icon(Icons.perm_camera_mic),
      )

Output:

Elevation

disabledElevation

FloatingActionButton(
    onPressed: (){}
    disabledElevation: 0,
    child: Icon(Icons.perm_camera_mic),
),

focusElevation

FloatingActionButton(
    autofocus: true,
    focusElevation: 5,
    onPressed:(){},
    child: Icon(Icons.perm_camera_mic),
),

higlightElevation

FloatingActionButton(
    higlightElevation: 50,
    onPressed:(){},
    child: Icon(Icons.perm_camera_mic),
),

hoverElevation

FloatingActionButton(
    hoverElevation: 50,
    onPressed:(){},
    child: Icon(Icons.perm_camera_mic),
),

Output:

Hero Tag

FloatingActionButton(
  heroTag: 'GFG's Hero Tag',
),

Output:

Let’s understand the above examples closely

Example

Dart

import 'package:flutter/material.dart';

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

class HomeApp extends StatefulWidget {
  HomeApp({Key? key}) : super(key: key);

  @override
  State<HomeApp> createState() => _HomeAppState();
}

class _HomeAppState extends State<HomeApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            floatingActionButtonLocation:
                FloatingActionButtonLocation.centerFloat,
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
          child: FloatingActionButton(
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        splashColor: Colors.yellow,
        hoverColor: Colors.red,
        elevation: 10,
        heroTag: 'GFG Tag',
        // autofocus: true,
        // focusElevation: 5,
        // disabledElevation: 0,
        // higlightElevation: 50,
        // hoverElevation: 50,
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        child: Icon(Icons.perm_camera_mic),
      )),
    );
  }
}

class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);

  @override
  State<NewScreen> createState() => _NewScreenState();
}

class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();

  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: Center(
        child: Hero(tag: 'GFG Tag', child: Icon(Icons.save)),
      ),
    );
  }
}

Output: