CODEWITHSUNDEEP
flutterdartflutter-layout
simi
simi

Reputation: 349

How do I get round corners for a Container?

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'),
)

Upvotes: 0

Views: 729

Answers (3)

KumarSunil17
KumarSunil17

Reputation: 223

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'),
)

Upvotes: 1

CopsOnRoad
CopsOnRoad

Reputation: 267544

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'),
)

Upvotes: 1

Mariano Zorrilla
Mariano Zorrilla

Reputation: 7686

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'),
      ),
    );

Upvotes: 1

Related Questions