How to center FloatingActionButton horizontally in Flutter?

Question

I want to center the FloatingActionButton horizontally on the screen but i don't seem to find any resource on how to do it.. This is my flutter code..

  void main() => runApp(MaterialApp(
  home: Home()
));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('My App'),
          centerTitle: true,
          backgroundColor: Colors.brown[700],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Add your onPressed code here!
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.brown[700],
        ),
        backgroundColor: Colors.white70
    );
  }
}

Try this please https://stackoverflow.com/questions/44713501/flutter-floatingactionbutton-in-the-center — Ajay Thakur, Apr 26 '20 at 16:46

score 2 · Accepted Answer · answered Apr 26 '20 at 16:53

2

Add this to your Scaffold:

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat

answered Apr 26 '20 at 16:53

Saman Salehi

1,995
1
22
36

@ZulfiqarAli Your Welcome... Also you can accept the answer if it helped you so others could use it too – Saman Salehi Apr 26 '20 at 16:58
This is the right answer! – Roger Gusmao Nov 02 '21 at 11:44

score 1 · Answer 2 · answered Apr 26 '20 at 16:59

1

Try this:

floatingActionButton: Center(
          child: FloatingActionButton(
            onPressed: () {
              // Add your onPressed code here!
            },
            child: Icon(Icons.add),
            backgroundColor: Colors.brown[700],
          ),
        ),

Result

answered Apr 26 '20 at 16:59

Sandeep Sharma

639
2
9
34

I knew how to do this but this way the `FloatingActionButton` gets centered both vertically and horizontally, i just wanted to center it horizontally downwards, `floatingActionButtonLocation` property worked for me. – Zulfiqar Ali Apr 26 '20 at 17:04

score -1 · Answer 3 · answered Apr 26 '20 at 16:49

So this is the floatingActionButton property of the Scaffold. You could put him into the body and then use a Center, or Column or Row widget to center it. Otherwise, just wrap the FloatingActionButton in a Row with mainaxisalignment: MainaxisAlignment.center. You can assign many widgets to the floatingActionButton property of the scaffold, not only FloatingActionButtons. Hope this helps.

Edit: it would then look like this:

Scaffold(
    floatingActionButton: Row(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
             FloatingActionButton()
          ],
    ),
),

Thank you, i will try this out too. – Zulfiqar Ali Apr 26 '20 at 17:01 — Zulfiqar Ali, Apr 26 '20 at 17:01

How to center FloatingActionButton horizontally in Flutter?

3 Answers3