Flutter – FloatingActionButton

A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.

Constructor:

Syntax:
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})








Properties:

  • autofocus: This property takes in a boolean value as an object (final) to decide whether the button will be selected on the initial focus.
  • backgroundColor: background color of button.
  • child: the widget to be displayed.
  • clipBehaviour: This property takes clip enum as the object to decide content will be clipped or not.
  • disabledElevation: With a double value as the object this property decides the location of the button on the z-coordinate when the button is disabled.
  • elevation: Again this property takes in a double as the object. And it controls the location on the z-coordinate on which the button will be placed.
  • focusColor: This property decided the color to be filled in the button at the time of input focus. It takes in Color class as the object.
  • 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.
  • heorTag: This is to add a hero tag to one of the widgets in the button.
  • highlightElevation: This property controls the location of the z-axis on which to place the button while the user interacts with it.
  • hoverColor: This property holds the Color class as the object. It controls the color to be painted in the button at the event of hover.
  • hoverElevation: This property takes in a double value as the parameter to decide the height of the button on the z-axis on which the button should be place t the time of hover.
  • isExtended: This property takes in a boolean value as the object. If it is set to true then the button becomes an extended floating action button.
  • materialTapTargetSize: This property is there to control the tap target size of the button.
  • mini: it controls the size of the button.
  • mouseCursor: This property takes in MouseCursor property as the object. It 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.
  • We also have floatingActionButtonLocation to set the location of the button.

Example:

The main.dart file.

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FAB',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  int i=0;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlue[50],
      appBar: AppBar(
        title: Text("FloatingActionButton",),
        backgroundColor: Colors.green,
        actions: <Widget>[
          Text("GFG",textScaleFactor: 3,)
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
          Text("Floating action button pressed this many times"),
          Text("$i",textScaleFactor: 3,)
        ],),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        // isExtended: true,
        child: Icon(Icons.add),
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {
            i++;
          });
        },
      ),
    );
  }
}

chevron_right


Output:



If the properties are defined as below:

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {
            i++;
          });
        },
      ),






The following design changes can be observed:

floatingactionbutton

If the properties are defined as below:

floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {
            i++;
          });
        },
      ),






The following design changes can be observed:

If the properties are defined as below:

floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {
            i++;
          });
        },
      ),
      // counter i is 9 when we tapped the button 9 times






The following design changes can be observed:

floatingactionbutton with counter

Explanation:

  • Create a floating action button and give it a child.
  • Add callback onPressed function to increase the counter variable i.
  • Give background-color if needed.
  • Use floatingActionButtonLocation to set the location of the button.

Complete code is available on https://github.com/singhteekam/GFG-Articles/tree/master/floatingActionButton_in_flutter




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_