How to use FloatingActionButton in Flutter
The FloatingActionButton (FAB) is a widely used widget in Flutter that represents a prominent action button in the user interface. It typically floats above the content and provides an accessible way to trigger a primary action in our app. In this answer, we will walk through the steps to use the FloatingActionButton widget in our Flutter application.
Constructor and parameters
The FloatingActionButton widget provides a constructor with various parameters to customize its behavior and layout.
const 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,
bool? enableFeedback
})
Let's take a closer look at each parameter and its purpose:
key: An optional key that uniquely identifies theSafeAreawidget.child: The widget displayed within theFloatingActionButton. It is typically an Icon or an Icon combined with a Text widget.tooltip: The text that appears as a tooltip when the user long-presses the button.foregroundColor: The color of the icon inside the button.backgroundColor: The background color of the button.focusColor: The color when the button is focused.hoverColor: The color when the button is hovered.splashColor: The color of the splash effect that appears when the button is tapped.heroTag: A tag used to identify the hero animation when theFloatingActionButtontransitions between screens.elevation: Thez-coordinateat which the button will be placed relative to its parent. It controls the shadow effect.focusElevation: The elevation of the button when it is focused.hoverElevation: The elevation of the button when it hovers.highlightElevation: The elevation of the button when it is pressed.disabledElevation: The elevation of the button when it is disabled.onPressed: The callback function that will be executed when the button is pressed.mouseCursor: The cursor to use when the mouse pointer is over the button.mini: Set to true to make the button a mini size.shape: The shape of the button. For example, we can use RoundedRectangleBorder to make the button rectangular with rounded corners.clipBehavior: How to clip the FloatingActionButton's content. The default value isClip.none, which means no clipping.focusNode: An optionalFocusNodethat can be used to control the focus behavior of the button.autofocus: Set to true to make the button receive focus when the widget tree is created.materialTapTargetSize: The size of the tap target. By default, it usesMaterialTapTargetSize.padded.isExtended: Set to true to extend the button horizontally to fill the available width.enableFeedback: Set to false to disable haptic feedback when the button is pressed.
Importing necessary libraries
Before using the SafeArea widget, make sure to import the required libraries in our Dart file:
import 'package:flutter/material.dart';
Implementing the FloatingActionButton
The FloatingActionButton typically resides within the Scaffold widget, which acts as a container for our app's basic structure, including the app bar, body, and floating action button.
Scaffold(appBar: AppBar(title: Text('Educaitve Answer'),),floatingActionButton: FloatingActionButton(onPressed: () {}, // Implement function here.child: Icon(Icons.add),),);
After running the above code, we can see the following output, where we have created a FloatingActionButton at the bottom right corner:
Customizing the FloatingActionButton
The FloatingActionButton can be customized to match the design and functionality of our app.
floatingActionButton: FloatingActionButton(onPressed: () {// Add your action here},child: Icon(Icons.edit),tooltip: 'Edit',backgroundColor: Colors.blue,foregroundColor: Colors.white,hoverColor: Colors.red,),
After running the above code, we can see the following output, where we have created a FloatingActionButton at the bottom right corner with a tooltip and a hover color:
Change the location of the button
By default, the FloatingActionButton is at the bottom right of the screen. However, we can change its position by using the floatingActionButtonLocation property of the Scaffold widget. It accepts different values, each representing a specific position on the screen, such as:
FloatingActionButtonLocation.endFloat: Aligns the button to the bottom end of the screen (default).FloatingActionButtonLocation.centerFloat: Aligns the button to the bottom center of the screen.FloatingActionButtonLocation.centerDocked: Aligns the button to the bottom center of the screen, but the bottom app bar does not cover the button.FloatingActionButtonLocation.endDocked: Aligns the button to the bottom end of the screen, but the bottom app bar does not cover the button.
Scaffold(appBar: AppBar(title: Text('Educative Answer'),),bottomNavigationBar: BottomNavigationBar(currentIndex: 0,onTap: (index) {},items: [BottomNavigationBarItem(icon: Icon(Icons.home),label: 'Home',),BottomNavigationBarItem(icon: Icon(Icons.search),label: 'Search',),BottomNavigationBarItem(icon: Icon(Icons.person),label: 'Profile',),],),floatingActionButton: FloatingActionButton(onPressed: () {// Add your action here},child: Icon(Icons.add),tooltip: 'Add',),floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,);
After running the above code, we can see the following output, where we have created a FloatingActionButton at the bottom center floating on the bottom navigation bar with a tooltip:
Code example
We get the following output by putting together the code explained above.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Educaitve Answer'),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
onTap: (index) {
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your action here
},
child: Icon(Icons.edit),
tooltip: 'Edit',
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
hoverColor: Colors.red,
),
),
);
}
}Conclusion
Using the FloatingActionButton in Flutter is a straightforward process. Following the steps outlined above, we can integrate a floating action button into our app, providing an easy way for users to trigger essential actions. Additionally, you can customize the button and change its position to best suit our app's design and functionality requirements.
