Container(
margin: EdgeInsets.all(30.0),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
color: Colors.red,
),
child: Text(
'Hello world'
),
),
Here we are going to show you how to make rounded corners of a container or add border-radius to a container in Flutter. You can use decoration property for that and pass BoxDecoration with borderRadius property in it. We have assigned a '10.0' scale radius to the container by using 'BorderRadius.circular(10.0)'.
Container(
width: double.infinity,
margin: const EdgeInsets.all(40.0),
padding: const EdgeInsets.all(50.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0), //Use this code to make rounded corners
color: const Color(0xffCCCCCC),
),
child: const Text('This box has rounded corners!'),
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
),
),
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
),
),
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20.0),
),
),
),
Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(20.0),
),
),
),
If you want to add border-radius of specific corners then we can use BorderRadius.only for decoration property value
See Also How to add Border Radius to Container in Flutter ?
See Also How to add Border Radius to Container in Flutter ?