[英]Flutter change dialog background color
I was using dialogBackgroundColor
property still the color was not changing.我使用
dialogBackgroundColor
属性仍然颜色没有改变。 Can anyone tell me how to change the background color of the dialog?谁能告诉我如何更改对话框的背景颜色?
You can now use backgroundColor
property of AlertDialog
to change the color.您现在可以使用
AlertDialog
backgroundColor
属性来更改颜色。
AlertDialog(
backgroundColor: Colors.orange,
...
)
You can do that without using Builder
.您可以在不使用
Builder
情况下做到这一点。
Here is the example.这是示例。
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return Theme(
data: Theme.of(context).copyWith(dialogBackgroundColor: Colors.orange),
child: AlertDialog(
title: Text("Dialog Title"),
),
);
},
);
},
child: Text("Show dialog"),
);
}
You need to wrap your Dialog
in a Builder
like this.您需要像这样将
Dialog
包装在Builder
。 After that dialogBackgroundColor
will have an effect.之后,
dialogBackgroundColor
将产生效果。
Theme(
data: ThemeData(dialogBackgroundColor: Colors.orange),
child: Builder(
builder: (context) {
return RaisedButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Dialog title"),
);
},
);
},
child: Text("Show dialog"),
);
},
),
)
This code block work's for me.
这个代码块对我有用。 Here you can change color from this line data:Theme.of(context).copyWith(dialogBackgroundColor: Colors.white)
在这里,您可以从此行数据更改颜色:Theme.of(context).copyWith(dialogBackgroundColor: Colors.white)
void openDialog(BuildContext context) {
showDialog(
context: context,
barrierDismissible: true,
builder: (context) {
return Theme(
data:
Theme.of(context).copyWith(dialogBackgroundColor: Colors.white),
child: new SimpleDialog(
title: new Text("Title Here...."),
children: <Widget>[
new SimpleDialogOption(
child: Text('Demo Text One'),
onPressed: () {
Navigator.pop(context);
},
),
new SimpleDialogOption(
child: Text('Demo Text Two'),
onPressed: () {
Navigator.pop(context);
},
),
new SimpleDialogOption(
child: Text('Close'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
);
},
);
}
You can now use backgroundColor property of AlertDialog to change the color.您现在可以使用 AlertDialog 的 backgroundColor 属性来更改颜色。
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
backgroundColor: Colors.green,
content: Container(...)
),
}),
showDialog(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('Are you sure?'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text("Another question will be passed"),
],
),
),
actions: <Widget>[
TextButton(
child: Text('Yes'),
onPressed: () {
setState(() {
if (sayac > 0 && sayac < nqSize - 1) {
sayac++;
_character=SingingCharacter.qsN;
}
});
Navigator.of(context).pop();
},
),
TextButton(
child: Text('No'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
// elevation: 20.0,
backgroundColor: Colors.redAccent,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(25.0),
),
);
},
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.