How to style AlertDialog Actions in Flutter
Don't add button in actions of AlertDialog. As you can see.
_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,
),
),
),
FlatButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
}),
FlatButton(
child: Text('Ok'),
onPressed: () {
_inputTextController.clear();
Navigator.of(context).pop();
})
],
),
);
},
);
}
}
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.
Move buttons to content is a good solution.
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Center(child: Text('Alert')),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: Text(
"message",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
child: Text('Yes'),
onPressed: () {
Navigator.of(context).pop();
}),
FlatButton(
child: Text('No'),
onPressed: () {
Navigator.of(context).pop();
})
])
],
),
);
});