In Flutter, How can I make my FadeInImage fit to the parent container with rounded edges?

user_16532461 0
Viewed 26

Here is my code. This produces a rectangle image.

    return Container(
      width: 325,
      height: 245,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.white,
      ),
      child: FadeInImage.assetNetwork(
        placeholder: AppAssets.eventPlaceholder,
        image: tempPhoto,
        fit: BoxFit.cover,
      ),
    );

I expect the photo's corners to be cut because the parent has rounded corners.

flutter image
1 Answers

You can wrap the widget with a ClipRRect to get rounded corners:

A widget that clips its child using a rounded rectangle.

In your case:

 return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: Container(
        width: 325,
        height: 250,
        color: AppColors.white,
        child: FadeInImage.assetNetwork(
          placeholder: AppAssets.eventPlaceholder,
          image: tempPhoto,
          fit: BoxFit.cover,
        ),
      ),
    );
  • Here is a YouTube video by the Google team explaining ClipRRect.
user_123497340
Related