FloatingActionButton in Flutter is a floating button that act as a quick action button that is placed above the screen. It is a circular shaped button and is useful for most used actions performed in an application.
The FloatingActionButton(FAB) can be placed in different position according to the choice of developer. So in this tutorial, we are going to learn to apply different position to the FAB.
Creating a FloatingActionButton
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
Scaffold property of floatingActionButtonLocation is used to change the position as follows:
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
The different positions are as follows using the FloatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked
FloatingActionButtonLocation.centerFloat
FloatingActionButtonLocation.centerTop
FloatingActionButtonLocation.endDocked
FloatingActionButtonLocation.endFloat
FloatingActionButtonLocation.endTop
FloatingActionButtonLocation.startDocked
FloatingActionButtonLocation.startFloat
FloatingActionButtonLocation.startTop
FloatingActionButtonLocation.miniCenterDocked
FloatingActionButtonLocation.miniCenterFloat
FloatingActionButtonLocation.miniCenterTop
FloatingActionButtonLocation.miniEndDocked
FloatingActionButtonLocation.miniEndFloat
FloatingActionButtonLocation.miniEndTop
FloatingActionButtonLocation.miniStartDocked
FloatingActionButtonLocation.miniStartFloat
FloatingActionButtonLocation.miniStartTop
Here are few examples
FloatingActionButtonLocation.centerDocked
class FloatingActionButtonTutorial extends StatelessWidget {
const FloatingActionButtonTutorial({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("FAB Position"),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: const Center(
child: Text(
"Welcome to AllAboutFlutter",
style: TextStyle(),
),
),
);
}
}

FloatingActionButtonLocation.endFloat
class FloatingActionButtonTutorial extends StatelessWidget {
const FloatingActionButtonTutorial({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("FAB Position"),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
body: const Center(
child: Text(
"Welcome to AllAboutFlutter",
style: TextStyle(),
),
),
);
}
}

FloatingActionButtonLocation.startFloat
class FloatingActionButtonTutorial extends StatelessWidget {
const FloatingActionButtonTutorial({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("FAB Position"),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
body: const Center(
child: Text(
"Welcome to AllAboutFlutter",
style: TextStyle(),
),
),
);
}
}
