DEV Community

mukhtharcm
mukhtharcm

Posted on • Originally published at mukhtharcm.com

2 2

Image with rounded Corners in Flutter

Recently I was trying to build a Card with rounded corners in Flutter.
Inside it, there was an Image. Just Like this.
The Widget we want to build

My first attempt was to put our Image inside a container with a radius.
So did I, and the result was not satisfying.

Container(
      height: 200,
        width: 350,
      decoration: (BoxDecoration(
        borderRadius: BorderRadius.circular(45),
      )),
      child: Image(
        fit: BoxFit.cover,
        image: NetworkImage(
            'https://images.unsplash.com/photo-1526749837599-b4eba9fd855e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'),
      ),
    )
Enter fullscreen mode Exit fullscreen mode

The above Code gave me this.

image inside rounded container
😢

clearly, this is not the result we want.

After a fair time of Googling, I found the solution.
It was to use ClipRRect instead of Container.

So the code,

ClipRRect(
      borderRadius: BorderRadius.circular(45),
      child: Image(
        height: 200,
        width: 350,
        fit: BoxFit.cover,
        image: NetworkImage(
            'https://images.unsplash.com/photo-1526749837599-b4eba9fd855e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'),
      ),
    )
Enter fullscreen mode Exit fullscreen mode

will give us this.
image inside ClipRRect

And that's the result we were hunting. 😄

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more