Paint a circular image with border

I want to do something like


new BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
image: new ExactAssetImage('assets/images/restaurant.jpg'),
fit: BoxFit.cover,
),
borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
border: new Border.all(
color: Colors.red,
width: 4.0,

),

The visual I am looking for is like the way gmail shows the user's image. This code - which is from the docs - works fine, but my image should be loaded from a url, and is not in the assets.

Container(
height: 150.0,
width: 150.0,
child: Padding(
padding: EdgeInsets.all(15),
child: CircleAvatar(
backgroundColor: Colors.transparent,
radius: 10,
child: new Image.asset('images/logo.png'),
)),
decoration: new BoxDecoration(
shape: BoxShape.circle,
border: new Border.all(
color: Colors.indigo,
width: 2.0,
),
));

Use fadeInImage as recommended by flutter community to display images from network and enclosed in a container with a border decoration



<pre> Widget getCircularImage(double size) {
return Container(
width: size,
height: size,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
borderRadius: new BorderRadius.all(new Radius.circular(size / 2)),
border: new Border.all(
color: Colors.white,
width: 4.0,
),
),
child: ClipOval(child: FadeInImage.assetNetwork(
fit: BoxFit.cover,
placeholder: widget.placeholderUrl,
image: widget.imageUrl)),
);
}
</pre>

CircleAvatar(
radius: 30,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 28,
backgroundImage: AssetImage('images/avatar.jpg'),
),
)

If you are using CircleAvatar without giving radius, you can use it this way.

CircleAvatar(
backgroundColor: Colors.white, //border color
child: Padding(
padding: const EdgeInsets.all(2.0), //border size
child: CircleAvatar(
backgroundImage: Image.asset("image.png"),
),
),
),

Use [avatar_view][1] lib which provides the functionality to show network/asset images in circular/rectangular form.

To use add below dependency

**Example:**

AvatarView(
radius: 60,
borderWidth: 8,
borderColor: Colors.yellow,
avatarType: AvatarType.CIRCLE,
backgroundColor: Colors.red,
imagePath:
"https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
placeHolder: Container(
child: Icon(Icons.person, size: 50,),
),
errorWidget: Container(
child: Icon(Icons.error, size: 50,),
),
),


**Output:**

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


[1]:

[To see links please register here]

[2]:

**Easy Answer**

Use two CircleAvatars together. *Examples of code & screenshot:*

CircleAvatar(
backgroundColor: Colors.white,
radius: 60.0,
child: CircleAvatar(
backgroundImage: AssetImage('images/darth_vader.jpg'),
radius: 50.0,
),
),

[![Two CircleAvatars.][1]][1]


[1]:

For those who want the **border to be outside of the image** in other words, around the image:




class FramedImage extends StatelessWidget {
final ImageProvider image;
final double borderWidth;
final Color borderColor;
final double borderRadius;

const FramedImage({
required this.image,
this.borderWidth = 2,
this.borderColor = Colors.black,
this.borderRadius = 2,
Key? key
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(borderRadius + borderWidth),
border: Border.all(width: borderWidth, color: borderColor),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: Image(
image: image,
fit: BoxFit.cover,
)
)
);
}
}

Example usage:

FramedImage(
image: NetworkImage('https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png'),
borderColor: Colors.blueAccent,
// adjust this if you want a complete circle
borderRadius: 10,
borderWidth: 5,
);

Relative approach when a parent constraints the bound:

```
CircleAvatar(
constraints: const BoxConstraints.expand(),
child: Padding(
padding: const EdgeInsets.all(3.0),
child: CircleAvatar(
backgroundImage: avatar,
),
),
)
```

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


[1]:

[`NetworkImage`][1] is the class you are looking for.

[![screenshot][2]][2]

Container(
width: 100.0,
height: 100.0,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage('http://i.imgur.com/QSev0hg.jpg'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all( Radius.circular(50.0)),
border: Border.all(
color: Colors.red,
width: 4.0,
),
),
),


[1]:

[To see links please register here]

[2]: