How to create square avatar with rounded corners on flutter?

user_7128933 0
Viewed 9267

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

CircleAvatar

And this is the avatar I want to create:

Square

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

flutter avatar widget
2 Answers

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

user_139980570

You can use ClipRRect with specified BorderRadius property like this:

see image here

 ClipRRect(
   borderRadius: BorderRadius.all(Radius.circular(10.0)),//add border radius here
   child: Image.asset('assets/01.jpg'),//add image location here
 ),
user_130509870
Related