Flutter – FloatingActionButton
Last Updated :
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.
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 {
@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(
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:
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...