Open In App

FloatingActionButton Class in Flutter Material Library with Example

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 29 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads