Paint a circular image with border

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,
  ),
),

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,
    ),
  ),
),

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

  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)),
    );
  }

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

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,
                ),
              ),
            ),
          ),
        ),

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"),
                  ),
                ),
              ),

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,
    ),
  ),
)

 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,
          ),
        ));

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,
);

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

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, ), ), ), ),

Use avatar_view 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: