FloatingActionButton Class in Flutter Material Library with Example
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' ,
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:
Last Updated :
29 Jul, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...