Open In App

Flutter – FloatingActionButton

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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




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++;
          });
        },
      ),
    );
  }
}


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



Last Updated : 17 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads