FloatingActionButton
Learn to use floating action button widget on your app. It is very important for quick access functionality.
It is a quick action button that always sticks to one position floating on your screen while scrolling. You can put the most important task of your app into this button.
To insert FloatingActionButton() into your app, you need Scaffold() widget.
Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add), //child widget inside this button
onPressed: (){
//task to execute when this button is pressed
},
),
)
Constructor of FloatingActionButton() widget.
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}
)
The properties of this constructor are explained below:
1. child - Widget
This property is used to put a widget below it in the tree. You can put Icons or text to represent the purpose of this button.
FloatingActionButton(
child: Icon(Icons.add), //child widget inside this button
)
2. tooltip - String
This property is used to show a small badge message to the user.
FloatingActionButton(
tooltip: "Press to open link",
)
3. backgroundColor - Color
Pass color value to this property to change the background color of button.
FloatingActionButton(
backgroundColor: Colors.redAccent,
)
4. foregroudColor - Color
This property is used to change the icon and font color which are below this button widget tree.
FloatingActionButton(
foregroundColor: Colors.white,
)
5. elevation - double
Use this property to change the height of elevation, the more value you pass the more shadow will appear on the button.
FloatingActionButton(
elevation: 5.0
)
6. splashColor - Color
This property is used to change the splash color of the button. The splash will appear when you tap on the button.
FloatingActionButton(
splashColor: Colors.blueAccent,
)
7. onPressed - VoidCallback
This property is used to set function to the button. The code block inside this function will execute when button is pressed.
FloatingActionButton(
onPressed: (){
//task to execute when this button is pressed
},
)
Change the location of the Floating action button:
To change the location of the floating action button on the screen, use floatingActionButtonLocation
property of Scaffold(
) widget.
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat
)
Flutter App Example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return DefaultTabController( //controller for TabBar
length: 2, //lenght of tabs in TabBar
child: MaterialApp(
home: HomePage(),
)
);
}
}
class HomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.redAccent,
foregroundColor: Colors.white,
elevation: 5.0,
tooltip: "Press to open link",
child: Icon(Icons.add), //child widget inside this button
splashColor: Colors.blueAccent,
onPressed: (){
print("Button is pressed.");
//task to execute when this button is pressed
},
),
backgroundColor: Colors.blue[100], //background color of scaffold
appBar: AppBar(
title:Text("Floating Action Button"), //title of app
backgroundColor: Colors.redAccent, //background color of app bar
),
body: Center( //content body on scaffold
child: Text("Floating Action Button Example"),
)
);
}
}
Output:
Default Floating button with icon child | Floating button after changing background to red | Floating button after changing location to button center |