flutter 中带圆角的警报对话框
[英]Alert Dialog with Rounded corners in flutter
问题描述
I am trying to create an alert dialog with rounded corners in Flutter same as below screenshot.
我正在尝试在 Flutter 中创建一个带有圆角的警报对话框，如下图所示。 also add my code here, but my output is exactly different from the expected one.也在这里添加我的代码，但我的 output 与预期的完全不同。 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.我从上面的代码中得到的 output 是。
16 个解决方案
解决方案1
91 2018-12-02 10:49:40
Though i am late with the solution, but this may help others searching for it.虽然我迟到了解决方案，但这可能会帮助其他人寻找它。 The following code snippets details how it can be achieved.以下代码片段详细说明了如何实现它。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
Color myColor = Color(0xff00bfa5);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Rounde Alert Box",
home: Scaffold(
appBar: AppBar(
backgroundColor: myColor,
title: Text("Rounded Alert Box"),
),
body: RoundedAlertBox(),
),
);
}
}
class RoundedAlertBox extends StatefulWidget {
@override
_RoundedAlertBoxState createState() => _RoundedAlertBoxState();
}
class _RoundedAlertBoxState extends State<RoundedAlertBox> {
@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
onPressed: openAlertBox,
color: myColor,
child: Text(
"Open Alert Box",
style: TextStyle(color: Colors.white),
),
),
);
}
openAlertBox() {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
contentPadding: EdgeInsets.only(top: 10.0),
content: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"Rate",
style: TextStyle(fontSize: 24.0),
),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
],
),
],
),
SizedBox(
height: 5.0,
),
Divider(
color: Colors.grey,
height: 4.0,
),
Padding(
padding: EdgeInsets.only(left: 30.0, right: 30.0),
child: TextField(
decoration: InputDecoration(
hintText: "Add Review",
border: InputBorder.none,
),
maxLines: 8,
),
),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: myColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
bottomRight: Radius.circular(32.0)),
),
child: Text(
"Rate Product",
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
});
}
}
The output of the code snippet looks like this:代码片段的输出如下所示：
解决方案2
73 已采纳 2018-06-21 10:51:10
The container where you set the BoxDecoration is in the widget tree under the alert dialog.您设置 BoxDecoration 的容器位于警报对话框下的小部件树中。 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.您需要创建一个自定义 AlertDialog/showDialog 并在那里设置半径。 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:当您在项目 ( gist.github.com ) 中包含 customShowDialog.dart 文件时，您可以在此处编辑半径borderRadius: BorderRadius.all(Radius.circular(20.0))并像这样调用它：
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 theshape property which would help you with the rounded corners by setting aShapeBorder with eg尽管 Flutter 最近引入了shape 属性，它可以通过设置ShapeBorder来帮助您处理圆角，例如
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.如上所述，您仍然需要为某些自定义快速添加自定义小部件，例如自定义填充。
解决方案3
47 2018-12-14 13:10:13
This worked for me:这对我有用：
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
解决方案4
21 2019-02-15 07:13:21
Try this code :试试这个代码：
AlertDialog(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.all(Radius.circular(15))),
title: Text('Your title!'),
content: Container(),
);
解决方案5
10 2019-06-04 15:12:08
add添加
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))),
title: Text("Loading..."),
content: CircularProgressIndicator(),
);
},
);
解决方案6
8 2020-05-07 07:54:30
Try this code试试这个代码
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
title: Text('title'),
content: Text('content'),
);
},
);
解决方案7
6 2019-03-01 03:50:41
TRY ADD 尝试添加
shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)) );
解决方案8
4 2021-09-29 20:47:36
You can simply use shape property of AlertDialog您可以简单地使用 AlertDialog 的 shape 属性
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16)))
解决方案9
2 2022-04-04 04:06:09
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
这行代码将制作带有圆角的警报对话框。
解决方案10
2 2022-10-02 06:14:14
Try this code试试这个代码
Theme(
data: Theme.of(context).copyWith(
dialogTheme: DialogTheme(
backgroundColor: Theme.of(context).cardColor,
shape: RoundedRectangleBorder(
borderRadius: radius(6),
),
),
),
child: AlertDialog()
解决方案11
1 2019-04-13 01:54:50
I was looking at these answers and none of them helped me achieve the desired look.我正在查看这些答案，但没有一个能帮助我获得想要的外观。
I noticed that there was a default padding so all I did was:我注意到有一个默认填充，所以我所做的只是：
AlertDialog(
titlePadding: EdgeInsets.all(0),
title: Container(
height: 30.00,
width: 300.00,
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.only(topLeft: Radius.circular(32), topRight: Radius.circular(32)),
),
),
)
I overrode the titlePadding attribute and it came just right.我覆盖了titlePadding属性，它恰到好处。 There is also a contentPadding attribute if you find any trouble with that.如果您发现任何问题，还有一个contentPadding属性。 I copied this from one of my apps just to show the attribute, but it is applicable to this case as well.我从我的一个应用程序中复制了它只是为了显示属性，但它也适用于这种情况。
解决方案12
1 2020-06-30 10:41:39
If you want to use the standard Dialog you can just apply a Decoration to the Container that matches your Dialog settings如果您想使用标准对话框，您只需将装饰应用于与您的对话框设置匹配的容器
showDialog(
context: context,
child: Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
),
child: Text('foobar'),
)
],
),
),
);
解决方案13
1 2021-01-20 09:17:40
I am trying to create an alert dialog with rounded corners in Flutter same as below screenshot.我试图在Flutter中创建一个带有圆角的警报对话框，如下图所示。 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.我从上面的代码中得到的输出是。
解决方案14
1 2021-05-10 05:47:10
To change the appearance of the shape of the dialog, you can set the shape property of the AlertDialog to the desired shape.要更改对话框形状的外观，可以将 AlertDialog 的shape属性设置为所需的形状。
AlertDialog default shape is a RoundedRectangleBorder with a radius of 4.0 AlertDialog 默认形状是半径为 4.0 的 RoundedRectangleBorder
AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
)
解决方案15
0 2021-02-04 15:00:50
I am trying to create an alert dialog with rounded corners in Flutter same as below screenshot.我试图在Flutter中创建一个带有圆角的警报对话框，如下图所示。 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.我从上面的代码中得到的输出是。
解决方案16
0 2021-05-19 09:53:52
AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(12.0))),
contentPadding: EdgeInsets.only(top: 10.0),
content: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
//crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
IconButton(
icon: Icon(
Icons.highlight_off_outlined, color: Color(0xff5A5D60),),
onPressed: () {
Navigator.of(context,
rootNavigator: true)
.pop();
}),
SizedBox(
width: 10,
)
],
),
Image(
image: AssetImage(
'assets/warningicon.png'),
),
SizedBox(
height: mdq.height * .01,
),
Text(
'Registered Successfully',
style: GoogleFonts.roboto(
color: Color(0xff11171C),
fontSize: mdq.width * .04,
fontWeight: FontWeight.bold),
),
Text(
'Your account has been Successfully\ncreated.',
textAlign: TextAlign.center,
style: GoogleFonts.roboto(
color: Color(0xff11171C),
fontSize: mdq.width * .04,
),
),
SizedBox(
height: mdq.height * .04,
),
Row(
//mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
InkWell(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Login1()));
},
child: Container(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Color(0xffEEEEEE),
borderRadius: BorderRadius.only(
bottomLeft:
Radius.circular(12.0),
//bottomRight: Radius.circular(32.0)
),
),
width: 150,
child: Text(
"No",
style: TextStyle(
color: Color(0xff5A5D60),
fontSize: 17),
textAlign: TextAlign.center,
),
),
),
InkWell(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Testing()));
},
child: Container(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Color(0xffFFDC00),
borderRadius: BorderRadius.only(
//bottomLeft: Radius.circular(32.0),
bottomRight:
Radius.circular(12.0)),
),
child: Text(
"Yes",
style: TextStyle(
color: Colors.white,
fontSize: 17),
textAlign: TextAlign.center,
),
width: 150,
),
),
],
),
],
),
),
),[You can also show and design dialog box like this**strong text**][1]
解决方案17
0 2021-07-18 05:09:07
You can use like this你可以这样使用
using get: ------------->使用获取： ------------->
Get.generalDialog(
pageBuilder: (BuildContext buildContext, Animation animation,
Animation secondaryAnimation) =>
AlertDialog(
contentPadding: EdgeInsets.zero,
// this padding user for outside of alert padding
insetPadding: EdgeInsets.symmetric(horizontal: 10),
content: Container(
height: Get.height - 300, // Change as per your requirement
width: Get.width, // Change as per your requirement
child: <Your Widget>
),
),
));
using alert dialog:------>使用警告对话框：-------->
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: <Your widget>
),
);
});
解决方案18
0 2022-07-04 08:37:54
Padding(
padding: const EdgeInsets.symmetric(horizontal: 23.0),
child: IconButton(
onPressed: (){},
icon: const Icon(
Icons.fiber_new_rounded,
size: 25,
color: Colors.white,
)
),
),
解决方案19
0 2022-07-14 10:58:45
Use like this像这样使用
AlertDialog(
shape:RoundedRectangleBorder(
borderRadius:BorderRadius.circular(10.0,),
),
content: yourContent()
);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.