top of page

How to Change the Position of FloatingActionButton in Flutter

Updated: Nov 27, 2022

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






Related Posts

See All

The image sharing apps, shopping apps, etc. have image zoom functionality required to see the image in detail. Today, we will learn to implement the same with the help of a widget, InteractiveViewer.

bottom of page