Flutter FloatingActionButton

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.

Scaffold(
  ...
  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.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

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

class _MyAppState extends State<MyApp> {

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

Screenshot

Align or Float the FloatingActionButton in the Center of Screen

Summary

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