flutter – floatingactionbutton in the center

Flutter FloatingActionButton – Center Float

Center Align FloatingActionButton in Flutter

In the event that you are utilizing Scaffold, you may set floatingActionButtonLocation property to FloatingActionButtonLocation.centerFloat to focus make the FloatingActionButton drift in the focal point of the screen at base.

Scaffold(
  ...
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
)


Example 1: Float FloatingActionButton at Center

In this model Flutter Application, we will buoy or focus adjust 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.

Thanks for reading this article ❤
If I got something wrong, Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.

Leave a Comment