dart - How to style AlertDialog Actions in Flutter

Question

I use this method to show a AlertDialog:

_onSubmit(message) {
    if (message.isNotEmpty) {
      showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Center(child: Text('Alert')),
            content: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children : <Widget>[
                Expanded(
                  child: Text(
                    message,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: Colors.red,

                    ),
                  ),
                )
              ],
            ),
            actions: <Widget>[
              FlatButton(
                  child: Text('Cancel'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  }),
              FlatButton(
                  child: Text('Ok'),
                  onPressed: () {
                    _inputTextController.clear();
                    Navigator.of(context).pop();
                  })
            ],
          );
        },
      );
    }
  }

Everything is working but the buttons are aligned in right as shown on picture below:

I want to style some how the buttons, for example one on start other on end. I searched in docs but only found how to make them "Stacked full-width buttons". Any ideas how to style the buttons?

Answer 1

Customize widget

Edit the the widget itself: Under the AlertDialog there is a ButtonBar widget where you can use alignment: MainAxisAlignment.spaceBetween to align the buttons correctly. See this answer for an example of a custom AlertDialog widget.

Own button row

You could also remove the buttons under actions and add an own custom Row with RaisedButtons in it, somehow like this:

Row (
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
        RaisedButton(), // button 1
        RaisedButton(), // button 2
    ]
)

In your case you could add a Column around the Row in content and in there add your existing Row and the modified one you created from the above example.