如何获得容器的圆角？

Question

I tried to build a card with round corners. I tried to add the borderRadius in the Container and the child of the Container is an image, but I don´t get the round corners. I only get them when I delete the Image property. What is my mistake? Thanks in advance!

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(80)),
  ),
  child: Image.asset('images/Bild1.jpg'),
)

Answer 1

Solution 1:

Container(
  clipBehavior : Clip.antiAlias,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(80)),
  ),
  child: Image.asset('images/Bild1.jpg'),
)

Solution 2:

Container(
  clipBehavior : Clip.antiAlias,
  decoration: BoxDecoration(
    shape: BoxShape.circle
  ),
  child: Image.asset('images/Bild1.jpg'),
)

Solution 3:

Material(
  shape: CircleBorder(),
  child: Image.asset('images/Bild1.jpg'),
)

Solution 4:

CircleAvatar(
  backgroundImage: AssetImage('images/Bild1.jpg'),
)

Answer 2

Use the class ClipRRect which clips your edges to the desire radius:

child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(80)),
       ),
       child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(80)),
        child: Image.asset('images/Bild1.jpg'),
      ),
    );

Answer 3

If all you need Container 's decoration is for clipping, you should use CircleAvatar

CircleAvatar(
  backgroundImage: AssetImage('images/Bild1.jpg'),
  radius: 80,
)

or simply replace Container with ClipRRect

ClipRRect(
  borderRadius: BorderRadius.all(Radius.circular(80)),
  child: Image.asset('images/Bild1.jpg'),
)

or use ClipOval

ClipOval(
  child: Image.asset('images/Bild1.jpg'),
)