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
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: