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.