Flutter: giving border radius to a container - flutter

Question

I have a ListView builder that has containers as children and I'd like each of these containers to have rounded corners, So i wrapped it in ClipRRect and gave it a borderRadius, but the only thing affected is the shadow.
here is the result:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: items.length,
itemBuilder: (BuildContext ctx, int index) {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
height: 20,
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
margin: EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
boxShadow: [
BoxShadow(
color: Theme.of(context).primaryColor,
offset: Offset(0, -5),
blurRadius: 10.0)
]),
child: Text(
items[index],
style: TextStyle(fontSize: 12.0, color: Colors.white),
),
),
);
}),
What am I missing?
(I know I can use the borderRadius on the BoxDecoration, but I'm wondering why this does not work as well)

Answer 1

Remove the ClipRRect and give radius directly to the container.
If you want the shadows to stay then don't remove ClipRRect and just add the radius property to the inner container.
Container(
height: 20,
padding:
EdgeInsets.symmetric(horizontal: 12, vertical: 6),
margin: EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)), //here
color: Theme.of(context).primaryColor,
boxShadow: [
BoxShadow(
color: Theme.of(context).primaryColor,
offset: Offset(0, -5),
blurRadius: 10.0)
]),
child: Text(
items[index],
style: TextStyle(fontSize: 12.0, color: Colors.white),
),
),
Edit: The rounded shadow you are getting is because of the offset that you have used for the inner container.
Edit: This might be helpful:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (context, index) {
return Container(
width: 50,
padding: const EdgeInsets.all(10),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
height: 10,
color: Colors.red,
),
),
);
},
),