Flutter give container rounded border
I'm making a Container()
, I gave it a border, but it would be nice to have rounded borders.
This is what I have now:
Container(
width: screenWidth / 7,
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
),
child: Padding(
padding: EdgeInsets.all(5.0),
child: Column(
children: <Widget>[
Text(
'6',
style: TextStyle(
color: Colors.red[500],
fontSize: 25),
),
Text(
'sep',
style: TextStyle(
color: Colors.red[500]),
)
],
),
),
);
I tried putting ClipRRect
on it, but that crops the border away. Is there a solution for this?
Try using the property borderRadius
from BoxDecoration
Something like
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.red[500],
),
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: ...
)
To make it completely circle:
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
),
)
To make it a circle at selected spots:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(40.0),
bottomRight: Radius.circular(40.0),
topLeft: Radius.circular(40.0),
bottomLeft: Radius.circular(40.0)),
),
child: Text("hello"),
),
or
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: ...
)