How to do Rounded Corners Image in Flutter

There are multiple ways to implement rounded images in Flutter. Below, I will introduce several common approaches.

1. Using ClipRRect to Wrap the Image

ClipRRect is a convenient widget that clips its child into a rounded rectangle. The following example demonstrates its usage:

dart
ClipRRect(
  borderRadius: BorderRadius.circular(20.0), // Set the corner radius
  child: Image.network(
    'https://example.com/image.jpg',
  ),
)

In this example, we set a 20.0 pixel corner radius, which clips the image into a rounded shape.

2. Using Container with decoration

Another approach involves using the Container widget with BoxDecoration to achieve rounded corners. Here's how:

dart
Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20.0), // Corner radius
    image: DecorationImage(
      image: NetworkImage('https://example.com/image.jpg'),
      fit: BoxFit.cover,
    ),
  ),
)

In this example, we use the image property within BoxDecoration to set the background image and define the rounded corners using BorderRadius.circular.

3. Using CircleAvatar for Circular Images

If you require a fully circular image, you can use the CircleAvatar widget, which is circular by default:

dart
CircleAvatar(
  backgroundImage: NetworkImage('https://example.com/image.jpg'),
  radius: 50.0, // Set the radius size
)

These three methods are common approaches for implementing rounded images in Flutter. Depending on your specific requirements (e.g., the corner radius or a fully circular image), you can select the most appropriate method.