Circle Avatar Image with border in Flutter

Now let us create a Circular Avatar Image with a border like the Image Below.

Well then, Let’s get started. This Can Be Achieved In Two Ways
1. First Let Us Create It With Circular Avatar Widget.
Here’s the code to create “ just ” a Circular avatar you can Add your Asset Image In your Project.

CircleAvatar(
  radius: 50,
  backgroundImage: AssetImage('assets/IMG_0479.JPG'),
),

This will only create a circular avatar with no border. To do that we need to wrap this CircleAvatar widget in another CircleAvatar widget with the color we need (#fdcf09) as background color and a radius that is more than the current radius (50)



CircleAvatar(
  backgroundColor: Colors.red,
  radius: 55,
  child: CircleAvatar(
    radius: 50,
    backgroundImage: AssetImage('assets/IMG_0479.JPG'),
  ),
),

This should actually do the work.
2: Second Let us Achieve The above Work Using Container Widget

  Container(
  height: 250,
  width: 250,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius:
    const BorderRadius.all(Radius.circular(125)),
    border: Border.all(
      color: Colors.yellow,
      width: 8,
    ),
    image: const DecorationImage(
      image: AssetImage('assets/IMG_0479.JPG'),
      fit: BoxFit.cover,
    ),

  ),

);