How to add an icon with opacity layer over circular image in Flutter

Question

I need to add camera icon with opacity layer over circular image. I tried below code:

Container(
      height: 100,
      width: 100,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          image: AssetImage(userInfo.imageUrl),
          fit: BoxFit.cover,
        ),
      ),
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          width: double.infinity,
          padding: EdgeInsets.symmetric(vertical: 5),
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.3),
          ),
          child: Icon(
            Icons.photo_camera,
            color: Colors.white.withOpacity(0.5),
          ),
        ),
      ),
    ) 

But I did not get the expected result:

Anyone have an idea how to make it works? Thanks

Answer 1

Wrap it in the ClipRRect widget like this

Container(
  height: 100,
  width: 100,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(50.0),
    child: Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          image: AssetImage("assets/imgs/avatar-default.png"),
          fit: BoxFit.cover,
        ),
      ),
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          width: double.infinity,
          padding: EdgeInsets.symmetric(vertical: 5),
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.3),
          ),
          child: Icon(
            Icons.photo_camera,
            color: Colors.white.withOpacity(0.5),
          ),
        ),
      ),
    ),
  ),
),

Answer 2

You could also use ClipOval

Container(
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: AssetImage(userInfo.imageUrl),
      fit: BoxFit.cover,
    ),
  ),
  child: ClipOval(
  child: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(vertical: 5),
      decoration: BoxDecoration(
        color: Colors.black.withOpacity(0.3),
      ),
      child: Icon(
        Icons.photo_camera,
        color: Colors.white.withOpacity(0.5),
      ),
    ),
  ),
)
),