Reputation: 679
I am trying to use a alert dialog which has the button at the center, but the button keeps on displaying on the right side of the alert box.
Here is the code for alert box:
class Dialog extends StatelessWidget {
String title;
String content;
Dialog(this.title, this.content);
TextStyle textStyle = TextStyle (color: Colors.black);
@override
Widget build(BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: AlertDialog(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10)),
),
title: new Text(title,style: textStyle,),
content: new Text(content, style: textStyle,),
actions: <Widget>[
Align(
alignment: Alignment.center,
child: RaisedButton(
color: Colors.lightBlue[900],
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},
),
)
],
));
}
}
Can someone help me getting this button at the center please?
Upvotes: 0
Views: 878
Reputation: 1451
You can also set padding right and left of button like below.
class Dialog extends StatelessWidget {
TextStyle textStyle = TextStyle(color: Colors.black);
@override
Widget build(BuildContext context) {
return BackdropFilter(
filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
child: AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
title: new Text(
"title",
style: textStyle,
),
content: new Text(
"content",
style: textStyle,
),
actionsPadding: EdgeInsets.fromLTRB(100, 0, 100, 0),
actions: <Widget>[
RaisedButton(
color: Colors.lightBlue[900],
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},
)
],
));
}
}
Upvotes: 0
Reputation: 1588
refactor your actions
like this
actions: <Widget>[
Container(
width: double.maxFinite,
alignment: Alignment.center,
child: RaisedButton(
color: Colors.lightBlue[900],
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},
),
)
],
Upvotes: 1