how to center FloatingActionButton inside the persistentFooterButtons

Question

Can someone explain to me how can i center the FloatingActionButton inside the persistentFooterButtons. im missing something here.

  List _footer() {
return <Widget>[
  new ButtonBar(
    children: <Widget>[
      new Container(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new FloatingActionButton(
              backgroundColor: Colors.redAccent,
              onPressed: () => {},
            ),
          ],
        ),
      )
    ],
  )
];}

===

 @override  Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text("Question"),
  ),
  body: _body(),
  persistentFooterButtons: _footer(),
);  }

Can you please share the image what exactly you want to achieve? — Dhrumil Shah - dhuma1981, Jun 08 '18 at 07:22

score 4 · Accepted Answer · answered Jun 08 '18 at 08:30

I looked at the code of Scaffold, below is how persistentFooterButtons created:

new Container(
  decoration: new BoxDecoration(
    border: new Border(
      top: Divider.createBorderSide(context, width: 1.0),
    ),
  ),
  child: new SafeArea(
    child: new ButtonTheme.bar(
      child: new SafeArea(
        top: false,
        child: new ButtonBar(
          children: widget.persistentFooterButtons
        ),
      ),
    ),
  ),
)

You can see here, your buttons are wrapped by a ButtonBar. Now let's look at the ButtonBar code below, the DEFAULT alignment is MainAxisAlignment.end. I guess this follows the Material guidelines.

const ButtonBar({
  Key key,
  this.alignment: MainAxisAlignment.end,
  this.mainAxisSize: MainAxisSize.max,
  this.children: const <Widget>[],
}) : super(key: key);

The Flutter framework is being updated, but till today (2018 June 08th), you can not put the buttons to the center using persistentFooterButtons.

Solution: I suggest you follow my answer here to put your buttons at the center-bottom of the screen.

score 4 · Answer 2 · answered Apr 01 '20 at 02:37

I found an easy solution is to wrap the FloatingActionButton in a sized box that is the same width as the screen.

      persistentFooterButtons: <Widget>[
        SizedBox(
          width: MediaQuery.of(context).size.width,
          child: FloatingActionButton(

            onPressed: () {
              print('Close pressed');
            },
            child: Text('Close'),
          )
        )
      ],

score 1 · Answer 3 · answered Jan 05 '20 at 13:51

I have the same problem. I achieved the desired result with this:

persistentFooterButtons: [
        Container(
          width: MediaQuery.of(context).copyWith().size.width,
          child: Row(
            children: [
              Expanded(
                child: FlatButton(
                  child: Text('Your centered button'),
                  onPressed: (){},
                ),
              )
            ],
          ),
        )
      ]

I've used a flatbutton just as example but it works as well with floatinActionButtons.

Hope it helps

score 1 · Answer 4 · answered Apr 06 '21 at 12:38

Found yet another solution. MaterialTheme (theme_data.dart) has buttonBarTheme attribute. You can modify it like following:

var myTheme = ThemeData(
    buttonBarTheme: ButtonBarThemeData(
            alignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
    ),
)

And specify it in your MaterialApp widget:

MaterialApp(theme: myTheme)

score 1 · Answer 5 · answered Jun 16 '21 at 21:07

For anyone trying something similar, but instead of a FloatingActionButton, a set of, let's say two ElevatedButtons, you can center them like this:

...
persistentFooterButtons: [
  Center(
    child: Column(
      children: [
        ElevatedButton(), //Button 1
        SizedBox(),
        ElevatedButton(), //Button 2
      ],
    ),
  ),
],
...

In hope that anyone might find it useful in the future.

rmalviya · Answer 6 · 2019-09-12T13:19:51.367

floatingActionButton can be aligned or positioned by making use of floatingActionButtonLocation property, however it is not useful for button placed inside persistentFooterButtons.

The persistentFooterButtons are wrapped inside ButtonBar and we don't have any way to override the ButtonBar default alignment of MainAxisAlignment.end for persistentFooterButtons.

Flutter team could have provided persistentFooterButtonsAlignment property but without it, one can achieve similar layout using following bottomNavigationBar hack, if it is not already being used for something else.

bottomNavigationBar: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
        Divider(
            height: 0,
        ),
        Padding(
            padding: const EdgeInsets.all(8.0),
            child: FlatButton(
                child: Text('Button'),
                color: Theme.of(context).primaryColor,
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
                textColor: Theme.of(context).colorScheme.background,
                onPressed: () {},
            ),
        ),
    ],
),

how to center FloatingActionButton inside the persistentFooterButtons

6 Answers6