FloatingActionButton

It is a quick action button that always sticks to one position floating on your screen while scrolling. You can put the most important task of your app into this button. 

To insert FloatingActionButton() into your app, you need Scaffold() widget.

Scaffold(
    floatingActionButton: FloatingActionButton( 
       child: Icon(Icons.add), //child widget inside this button
       onPressed: (){
          //task to execute when this button is pressed
        },
     ),
)

Constructor of FloatingActionButton() widget.

const 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}
) 

The properties of this constructor are explained below:

1. child - Widget

This property is used to put a widget below it in the tree. You can put Icons or text to represent the purpose of this button.

FloatingActionButton( 
    child: Icon(Icons.add), //child widget inside this button
)

2. tooltip - String

This property is used to show a small badge message to the user. 

FloatingActionButton( 
     tooltip: "Press to open link",
)

3. backgroundColor - Color

Pass color value to this property to change the background color of button.

FloatingActionButton( 
    backgroundColor: Colors.redAccent,
)

4. foregroudColor - Color

This property is used to change the icon and font color which are below this button widget tree.

FloatingActionButton( 
    foregroundColor: Colors.white,
)

5. elevation - double

Use this property to change the height of elevation, the more value you pass the more shadow will appear on the button.

FloatingActionButton( 
    elevation: 5.0
)

6. splashColor - Color

This property is used to change the splash color of the button. The splash will appear when you tap on the button.

FloatingActionButton( 
     splashColor: Colors.blueAccent,
)

7. onPressed - VoidCallback

This property is used to set function to the button. The code block inside this function will execute when button is pressed.

FloatingActionButton( 
    onPressed: (){
       //task to execute when this button is pressed
    },
)

Change the location of the Floating action button:

To change the location of the floating action button on the screen, use floatingActionButtonLocation property of Scaffold() widget.

Scaffold(
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat
)

Flutter App Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController( //controller for TabBar
      length: 2, //lenght of tabs in TabBar
      child: MaterialApp(
         home: HomePage(),
      )
    );
  }
}

class HomePage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: FloatingActionButton( 
          backgroundColor: Colors.redAccent,
          foregroundColor: Colors.white,
          elevation: 5.0,
          tooltip: "Press to open link",
          child: Icon(Icons.add), //child widget inside this button
          splashColor: Colors.blueAccent,
          onPressed: (){
            print("Button is pressed.");
            //task to execute when this button is pressed
          },
        ),
        backgroundColor: Colors.blue[100], //background color of scaffold
        appBar: AppBar(
            title:Text("Floating Action Button"), //title of app
            backgroundColor: Colors.redAccent, //background color of app bar
        ),
  
        body: Center( //content body on scaffold
            child: Text("Floating Action Button Example"),
        )
     );
  }
}

Output:

Default Floating button with icon child	Floating button after changing background to red	Floating button after changing location to button center