### 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]: