How to add circular border to dialog in flutter? - flutter

Question

How to add circular border for dialog box in a flutter?,I tried the below code but I can't able to get the desired output, I already added circular border but it's not working, I need circular border for dialog,Refer the expected output for details, please guide
My code :
`
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double padding = 1.0;
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: EdgeInsets.all(1),
width: double.infinity,
child: Text('title',
style: TextStyle(fontSize: 30, color: Colors.white)),
color: Colors.green,
),
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: ListView(
shrinkWrap: true,
children: [
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
],
),
),
Divider(
color: Colors.white,
),
Container(
color: Colors.white,
height: 50,
padding: EdgeInsets.all(5),
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(fontSize: 20),
)),
])));
}
}
`
My expectation:
current output:

Answer 1

Just need to add ClipBehavior to Dialog.
import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double padding = 1.0;
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
clipBehavior: Clip.antiAlias, // add clipBehavior
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: EdgeInsets.all(1),
width: double.infinity,
child: Text('title',
style: TextStyle(fontSize: 30, color: Colors.white)),
color: Colors.green,
),
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: ListView(
shrinkWrap: true,
children: [
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
],
),
),
Divider(
color: Colors.white,
),
Container(
color: Colors.white,
height: 50,
padding: EdgeInsets.all(5),
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(fontSize: 20),
)),
]),
);
}
}

Answer 2

The issue was with the Container you used to wrap the other widgets, you can add specific border radius to each container to fix.
I added a demo and code to get what you wanted your output to look like:
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 340,
child: Column(
children: [
Container(
height: 60,
width: double.infinity,
padding: EdgeInsets.all(
15.0,
),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
15.0,
),
topRight: Radius.circular(
15.0,
),
),
),
child: Text(
'Baby Names',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
...List.generate(
5,
(index) => Padding(
padding: const EdgeInsets.all(10.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'List Names',
style: TextStyle(
fontSize: 18,
),
),
),
),
),
Divider(
color: Colors.grey[200],
thickness: 1.5,
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Align(
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(
fontSize: 18,
color: Colors.green,
),
),
),
),
],
),
),
);
}
}
RESULT:

Answer 3

You added RoundedRectangleBorder(),
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Container(
padding: EdgeInsets.only(
top: 10.0,
bottom: 5,
left: 5,
right: 5,
),
margin: EdgeInsets.only(top: 5),
decoration: new BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
offset: const Offset(0.0, 10.0),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min, // To make the card compact
children: <Widget>[
Text(
"Baby",
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.w700,
),
),
Divider(color: Colors.grey,),
SizedBox(height: 16.0),
Text(
"text",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.0,
),
),
SizedBox(height: 24.0),
Align(
alignment: Alignment.bottomRight,
child: FlatButton(
onPressed: () {
Navigator.of(context).pop(); // To close the dialog
},
child: Text("buttonText"),
),
),
],
),
),
);
}
}