Flutter - FloatingActionButton in the center

rafaelcb21 picture rafaelcb21 · Jun 23, 2017 · Viewed 77.6k times · Source

Is it possible to make the FloatingActionButton in the centre instead of the right side?

import 'package:flutter/material.dart';
import 'number.dart';
import 'keyboard.dart';

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    body: new Column(
      children: <Widget>[
        new Number(),
        new Keyboard(),
      ],
    ),
    floatingActionButton: new FloatingActionButton(
      elevation: 0.0,
      child: new Icon(Icons.check),
      backgroundColor: new Color(0xFFE57373),
      onPressed: (){}
    )
  );
}

enter image description here

Answer

Brian Kung picture Brian Kung · Apr 10, 2018

I don't know if this was added since this question was first answered, but there's now floatingActionButtonLocation property on the Scaffold class.

It would work like this in your original question:

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    // ...

    floatingActionButton: new FloatingActionButton(
      // ...FloatingActionButton properties...
    ),

    // Here's the new attribute:

    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  );
}

Also see the documentation: