How to Change the Position of FloatingActionButton in Flutter

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(),
        ),
      ),
    );
  }
}