Paint a circular image with border

Flutter has already provides `CircleAvatar` widget for it.

Container(
width: 100,
child: CircleAvatar(
radius: 50,
backgroundImage: ExactAssetImage('assets/images/restaurant.jpg'),
),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.red,
width: 4.0,
),
),
),

For those of you that want to create circle or a quare with rounded corners **with blur**

ClipRRect(
borderRadius: BorderRadius.circular(12),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
child: Container(
width: 50.0,
height: 50.0,
child: Icon(Icons.search_rounded, color: Colors.white,),
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.1),
borderRadius: BorderRadius.all( Radius.circular(12.0)),
border: Border.all(
color: Colors.white,
width: 1.0,
),
),
),
),
),

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


[1]:

Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
shape: BoxShape.circle,
),
child: CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(ytUserImage3),
),
),

Use **Padding** widget to give border to network/asset image.
Using CircleAvatar wraped with CircleAvatar is not responsive UI.

**Example:**

CircleAvatar(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
'images/logo.png',
color: whiteColor,
),
),
);

This will create a border inside an image:

CircleAvatar(
radius: 42,
backgroundColor: Theme.of(context).primaryColor,
child: CircleAvatar(
radius: 40,
backgroundColor: Colors.white,
child: CircleAvatar(
radius: 28,
backgroundColor: Colors.white,
child: Image.asset(
_brand.imagePath,
filterQuality: FilterQuality.high,
),
),
),
),