Flutter FloatingActionButton – Center Float

Center Align FloatingActionButton in Flutter

If you are using Scaffold, you may set floatingActionButtonLocation property to FloatingActionButtonLocation.centerFloat to center make the FloatingActionButton float in the center of the screen at bottom.

  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

Example 1: Float FloatingActionButton at Center

In this example Flutter Application, we shall float or center align the FloatingActionButton in the Scaffold.


import 'package:flutter/material.dart';

void main() {
    home: MyApp(),

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Flutter Tutorial - googleflutter.com"),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        child: Icon(Icons.settings_voice),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,


Align or Float the FloatingActionButton in the Center of Screen


In this Flutter Tutorial, we learned how to float the FloatingActionButton in the center of screen horizontally.

Desclaimer: We are not affiliated, associated, authorized, endorsed by, or in any way officially connected with the Google, Apple or Flutter, or any of its subsidiaries or its affiliates. The names Google, Apple and Flutter as well as related names, marks, emblems and images are registered trademarks of their respective owners. This site googleflutter.com covers tutorials related to Flutter developed by Google.