Flutter: How to make buttons of the dialog box centered?

Viewed 4558

I have a problem in my dialog box, the buttons won't get centered even though I already have

mainAxisAlignment: MainAxisAlignment.center, 
crossAxisAlignment: CrossAxisAlignment.center 

in it. My code:

actions: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width * 0.20,
                child: RaisedButton(
                  child: new Text(
                    'Save',
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Color(0xFF121A21),
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                  onPressed: () {
                    saveIssue();
                    Navigator.of(context).pop();
                  },
                ),
              ),
              SizedBox(
                width: MediaQuery.of(context).size.width * 0.01,
              ),
              Container(
                width: MediaQuery.of(context).size.width * 0.20,
                child: RaisedButton(
                  child: new Text(
                    'Cancel',
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Color(0xFF121A21),
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ),
              SizedBox(
                height: MediaQuery.of(context).size.height * 0.02,
              ),
            ],
          )
        ],                                                                                          

My UI:

Link for my UI

4 Answers

According to the source code, used ButtonBar to force the alignment, so If you want to change the alignment, you should wrap the AlertDialog with ButtonBarTheme.

class TestDialog extends StatelessWidget {
  const TestDialog({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ButtonBarTheme(
      data: ButtonBarThemeData(alignment: MainAxisAlignment.center),
      child: AlertDialog(
        content: Text("CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_CONTENT_"),
        actions: <Widget>[
          Row(
            mainAxisSize: MainAxisSize.max,
            //mainAxisAlignment: MainAxisAlignment.center,
            //crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width * 0.20,
                child: RaisedButton(
                  child: new Text(
                    'Save',
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Color(0xFF121A21),
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ),
              SizedBox(
                width: MediaQuery.of(context).size.width * 0.01,
              ),
              Container(
                width: MediaQuery.of(context).size.width * 0.20,
                child: RaisedButton(
                  child: new Text(
                    'Cancel',
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Color(0xFF121A21),
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(30.0),
                  ),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                ),
              ),
              SizedBox(
                height: MediaQuery.of(context).size.height * 0.02,
              ),
            ],
          )
        ],
      )
    );
  }
}

Result:

enter image description here

You don't need to use the Row widget inside actions. Just give the buttons to the actions(which is already a list type) and just use flutter's new actionsAlignment property in AlertDialog class.

    AlertDialog(
  actions: [],
  actionsAlignment: MainAxisAlignment.spaceBetween
)
  1. you can use Expanded to take free space.

     actions: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            width: MediaQuery.of(context).size.width * 0.20,
            child: RaisedButton(
              child: new Text(
                'Save',
                style: TextStyle(color: Colors.white),
              ),
              color: Color(0xFF121A21),
              shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(30.0),
              ),
              onPressed: () {
                saveIssue();
                Navigator.of(context).pop();
              },
            ),
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.01,
          ),
          Expanded(
            width: MediaQuery.of(context).size.width * 0.20,
            child: RaisedButton(
              child: new Text(
                'Cancel',
                style: TextStyle(color: Colors.white),
              ),
              color: Color(0xFF121A21),
              shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(30.0),
              ),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ),
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.02,
          ),
        ],
      )
    ], 
    

change it

actionsOverflowAlignment: OverflowBarAlignment.center,

in AlertDialog's attributes

Related