Flutter - FloatingActionButton in the center

Question

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

import \'package:flutter/material.dart\';
import \'numb         


        

Answer 1

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:

• Scaffold class (search floatingActionButtonLocation): https://docs.flutter.io/flutter/material/Scaffold-class.html
• ...and the FloatingActionButtonLocation class: https://docs.flutter.io/flutter/material/FloatingActionButtonLocation-class.html

Answer 2

With the new flutter API you do that very easily just change the floatingActionButtonLocation property in the Scaffold to

FloatingActionButtonLocation.centerFloat

Example :

return new Scaffold(
  floatingActionButton: new FloatingActionButton(
    child: const Icon(Icons.add),
  ),
  floatingActionButtonLocation:    
      FloatingActionButtonLocation.centerFloat,
  bottomNavigationBar: new BottomAppBar(
    color: Colors.white,
    child: new Row(...),
  ),
);

Answer 3

By changing the logic to use crossAxisAlignment, the mainAxisAlignment and the Flexible the FloatingActionButton were centered at the bottom of the screen

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(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,       
      children: <Widget>[
        new Number(),
        new Keyboard(),
        new Flexible(
          child: new Container(
            padding: new EdgeInsets.only(bottom: 16.0),
            child: new FloatingActionButton(
              elevation: 0.0,
              child: new Icon(Icons.check),
              backgroundColor: new Color(0xFFE57373),
              onPressed: (){}
            )
          )         
        )
      ],
    ), 
  );
}

Answer 4

Align(
                      alignment: Alignment.center,
                      child: Container(
                        child: FloatingActionButton(
                          hoverColor: Colors.black,
                          elevation: 10,
                          onPressed: () {},
                          backgroundColor: Colors.pink,
                          child: Icon(Icons.add,),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.all(Radius.circular(20.0))),
                        ),
                      ),
                    ),

Here I used "Align" widget to make the FloatingActionButton center. You can see it here.