How to center AlertDialog FlatButton in Flutter

Question

How can I style the FlatButton to be aligned on center without having to create a custom AlertDialog?

AlertDialog(
      title: Text(
        'Alert Dialog'.toUpperCase(),
        textAlign: TextAlign.center,
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 28.0),
      ),
      content: SingleChildScrollView(
        child: ListBody(
          children: <Widget>[
            Text('Scrollable AlertDialog' * 100),
          ],
        ),
      ),
      actions: <Widget>[
        FlatButton(
          child: Text(
            'Accept'.toUpperCase(),
          ),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );

This is how it looks like

I tried removing 'actions' and adding the FlatButton inside a row in 'content', but the scroll stopped working and the content overflowed.

content: Column(
        children: <Widget>[
          SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text('Scrollable AlertDialog.' * 50),
              ],
            ),
          ),
          Row(
            children: <Widget>[
              FlatButton(
                child: Text(
                  'Accept'.toUpperCase(),
                  style: TextStyle(
                      color: Theme.of(context).primaryColor,
                      fontWeight: FontWeight.bold,
                      fontSize: 16.0
                  ),
                ),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        ],
      ),

Answer 1

Google's material design guidelines don't want you to place that in center, which is why Flutter team used ButtonBar for actions and you have no control over ButtonBar's alignment inside actions property, so if you really want to center your single button, there are 2 simple workarounds:

1. Make changes in source code, in dialog.dart's AlertDialog's build method, you'll see a ButtonBar, widget, add alignment to it.

   ButtonBar(
     alignment: MainAxisAlignment.center, // add this line 
     // ...
   ) 
   

2. You can use dummy widgets like SizedBox and provide some width to it.

   actions: [
     SizedBox(width: space),
     FlatButton(
       onPressed: () {},
       child: Text('Button'),
     ),
     SizedBox(width: space),
   ]
   

---

Screenshot:

Answer 2

Try to play around with actionsPadding which is one of the property of AlertDialog.

final horizontalPadding=50;

horizontal padding is the one that is transparent to the left and right of the dialog.

actionsPadding: EdgeInsets.only(right: MediaQuery.of(context).size.width/2-horizontalPadding*2),

Also, go through How to style AlertDialog Actions in Flutter . You can change and play around within the library as mentioned here. But, this may not work for your colleagues who are sharing the git repo. They will have to update their libraries as well in their local machines.

Answer 3

    actions: <Widget>[
      Align(
        alignment: Alignment.center,
        child: ElevatedButton(
            onPressed: () {
              //your logic
              Navigator.pop(context);
             },
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('Close'),
            ),
          ),
      ),
    ],

Answer 4

Just use actionsAlignment property in AlertDialog Widget.

AlertDialog(
  actions: ...,
  actionsAlignment: MainAxisAlignment.spaceBetween
)