颤动中带有圆角的警报对话框 [英] Alert Dialog with Rounded corners in flutter
问题描述
我正在尝试在 Flutter 中创建一个带有圆角的警报对话框，如下图所示.还在这里添加我的代码，但我的输出与预期的完全不同.任何人，请帮助我.
预期的警报对话框
我的代码在这里.
void _showAlert() {警报对话框对话框 = 新警报对话框(内容:新容器(宽度:260.0，高度:230.0，装饰:新盒子装饰(形状:BoxShape.rectangle，颜色:常量颜色(0xFFFFFF)，边界半径:新边界半径.all(新半径.圆形(32.0))，),孩子:新列(crossAxisAlignment:CrossAxisAlignment.stretch，孩子们:<小部件>[//对话框顶部新扩展(孩子:新行(孩子们:<小部件>[新容器(//padding: new EdgeInsets.all(10.0),装饰:新盒子装饰(颜色:颜色.白色，),孩子:新文本('速度'，样式:文本样式(颜色:颜色.黑色，字体大小:18.0，fontFamily: 'helvetica_neue_light',),textAlign: TextAlign.center,),),],),),//对话中心新扩展(孩子:新容器(孩子:新的文本字段(装饰:新的输入装饰(边框:InputBorder.none，填充:假，contentPadding: 新 EdgeInsets.only(左:10.0，上:10.0，下:10.0，右:10.0)，hintText: '添加评论',提示样式:新文本样式(颜色:Colors.grey.shade500，字体大小:12.0，fontFamily: 'helvetica_neue_light',),),)),弹性:2，),//对话框底部新扩展(孩子:新容器(填充:新 EdgeInsets.all(16.0)，装饰:新盒子装饰(颜色:常量颜色(0xFF33b17c)，),孩子:新文本('评价产品'，样式:文本样式(颜色:颜色.白色，字体大小:18.0，fontFamily: 'helvetica_neue_light',),textAlign: TextAlign.center,),),),],),),);showDialog(上下文:上下文，子:对话框)；}}我从上面的代码得到的输出是.
您设置 BoxDecoration 的容器位于警报对话框下的小部件树中.这意味着您只在对话框的填充内设置了一个框.您需要创建一个自定义 AlertDialog/showDialog 并在那里设置半径.在自定义小部件中，您还可以添加按钮以及您需要在该填充之外工作的所有内容.
当您在项目中包含 customShowDialog.dart 文件时 (
尽管 Flutter 最近引入了 shape 属性，它可以帮助您通过设置 ShapeBorder 与例如
形状:RoundedRectangleBorder(边界半径:边界半径.all(半径.圆形(20.0))),您仍然需要为某些自定义快速添加自定义小部件，例如自定义填充，如上所述.
I am trying to create an alert dialog with rounded corners in Flutter same as below screenshot. also add my code here, but my output is exactly different from the expected one. anyone, please help me.
Expected Alert Dialog
my code is here.
void _showAlert() {
AlertDialog dialog = new AlertDialog(
content: new Container(
width: 260.0,
height: 230.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius: new BorderRadius.all(new Radius.circular(32.0)),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// dialog top
new Expanded(
child: new Row(
children: <Widget>[
new Container(
// padding: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(
color: Colors.white,
),
child: new Text(
'Rate',
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
],
),
),
// dialog centre
new Expanded(
child: new Container(
child: new TextField(
decoration: new InputDecoration(
border: InputBorder.none,
filled: false,
contentPadding: new EdgeInsets.only(
left: 10.0, top: 10.0, bottom: 10.0, right: 10.0),
hintText: ' add review',
hintStyle: new TextStyle(
color: Colors.grey.shade500,
fontSize: 12.0,
fontFamily: 'helvetica_neue_light',
),
),
)),
flex: 2,
),
// dialog bottom
new Expanded(
child: new Container(
padding: new EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: const Color(0xFF33b17c),
),
child: new Text(
'Rate product',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
showDialog(context: context, child: dialog);
}
}
The output I get from the above code is.
The container where you set the BoxDecoration is in the widget tree under the alert dialog. Which means you are setting just a box within the padding of your Dialog. You need to create a custom AlertDialog/showDialog and set the radius there. In the custom widget you also add the button and everything where you need to work beyond that padding.
When you include the customShowDialog.dart file in your project (gist.github.com) where you can edit the radius here borderRadius: BorderRadius.all(Radius.circular(20.0)) and call it like this:
return new CustomAlertDialog(
content: new Container(
width: 260.0,
height: 230.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius:
new BorderRadius.all(new Radius.circular(32.0)),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// dialog top
new Expanded(
child: new Row(
children: <Widget>[
new Container(
// padding: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(
color: Colors.white,
),
child: new Text(
'Rate',
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
],
),
),
// dialog centre
new Expanded(
child: new Container(
child: new TextField(
decoration: new InputDecoration(
border: InputBorder.none,
filled: false,
contentPadding: new EdgeInsets.only(
left: 10.0,
top: 10.0,
bottom: 10.0,
right: 10.0),
hintText: ' add review',
hintStyle: new TextStyle(
color: Colors.grey.shade500,
fontSize: 12.0,
fontFamily: 'helvetica_neue_light',
),
),
)),
flex: 2,
),
// dialog bottom
new Expanded(
child: new Container(
padding: new EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: const Color(0xFF33b17c),
),
child: new Text(
'Rate product',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
});
You will get something like this:
EDIT:
Although Flutter lately introduced the shape property which would help you with the rounded corners by setting a ShapeBorder with e.g.
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))
),
you would still need to quickly add a custom widget for some customizations, like custom padding, as stated above.
这篇关于颤动中带有圆角的警报对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
