How to do Rounded Corners Image in Flutter

user decoration Image for a container.

```
@override
Widget build(BuildContext context) {
final alucard = Container(
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: new DecorationImage(
image: new AssetImage("images/logo.png"),
fit: BoxFit.fill,
)
)
);
```

Try this instead, worked for me:

Container(
width: 100.0,
height: 150.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover, image: NetworkImage('Path to your image')),
borderRadius: BorderRadius.all(Radius.circular(8.0)),
color: Colors.redAccent,
),
),

**Output:**

[![enter image description here][1]][1]

Using `BoxDecoration`


Container(
margin: EdgeInsets.all(8),
width: 86,
height: 86,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage('https://i.stack.imgur.com/0VpX0.png'),
fit: BoxFit.cover
),
),
),


[1]:

Use [`ClipRRect`][1] it will work perfectly.

ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(
subject['images']['large'],
height: 150.0,
width: 100.0,
),
)


[1]:

[To see links please register here]

### 1. Circular image (without border)

[![enter image description here][1]][1]

- #### Using `CircleAvatar`:

```dart
CircleAvatar(
radius: 48, // Image radius
backgroundImage: NetworkImage('imageUrl'),
)
```

- #### Using `ClipRRect`:

```dart
ClipOval(
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.network('imageUrl', fit: BoxFit.cover),
),
)
```

----

### 2. Circular image (with border)

[![enter image description here][2]][2]


- #### Using `CircleAvatar`:

```dart
CircleAvatar(
radius: 56,
backgroundColor: Colors.red,
child: Padding(
padding: const EdgeInsets.all(8), // Border radius
child: ClipOval(child: Image.network('imageUrl')),
),
)
```


- #### Using `ClipRRect`:

```dart
Container(
padding: EdgeInsets.all(8), // Border width
decoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle),
child: ClipOval(
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.network('imageUrl', fit: BoxFit.cover),
),
),
)
```

----

### 3. Rounded image (without border)

[![enter image description here][3]][3]

```dart
ClipRRect(
borderRadius: BorderRadius.circular(20), // Image border
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.network('imageUrl', fit: BoxFit.cover),
),
)
```

---

### 4. Rounded image (with border)

[![enter image description here][4]][4]

```dart
final borderRadius = BorderRadius.circular(20); // Image border

Container(
padding: EdgeInsets.all(8), // Border width
decoration: BoxDecoration(color: Colors.red, borderRadius: borderRadius),
child: ClipRRect(
borderRadius: borderRadius,
child: SizedBox.fromSize(
size: Size.fromRadius(48), // Image radius
child: Image.network('imageUrl', fit: BoxFit.cover),
),
),
)
```

<sub>There are other ways, like using `DecoratedBox` but that would make the answer bit too long.</sub>


[1]:

[2]:

[3]:

[4]:

Try this, with CircleAvatar and load image with [CachedNetworkImage][1].
[![enter image description here][2]][2]

```dart
CircleAvatar(
radius: 45,
child: ClipOval(
child: CachedNetworkImage(
imageUrl: "https:// your image url path",
fit: BoxFit.cover,
width: 80,
height: 80,
),
),
),
```






2) if you want border also, then add
```dart
backgroundColor: Colors.deepOrangeAccent,
```
inside this


[![enter image description here][3]][3]

```dart
CircleAvatar(
radius: 45,
backgroundColor: Colors.deepOrangeAccent,
child: ClipOval(
child: CachedNetworkImage(
imageUrl: "https:// your image url path",
fit: BoxFit.cover,
width: 80,
height: 80,
),
),
),
```


[1]:

[To see links please register here]

[2]:

[3]:

**Image all side rounder corner try this one**

Container(
// height and width depend on your your requirement.
height: 220.0,
width: double.infinity,
decoration: BoxDecoration(
// radius circular depend on your requirement
borderRadius: new BorderRadius.all(
Radius.circular(10),
),
image: DecorationImage(
fit: BoxFit.fill,
// image url your network image url
image: NetworkImage(
"dynamic image url",
),
),
),
);

**For Circular Image in Flutter**

ClipRRect(
child: Image.asset(
"assets/images/ic_cat.png",
width: 80,
height: 80,
),
borderRadius: BorderRadius.circular(50),
))

**If U want only corners of image then simple change the BorderRadius.circular like below**


ClipRRect(
child: Image.asset(
"assets/images/ic_cat.png",
width: 80,
height: 80,
),
borderRadius: BorderRadius.circular(20),
))

This is the code that I have used.



Container(
width: 200.0,
height: 200.0,
decoration: BoxDecoration(
image: DecorationImage(image: NetworkImage('Network_Image_Link')),
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(25.0)),
),
),
Thank you!!!