FloatingActionButton Class in Flutter Material Library with Example
Last Updated :
29 Jul, 2022
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
Dart
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:
Similar Reads
FlatButton Class in Flutter Material Library with Example
Flutter FlatButton Class has been officially deprecated and should not be used. We can use TextButton class instead to achieve the same results. In the example below we have code that uses the TextButton class to achieve the same results as that of its deprecated counterpart (i.e. FlatButton). FlatB
5 min read
TextButton Class in Flutter Material Library with Examples
Text Button Class in Flutter is a material component button widgets with no border by default. It is just a regular button with some text written as the label. TextButton class is a replacement for the deprecated FlatButton class. It is undeprecated and performs all the functions of a FlatButton. To
4 min read
Raised Button Class in Flutter Material Library with Example
Raised button class comes with a slight elevation in its structure on tapping by the user. They have several properties like text color, shape, padding, button color, etc. These are rectangular in shape by default which cannot be altered and have UI along their z-axis. It is a deprecated class, and
4 min read
IconButton Class in Flutter with Example
The most different button class provided in flutter is the IconButton Class. In this tutorial, we will walk you through the implementation and properties of the IconButton class for flutter in detail. An icon button allows users to take actions like searching, navigation, adding, etc, by simply pres
4 min read
Scaffold class in Flutter with Examples
The Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen .The class Hierarchy is as follows:Object â³ Diagnosticable â³ Diagnosticable Tree â³ Widget â³ StateFul Widget â³ ScaffoldThe constructor of the
8 min read
Flutter - FloatingActionButton
A FloatingActionButton 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.ConstructorFloatingActionButton FloatingActionButton({ Key? key, Widget? child, String?
4 min read
Flutter - Social Media Authentication Buttons
Customizing an application for a better user experience requires data storage of each individual user based on their preferences and interests. But profiling each and every user can be tedious. Â This is where social media authentication comes into play. These authentication systems not only reduce t
3 min read
Flutter - Working with Material Button
Buttons are material components that provide the user a single tap facility for taking actions, making choices, submitting forms, saving data, opening a new page, etc. Buttons are triggered when the user taps on them. They are the most commonly used feature provided in almost all Flutter apps. For u
4 min read
Flutter - Creating Dialog in using GetX Library
When we want to show anything in the form of the dialog then we can create this Dialog using the GetX library in Flutter. When we normally create a dialog in flutter then it uses context and builder to create a Dialog. This is not a good practice for a developer to create Dialogs using contexts and
3 min read
Flutter - Remove Arrow Button in the AppBar
We can remove the Arrow button in the AppBar by various methods, but in this article, we will cover one of the following methods. Basically this arrow appears when we navigate to the new screen so that we can get back to the previous screen. But if we don't want this arrow button, then we can use th
4 min read