How to create square avatar with rounded corners on flutter?

Question

I want to create a widget similar to CircleAvatar, but not rounded. This is CircleAvatar:

And this is the avatar I want to create:

I want to know if there is a default widget to do this, as CircleAvatar for rounded avatars.

Answer 1

There are so many ways to achieve it but I will only make use one. Wrap a ClipRRect() widget around a child widget(this could be an image or any other relevant widget like a Container used in my example). Then, pass BorderRadius.circular(20.0) value to borderRadiusproperty of ClipRRect(). That is the active lines of code that create the effect. Check below for my example:

ClipRRect(
  borderRadius: BorderRadius.circular(20.0),//or 15.0
  child: Container(
    height: 70.0,
    width: 70.0,
    color: Color(0xffFF0E58),
    child: Icon(Icons.volume_up, color: Colors.white, size: 50.0),
  ),
),

see result here