flutter CircleAvatar border not shown

Question

I want to show a circle avatar with an image and a colored border. I use two circle avatars with different radius to show the color around one circle avatar. But something doesn't work and I don't know. I want to show this in a gride tile with a container.

the code is:

Widget columnContainer(User user) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(),
      ),
      child: UserItem(user.id, user.name, user.image, user.color),
      width: 200,
      height: 200,
    );
  } 

the user item is

class UserItem extends StatelessWidget {
  final String id;
  final String name;
  final File? image;
  final Color? color;

  UserItem(this.id, this.name, this.image, this.color);

  @override
  Widget build(BuildContext context) {
      return CircleAvatar(
        radius: 35,
        backgroundColor: color,
        child: CircleAvatar(
          radius: 28,
          backgroundColor: color,
          child: Padding(
            padding: const EdgeInsets.all(5),
            child: AutoSizeText(
              name,
              minFontSize: 7,
              textAlign: TextAlign.center,
              overflow: TextOverflow.ellipsis,
              maxLines: 5,
            ),
          ),
          foregroundImage: FileImage(image!),
        ),
      );
  }
}

Here is a photo how it looks like.

where is the error? Thank you.

Answer 1

Try below code hope its help to you, I have try using Container and CircleAvatar

Using Container and CircleAvatar

Container(
  width: 150,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      color: Colors.black,
      width: 2.0,
    ),
  ),
  child: CircleAvatar(
    radius: 50,
    backgroundImage: NetworkImage(
      'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
    ),
  ),
),

Using CircleAvatar

CircleAvatar(
  backgroundColor: Colors.black,
  radius: 50.0,
  child: CircleAvatar(
    backgroundImage: NetworkImage(
      'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
    ),
    radius: 48.0,
  ),
),

Result Screen->