Different ways of making rounded corner images in flutter

By | June 25, 2023

Example 1: ClipRRect

dartCopy codeClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: Image.asset('assets/images/image.jpg'),
)

In this example, the ClipRRect widget is used to clip the child Image with rounded corners. The borderRadius property defines the radius of the corners.

Example 2: BoxDecoration

dartCopy codeContainer(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    image: DecorationImage(
      image: AssetImage('assets/images/image.jpg'),
      fit: BoxFit.cover,
    ),
  ),
)

Here, a Container is used with a BoxDecoration to apply rounded corners to the image. The borderRadius property defines the corner radius, and the image property is set with the desired image asset. The fit property is used to specify how the image should be fitted inside the container.

Example 3: ClipRRect with Network Image

dartCopy codeClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: Image.network('https://example.com/image.jpg'),
)

In this example, ClipRRect is used again, but with a network image. The borderRadius property sets the corner radius, and the child property is set with Image.network to fetch the image from the specified URL.

These examples demonstrate different ways to achieve rounded corner images in Flutter. You can choose the approach that best fits your requirements and use it accordingly in your Flutter application.

Leave a Reply

Your email address will not be published. Required fields are marked *