Flutter - FloatingActionButton - GeeksforGeeks

17 Nov, 2020
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.
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})









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:
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:
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
ankit_kumar_
android
Flutter
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter - Checkbox Widget
Flutter - Flexible Widget
Flutter - BoxShadow Widget
Flutter - DropDownButton Widget
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Checkbox Widget
Flutter - Flexible Widget